HTML5 and CSS3

The Theory
HTML5
!DOCTYPE
 !DOCTYPE
!DOCTYPE must be the first thing in a HTML
document (you can not put it at any point below)

This is not a HTML tag; it is an instruction to the

browser informing it which version of HTML the
page is written in

Always try and use so that the browser knows

what type of document it is
HTML, HEAD and
BODY
 HTML
HTML Tag tells the browser that this is a HTML
document

HTML is the beginning and end tags in a HTML

page

It signifies that between its tags is HTML

content - It is the container for all HTML
content except the !DOCTYPE
 Head
Defines the Head element part of the HTML
Page

Head is the container for all the HTML page

head elements

It can include page elements such as the page

title, scripts, styles, meta information and much
more
 Body

The body tag defines the body element of the

HTML document

Within the body tags; all HTML content is

written and includes things such as text,
hyperlinks, images, tables, lists, etc. and all
other elements that make up the page
Header, Footer and
Section
 Header

Represents a container for introductory

content and/or navigation menus

Typically it may contain one or more heading

elements, logos, icons, menus, etc.

Before HTML5; designers would use a Div to

section off the header..
 Footer
Defines the Footer section of the HTML5 page

Would typically contain items such is

authorship, copyright, contact information but
could also contain sitemap, menu, related
documents.

Before HTML5 designer would generally create

a section using a Div
 Section

Used to define sections in the document

Generally used to section off parts such as

chapters, headers, footers and any other
section of a document that maybe needed
DIV
 DIV

Used to define a division or a section in a

HTML document

Used to group block-elements to format them

with CSS
Class and ID
 Class
Class is used to specify a section in your HTML page;
used in conjunction of items such as Div, ul, etc

e.g. <div class=test>

Used in CSS to associate styling with elements on page

The same class name can be used in multiple places in

the HTML Document; so styling can be used on
multiple items
 ID

ID is similar to class

Unlike class you can only use the ID name on

only 1 element in the HTML document

Like class; ID is used to associate styling to a

section using CSS
Span
 Span
Used to group inline-elements in a document

Unlike Div; span does not have any automatic formatting

and so has no styling change in itself

When used on a tag link such as <p>; allows you to add

styling

e.g. <p>This is <span style=color:red>Important</

span> text</p>

This would set the color or Important to red

<P> is for Paragraph
 Paragraph

The <p> tag defines a paragraph in you

document

Has pre-defined formatting which can be

changed - The browser will always add some
space (margin) before and after each p
element
<H> is for Header
 Headers
<h1> .. to .. <h6> are used to define HTML
Headings

H1 is the most important and goes down to H6 as

least important heading

Each have pre-defined formatting; which

includes font size/style

Formatting of h tags can be changed in CSS

<A> is for Anchor
 Anchors

The <a> tag defines a hyperlink which is used to

link to another page

The most important attribute of the <a> tag is

the href attribute - which defines the hyperlink

<a> attribute has default styling; such as colour

of hyperlink; which can be changed with CSS
IMG is for Image
 Image

The IMG tag is used to define an image in a

HTML document

There are two required attributes, src and alt;

although you can just use the src attribute

Its advisable to use the alt attribute as this also

helps with SEO
UL and LI
 UL

UL stands for Unordered List

UL has some pre-defined formatting; such as

items are bulleted - this can be changed in CSS

You use the ul tag along with the li tag to create

an unordered list of items
 LI

<li> tag stands for list item

li tag can be used with unordered lists <ul>;

ordered lists <ol> and menu lists <menu>

Each <li> element is 1 item in the list; so one <ul>

will have many <li> items
Input
 Input Tag

Used to specify an input field; somewhere

where a user can input data

Generally used with in form element to create

input areas

Input can be of many different types; defined

by its type attribute
CSS3
Element, Class and ID
 Element

An elements are HTML Tags such as <p>, <a>,

IMG, etc. and also include the new Header and
Footer

When used in the CSS styles sheet they are just

added without any pre-definer (unlike class
and id)
 Class

A class is user defined in the HTML

To create styles for a class you prefix with a

period ( . )

Allows you to style all items that are defined by

the class in the HTML
 ID

ID is user defined but can only be used once in

the HTML Document

To style in CSS you have to pre-fix with a hash

(#)

Allows you to style the one group defined by

the ID
Background Colour and
Image
 Backgound-color
The background-color property is used to set
the background colour of an element

The background of the element is the total size

of the element which also includes any padding
and border

You can set using a colour name, hash value or

using rgb(r, g, b)
 Background-image

The background-image property is used to set

one or more background images in an element

By default, a background-image is placed at

the top-left corner and is repeated horizontally
for the size of the element (including padding
and border)
Padding and Margin
 Padding
Is used to set all the padding properties in one
declaration for the element, class or id it is use in

passing in 4 values sets the padding in the following

order

padding: 10px 10px 10px 5px - sets as

Top,right, bottom and left

Just passing in one value will set all four paddings

 Margin

Margin sets all the margin properties for the

element, class or id in one declaration

Like padding the order is top, right, bottom and

left

Also like padding, passing in one value will set

all four margins
Float
 Float
Used to specify whether or not an element
should float

By setting the value; every element after is

effected by the float value unless the clear
command is used

We can use for various things such as floating

images so that text wraps, etc.
Font-Family and Font-
Weight
 Font-Family
Used to specify the font property for an
element

Is used to change the font used on the element

it is used in

It can hold several font names as a fallback so

that if the browser does not support the first; it
will try the next font
 Font-Weight

Used to set how think or thin characters in the

font should be displayed

Used, as example, to set bold fonts

Text-Align and Text-
Decoration
 Text-Align

Used to specify the horizontal alignment

property of the text

Allows us to set text to be either center, left or

right in the element it is set in
 Text-Decoration
Text-decoration property allows the specification
of particular decoration to be added to text

Used to set text to be underlined, line-through,

etc.

Can also be used to set to none; for example -

when wanting to remove the underline from a
hyperlink
List-Style
 List-Style

This property will set all the list properties in

one declaration

Properties that can be set are list-style-type,

list-style-position and list-style-image

Can also be set to none to remove any styling

Border and Border-
Radius
 Border

Used to set the border properties in one

declaration

Can set the border-width, border-style and

border-color

You can set all 3 or just 1 if desire

 Border-Radius

Used to set the radius properties of the border

We use this property to set rounded border

corners by passing in a value in pixels
Box-Shadow
 Box-Shadow

Used to attach one or more shadows to an

element

Values passed in refer to horizontal shadow,

vertical shadow, blur of that shadow as well as
the colour we want the shadow to be
Transform
 Transform

The transform property applies 2D or 3D

transformation to an element

You can do things such as rotate, scale, skew,

move as well as a few other things to an element

Great way of adding animation to your HTML

document