Anda di halaman 1dari 60

HTML5 and CSS3

The Theory
!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 Tag tells the browser that this is a HTML

HTML is the beginning and end tags in a HTML


It signifies that between its tags is HTML

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

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

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

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..
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

Before HTML5 designer would generally create

a section using a Div

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

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 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 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
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


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

The <p> tag defines a paragraph in you


Has pre-defined formatting which can be

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

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

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

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 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> 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 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
Element, Class and ID

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

IMG, etc. and also include the new Header and

When used in the CSS styles sheet they are just

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

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 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
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)

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
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


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

Top,right, bottom and left

Just passing in one value will set all four paddings


Margin sets all the margin properties for the

element, class or id in one declaration

Like padding the order is top, right, bottom and


Also like padding, passing in one value will set

all four margins
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-
Used to specify the font property for an

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

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-

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 property allows the specification
of particular decoration to be added to text

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


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

when wanting to remove the underline from a

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-

Used to set the border properties in one


Can set the border-width, border-style and


You can set all 3 or just 1 if desire


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

Used to attach one or more shadows to an


Values passed in refer to horizontal shadow,

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

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