CSS Introduction

What you should already know

Before you continue you should have a basic understanding of the following:

HTML / XHTML

What is CSS?

CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4 ! to solve a problem External Style Sheets can save a lot of wor" #$ternal Style Sheets are stored in CSS files Multi%le style definitions will cascade into one

CSS demo
&n HTML document can be dis%layed with different styles: See how it wor"s

Styles solved a big problem

The original HTML was never intended to contain tags for formatting a document HTML tags were intended to define the content of a document' li"e: (%)This is a %aragra%h (/%) (h*)This is a heading(/h*) +hen tags li"e (font) and color attributes were added to the HTML , - s%ecification' it started a nightmare for web develo%ers .evelo%ment of large web sites where fonts and color information had to be added to every single +eb %age' became a long' e$%ensive and unduly %ainful %rocess To solve this %roblem' the +orld +ide +eb /onsortium 0+,/1 2 res%onsible for standardi3ing HTML 2 created /SS in addition to HTML 4 ! +ith HTML 4 !' all formatting can be removed from the HTML document and stored in a se%arate /SS file &ll browsers su%%ort /SS today

Styles save a lot of work

Styles sheets define H4+ HTML elements are to be dis%layed Styles are normally saved in e$ternal css files #$ternal style sheets enable you to change the a%%earance and layout of all the %ages in a +eb site' 5ust by editing one single /SS document6

Multiple styles will cascade into one

Style sheets allow style information to be s%ecified in many ways Styles can be s%ecified:

inside an HTML element inside the head section of an HTML %age in an e$ternal /SS file

ip! #ven multi%le e$ternal style sheets can be referenced inside a single HTML document

Cascading order " What style will be used when there is more than one style specified for an # M$ element?
7enerally s%ea"ing we can say that all the styles will 8cascade8 into a new 8virtual8 style sheet by the following rules' where number four has the highest %riority: * , 4 Browser default #$ternal style sheet 9nternal style sheet 0in the head section1 9nline style 0inside an HTML element1

So' an inline style 0inside an HTML element1 has the highest %riority' which means that it will override a style defined inside the (head) tag' or in an e$ternal style sheet' or in a browser 0a default value1 9f the lin" to the e$ternal style sheet is %laced after the internal style sheet in HTML (head)' the e$ternal style sheet will override the internal style sheet6

CSS Syntax
Syntax
The /SS synta$ is made u% of three %arts: a selector' a %ro%erty and a value:

selector :%ro%erty:value; The selector is normally the HTML element/tag you wish to define' the %ro%erty is the attribute you wish to change' and each %ro%erty can ta"e a value The %ro%erty and value are se%arated by a colon' and surrounded by curly braces: body :color:blac"; %ote! 9f the value is multi%le words' %ut <uotes around the value: % :font2family:8sans serif8; %ote! 9f you want to s%ecify more than one %ro%erty' you must se%arate each %ro%erty with a semicolon The e$am%le below shows how to define a center aligned %aragra%h' with a red te$t color: % :te$t2align:center=color:red; To ma"e the style definitions more readable' you can describe one %ro%erty on each line' li"e this: % : te$t2align:center= color:blac"= font2family:arial ;

&rouping
>ou can grou% selectors Se%arate each selector with a comma 9n the e$am%le below we have grou%ed all the header elements &ll header elements will be dis%layed in green te$t color: h*'h-'h,'h4'h?'h@ : color:green ;

he class Selector
+ith the class selector you can define different styles for the same ty%e of HTML element Say that you would li"e to have two ty%es of %aragra%hs in your document: one right2aligned %aragra%h' and one center2aligned %aragra%h Here is how you can do it with styles:

% right :te$t2align:right; % center :te$t2align:center; >ou have to use the class attribute in your HTML document: (% classA8right8)This %aragra%h will be right2aligned (/%) (% classA8center8)This %aragra%h will be center2aligned (/%) %ote! To a%%ly more than one class %er given element' the synta$ is: (% classA8center bold8)This is a %aragra%h (/%) The %aragra%h above will be styled by the class 8center8 &B. the class 8bold8 >ou can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class 9n the e$am%le below' all HTML elements with classA8center8 will be center2aligned: center :te$t2align:center; 9n the code below both the h* element and the % element have classA8center8 This means that both elements will follow the rules in the 8 center8 selector: (h* classA8center8)This heading will be center2aligned(/h*) (% classA8center8)This %aragra%h will also be center2aligned (/%) .o %' start a class name with a number6 9t will not wor" in Mo3illa/Cirefo$

(dd Styles to Elements with )articular (ttributes

>ou can also a%%ly styles to HTML elements with %articular attributes The style rule below will match all in%ut elements that have a ty%e attribute with a value of 8te$t8: in%utDty%eA8te$t8E :bac"ground2color:blue;

he id Selector
>ou can also define styles for HTML elements with the id selector The id selector is defined as a F The style rule below will match the element that has an id attribute with a value of 8green8: Fgreen :color:green;

The style rule below will match the % element that has an id with a value of 8%ara*8: %F%ara* : te$t2align:center= color:red ; .o %' start an 9. name with a number6 9t will not wor" in Mo3illa/Cirefo$

CSS Comments
/omments are used to e$%lain your code' and may hel% you when you edit the source code at a later date & comment will be ignored by browsers & /SS comment begins with 8/G8' and ends with 8G/8' li"e this: /GThis is a commentG/ % : te$t2align:center= /GThis is another commentG/ color:blac"= font2family:arial ;

CSS #ow o***

#ow to Insert a Style Sheet
+hen a browser reads a style sheet' it will format the document according to it There are three ways of inserting a style sheet:

External Style Sheet

&n e$ternal style sheet is ideal when the style is a%%lied to many %ages +ith an e$ternal style sheet' you can change the loo" of an entire +eb site by changing one file #ach %age must lin" to the style sheet using the (lin") tag The (lin") tag goes inside the head section: (head) (lin" relA8stylesheet8 ty%eA8te$t/css8 hrefA8mystyle css8 /) (/head) The browser will read the style definitions from the file mystyle css' and format the document according to it

&n e$ternal style sheet can be written in any te$t editor The file should not contain any html tags >our style sheet should be saved with a css e$tension &n e$am%le of a style sheet file is shown below: hr :color:sienna; % :margin2left:-!%$; body :bac"ground2image:url08images/bac"4! gif81; .o not leave s%aces between the %ro%erty value and the units6 8margin2left:-! %$8 0instead of 8margin2left:-!%$81 will only wor" in 9#@' but it will not wor" in Cirefo$ or 4%era

Internal Style Sheet

&n internal style sheet should be used when a single document has a uni<ue style >ou define internal styles in the head section by using the (style) tag' li"e this: (head) (style ty%eA8te$t/css8) hr :color:sienna; % :margin2left:-!%$; body :bac"ground2image:url08images/bac"4! gif81; (/style) (/head) The browser will now read the style definitions' and format the document according to it %ote! & browser normally ignores un"nown tags This means that an old browser that does not su%%ort styles' will ignore the (style) tag' but the content of the (style) tag will be dis%layed on the %age 9t is %ossible to %revent an old browser from dis%laying the content by hiding it in the HTML comment element: (head) (style ty%eA8te$t/css8) (622 hr :color:sienna; % :margin2left:-!%$; body :bac"ground2image:url08images/bac"4! gif81; 22) (/style) (/head)

Inline Styles
&n inline style loses many of the advantages of style sheets by mi$ing content with %resentation Hse this method s%aringly' such as when a style is to be a%%lied to a single occurrence of an element To use inline styles you use the style attribute in the relevant tag The style attribute can contain any /SS %ro%erty The e$am%le shows how to change the color and the left margin of a %aragra%h: (% styleA8color:sienna=margin2left:-!%$8)This is a %aragra%h (/%)

Multiple Style Sheets

9f some %ro%erties have been set for the same selector in different style sheets' the values will be inherited from the more s%ecific style sheet Cor e$am%le' an e$ternal style sheet has these %ro%erties for the h, selector: h, : color:red= te$t2align:left= font2si3e:I%t ; &nd an internal style sheet has these %ro%erties for the h, selector: h, : te$t2align:right= font2si3e:-!%t ; 9f the %age with the internal style sheet also lin"s to the e$ternal style sheet the %ro%erties for h, will be: color:red= te$t2align:right= font2si3e:-!%t The color is inherited from the e$ternal style sheet and the te$t2alignment and the font2si3e is re%laced by the internal style sheet

CSS +ackground
The /SS bac"ground %ro%erties define the bac"ground effects of an element

(ll CSS +ackground )roperties

The number in the 8/SS8 column indicates in which /SS version the %ro%erty is defined 0/SS* or /SS-1 )roperty bac"ground ,escription & shorthand %ro%erty for setting all bac"ground %ro%erties in one declaration -alues background-color background-image background-repeat background-attachment background-position Sets whether a bac"ground image scroll is fi$ed or scrolls with the rest of fi$ed the %age Sets the bac"ground color of an color-rgb element color-hex color-name trans%arent Sets an image as the bac"ground url0URL1 none Sets the starting %osition of a to% left bac"ground image to% center to% right center left center center center right bottom left bottom center bottom right x% y% xpos ypos Sets if/how a bac"ground image re%eat will be re%eated re%eat2$ re%eat2y no2re%eat CSS *

bac"ground2attachment

bac"ground2color

bac"ground2image bac"ground2%osition

* *

bac"ground2re%eat

CSS ext
The /SS te$t %ro%erties define the a%%earance of te$t:

text example
This e$am%le includes some te$t formatting %ro%erties The heading uses the te$t2align' te$t2transform' and color %ro%erties The %aragra%h is indented and aligned' and the underline is removed from the 8Try it yourself8 lin"

ext Color
The color %ro%erty is used to set the color of the te$t The color can be set by:

name 2 s%ecify a color name' li"e 8red8 J7B 2 s%ecify an J7B value' li"e 8rgb0-??'!'!18 He$ 2 s%ecify a he$ value' li"e 8Fff!!!!8

The default color for a %age is defined in the body selector

Example
body :color:blue; h* :color:F!!ff!!; h- :color:rgb0-??'!'!1;

Cor +,/ com%liant /SS: 9f you define the color %ro%erty' you must also define the bac"ground2 color %ro%erty

ext (lignment
The te$t2align %ro%erty is used to set the hori3ontal alignment of a te$t Te$t can be centered' or aligned to the left or right' or 5ustified +hen te$t2align is set to 85ustify8' each line is stretched so that every line has e<ual width' and the left and right margins are straight 0li"e in maga3ines and news%a%ers1

Example
h* :te$t2align:center; % date :te$t2align:right; % main :te$t2align:5ustify;

ext ,ecoration
The te$t2decoration %ro%erty is used to set or remove decorations from te$t The te$t2decoration %ro%erty is mostly used to remove underlines from lin"s for design %ur%oses:

Example
a :te$t2decoration:none;

9t can also be used to decorate te$t:

Example
h* :te$t2decoration:overline; h- :te$t2decoration:line2through; h, :te$t2decoration:underline; h4 :te$t2decoration:blin";

9t is not recommended to underline te$t that is not a lin"' as this often confuse users

ext ransformation
The te$t2transform %ro%erty is used to s%ecify u%%ercase and lowercase letters in a te$t 9t can be used to turn everything into u%%ercase or lowercase letters' or ca%itali3e the first letter of each word

Example
% u%%ercase :te$t2transform:u%%ercase; % lowercase :te$t2transform:lowercase; % ca%itali3e :te$t2transform:ca%itali3e;

ext Indentation
The te$t2indentation %ro%erty is used to s%ecify the indentation of the first line of a te$t

Example
% :te$t2indent:?!%$;

(ll CSS ext )roperties

The number in the 8/SS8 column indicates in which /SS version the %ro%erty is defined 0/SS* or /SS-1 )roperty color direction line2height ,escription Sets the color of a te$t Sets the te$t direction Sets the distance between lines -alues color ltr rtl normal number length CSS * *

letter2s%acing te$t2align

te$t2decoration

te$t2indent te$t2shadow

te$t2transform

unicode2bidi

white2s%ace

word2s%acing

% 9ncrease or decrease the s%ace between characters normal length &ligns the te$t in an element left right center 5ustify &dds decoration to te$t none underline overline line2through blin" 9ndents the first line of te$t in an element length % none color length /ontrols the letters in an element none ca%itali3e u%%ercase lowercase normal embed bidi2override Sets how white s%ace inside an element is handled normal %re nowra% 9ncrease or decrease the s%ace between words normal length

* *

CSS .ont
/SS font %ro%erties define the font family' boldness' si3e' and the style of a te$t

,ifference +etween Serif and Sans"serif .onts

4n com%uter screens' sans2serif fonts are considered easier to read than serif fonts

CSS .ont .amilies

9n /SS' there is two ty%es of font family names:

generic family 2 a grou% of font families with a similar loo" 0li"e 8Serif8 or 8Monos%ace81 font family 2 a s%ecific font family 0li"e 8Times Bew Joman8 or 8&rial81 .ont family ,escription fonts have small lines at the ends on some Joman Serif characters

&eneric family Serif

Sans2serif

Monos%ace

Times Bew Georgia 8Sans8 means without 2 these fonts do not have Arial the lines at the ends of characters Verdana Courier New &ll monos%ace characters has the same width Luc ida Conso le

.ont .amily
The font family of a te$t is set with the font2family %ro%erty The font2family %ro%erty can hold several font names as a 8fallbac"8 system 9f the browser does not su%%ort the first font' it tries the ne$t font Start with the font you want' and end with a generic family' to let the browser %ic" a similar font in the generic family' if no other fonts are available %ote: 9f the name of a font family is more than one word' it must be in <uotation mar"s' li"e font2family: 8Times Bew Joman8 More than one font family is s%ecified in a comma2se%arated list:

Example
%:font2family:8Times Bew Joman8'7eorgia'Serif;

.ont Style
The font2style %ro%erty is mostly used to s%ecify italic te$t This %ro%erty has three values:

normal 2 The te$t is shown normally italic 2 The te$t is shown in italics obli<ue 2 The te$t is 8leaning8 0obli<ue is very similar to italic' but less su%%orted1

Example
% normal :font2style:normal; % italic :font2style:italic; % obli<ue :font2style:obli<ue;

.ont Si/e
The font2si3e %ro%erty sets the si3e of the te$t Being able to manage the te$t si3e is im%ortant in web design However' you should not use font si3e ad5ustments to ma"e %aragra%hs loo" li"e headings' or headings loo" li"e %aragra%hs &lways use the %ro%er HTML tags' li"e (h*) 2 (h@) for headings and (%) for %aragra%hs The font2si3e value can be an absolute' or relative si3e &bsolute si3e:

Sets the te$t to a s%ecified si3e .oes not allow a user to change the te$t si3e in all browsers 0bad for accessibility reasons1 &bsolute si3e is useful when the %hysical si3e of the out%ut is "nown

Jelative si3e:

Sets the si3e relative to surrounding elements &llows a user to change the te$t si3e in browsers

9f you do not s%ecify a font si3e' the default si3e for normal te$t' li"e %aragra%hs' is *@%$ 0*@%$A*em1

Setting ext Si/e 0sing )ixels

Setting the te$t si3e with %i$els' gives you full control over the te$t si3e:

Example
h* :font2si3e:4!%$; h- :font2si3e:,!%$; % :font2si3e:*4%$;

The e$am%le above allows Cirefo$' /hrome' and Safari to resi3e the te$t' but not Internet Explorer The te$t can be resi3ed in all browsers using the 3oom tool 0however' this resi3es the entire %age' not 5ust the te$t1

Setting ext Si/e 0sing Em

To avoid the resi3ing %roblem with 9nternet #$%lorer' many develo%ers use em instead of %i$els The em si3e unit is recommended by the +,/ The si3e can be calculated from %i$els to em using this formula: pixels/*@Aem

Example

h* :font2si3e:- ?em; /G 4!%$/*@A- ?em G/ h- :font2si3e:* IK?em; /G ,!%$/*@A* IK?em G/ % :font2si3e:! IK?em; /G *4%$/*@A! IK?em G/

9n the e$am%le above' the te$t si3e in em is the same as the %revious e$am%le in %i$els However' with the em si3e' it is %ossible to ad5ust the te$t si3e in all browsers Hnfortunately' there is still a %roblem with 9# +hen resi3ing the te$t' it becomes larger than it should when made larger' and smaller than it should when made smaller

0sing a Combination of )ercent and Em

The solution that wor"s in all browsers' is to set a default font2si3e in %ercent for the body element:

Example
body :font2si3e:*!!L; h* :font2si3e:- ?em; h- :font2si3e:* IK?em; % :font2si3e:! IK?em;

4ur code now wor"s great6 9t shows the same te$t si3e in all browsers' and allows all browsers to 3oom or resi3e the te$t6

(ll CSS .ont )roperties

The number in the 8/SS8 column indicates in which /SS version the %ro%erty is defined 0/SS* or /SS-1

)roperty font

,escription & shorthand %ro%erty for setting all of the %ro%erties for a font in one declaration

font2family font2si3e

font2si3e2ad5ust font2stretch

font2style

font2variant font2weight

-alues font-style font-variant font-weight font-size/line-height font-family ca%tion icon menu message2bo$ small2ca%tion status2bar & %rioriti3ed list of font family names and/or family-name generic family names for an element generic-family Sets the si3e of a font $$2small $2small small medium large $2large $$2large smaller larger length % S%ecifies an as%ect value for an element that none will %reserve the $2height of the first2choice font number /ondenses or e$%ands the current font2family normal wider narrower ultra2condensed e$tra2condensed condensed semi2condensed semi2e$%anded e$%anded e$tra2e$%anded ultra2e$%anded Sets the style of the font normal italic obli<ue .is%lays te$t in a small2ca%s font or a normal normal font small2ca%s Sets the weight of a font normal bold

CSS *

* *

* *

bolder lighter *!! -!! ,!! 4!! ?!! @!! K!! I!! M!!

CSS +ox Model

+ox Model in CSS
&ll HTML elements can be considered as bo$es 9n /SS' the term 8bo$ model8 is used when tal"ing about design and layout 9n order to set the width and height of an element correctly in all browsers' you need to "now how the bo$ model wor"s The bo$ model illustrates how the /SS %ro%erties: margin' border' and %adding' affects the width and height of an element

he +ox Model
The image below illustrates the bo$ model:

#$%lanation of the different %arts:

Margin 2 /lears an area around the border The margin does not have a bac"ground color' and it is com%letely trans%arent +order 2 & border that lies around the %adding and content The border is affected by the bac"ground color of the bo$ )adding 2 /lears an area around the content The %adding is affected by the bac"ground color of the bo$ Content 2 The content of the bo$' where te$t and images a%%ear

Width and #eight of an Element

Important! +hen you s%ecify the width and height %ro%erties of an element with /SS' you are 5ust setting the width and height of the content area To "now the full si3e of the element' you must also add the %adding' border and margin The total width of the element in the e$am%le below is ,!!%$: width:-?!%$= %adding:*!%$= border:?%$ solid gray= margin:*!%$= LetNs do the math: -?!%$ 0width1 O -!%$ 0left and right %adding1 O *!%$ 0left and right border1

O -!%$ 0left and right margin1 A ,!!%$ 9magine that you only had -?!%$ of s%ace LetNs ma"e an element with a total width of -?!%$:

Example
width:--!%$= %adding:*!%$= border:?%$ solid gray= margin:!%$=

The total width of an element should always be calculated li"e this: Total element width A width O left %adding O right %adding O left border O right border O left margin O right margin The total height of an element should always be calculated li"e this: Total element height A height O to% %adding O bottom %adding O to% border O bottom border O to% margin O bottom margin

+rowsers Compatibility Issue

9f you tested the %revious e$am%le in 9nternet #$%lorer' you saw that the total width was not e$actly -?!%$ 9# includes %adding and border in the width' when the width %ro%erty is set' unless a ,'C 1)E is declared To fi$ this %roblem' 5ust add a .4/T>P# to the code:

Example

(6.4/T>P# html PHBL9/ 82//+,///.T. XHTML * ! Transitional//#B8 8htt%://www w, org/TJ/$html*/.T./$html*2transitional dtd8) (html) (head) (style ty%eA8te$t/css8) div e$ : width:--!%$= %adding:*!%$= border:?%$ solid gray= margin:!%$= ; (/style) (/head)

CSS +order
The /SS border %ro%erties define the borders around an element

CSS +order )roperties

The /SS border %ro%erties allow you to s%ecify the style and color of an elementNs border 9n HTML we use tables to create borders around a te$t' but with the /SS border %ro%erties we can create borders with nice effects' and it can be a%%lied to any element +rowser support! 9#: 9nternet #$%lorer' C: Cirefo$' B: Betsca%e W2C! The number in the 8+,/8 column indicates in which /SS recommendation the %ro%erty is defined 0/SS* or /SS-1 )roperty border ,escription & shorthand %ro%erty for setting all of the %ro%erties for the four borders in one declaration & shorthand %ro%erty for -alues border-width border-style border-color border-bottom-width IE . % W2C 4 * 4 *

border2bottom

border2bottom2color border2bottom2style border2bottom2width

setting all of the %ro%erties for the bottom border in one declaration Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border

border-style border-color border-color border-style thin medium thic" length color 4 4 4 * * * @ @ 4 *

border2color

border2left

border2left2color border2left2style border2left2width

Sets the color of the four borders' can have from one to four colors & shorthand %ro%erty for setting all of the %ro%erties for the left border in one declaration Sets the color of the left border Sets the style of the left border Sets the width of the left border

border-left-width border-style border-color border-color border-style thin medium thic" length border-right-width border-style border-color border-color border-style

4 4 4

* * *

@ @ 4

border2right

border2right2color border2right2style border2right2width

& shorthand %ro%erty for setting all of the %ro%erties for the right border in one declaration Sets the color of the right border Sets the style of the right border Sets the width of the right border

4 4 4

* * *

@ @ 4

border2style

thin medium thic" length Sets the style of the four none borders' can have from one hidden to four styles dotted dashed solid double

border2to%

border2to%2color border2to%2style border2to%2width

& shorthand %ro%erty for setting all of the %ro%erties for the to% border in one declaration Sets the color of the to% border Sets the style of the to% border Sets the width of the to% border

groove ridge inset outset border-top-width border-style border-color border-color border-style

4 4 4

* * *

@ @ 4

border2width

thin medium thic" length & shorthand %ro%erty for thin setting the width of the four medium borders in one declaration' thic" can have from one to four length values

CSS 'utlines
The /SS outline %ro%erties is used to draw a line around an element' outside the border edge

CSS 'utline )roperties

&n outline is a line that is drawn around elements' outside the border edge' to ma"e the element 8stand out8 The /SS outline %ro%erties sets the outlines around elements >ou can s%ecify the style' color' and width of the outline %ote! 4utlines do not ta"e u% s%ace' and they do not have to be rectangular The number in the 8/SS8 column indicates in which /SS version the %ro%erty is defined 0/SS* or /SS-1 )roperty outline ,escription & shorthand %ro%erty for setting all the outline %ro%erties -alues outline-color outline-style outline-width CSS -

outline2color outline2style

Sets the color of the outline around an element Sets the style of the outline around an element

outline2width

Sets the width of the outline around an element

color invert none dotted dashed solid double groove ridge inset outset thin medium thic" length

CSS Margin
The /SS margin %ro%erties define the s%ace around elements

CSS Margin )roperties

The /SS margin %ro%erties define the s%ace around elements 9t is %ossible to use negative values to overla% content The to%' right' bottom' and left margin can be changed inde%endently using se%arate %ro%erties & shorthand margin %ro%erty can also be used to change all of the margins at once %ote! Betsca%e and 9# give the body tag a default margin of I%$ 4%era does not6 9nstead' 4%era a%%lies a default %adding of I%$' so if one wants to ad5ust the margin for an entire %age and have it dis%lay correctly in 4%era' the body %adding must be set as well6 +rowser support! 9#: 9nternet #$%lorer' C: Cirefo$' B: Betsca%e W2C! The number in the 8+,/8 column indicates in which /SS recommendation the %ro%erty is defined 0/SS* or /SS-1 )roperty margin ,escription -alues & shorthand %ro%erty for margin-top setting the margin %ro%erties margin-right in one declaration margin-bottom margin-left Sets the bottom margin of an auto IE . % W2C 4 * 4 *

margin2bottom

element margin2left Sets the left margin of an element Sets the right margin of an element Sets the to% margin of an element

margin2right

margin2to%

length % auto length % auto length % auto length %

CSS )adding
The /SS %adding %ro%erties define the s%ace between the element border and the element content

CSS )adding )roperties

The /SS %adding %ro%erties define the s%ace between the element border and the element content Begative values are not allowed The to%' right' bottom' and left %adding can be changed inde%endently using se%arate %ro%erties & shorthand %adding %ro%erty is also created to control multi%le sides at once +rowser support! 9#: 9nternet #$%lorer' C: Cirefo$' B: Betsca%e W2C! The number in the 8+,/8 column indicates in which /SS recommendation the %ro%erty is defined 0/SS* or /SS-1 )roperty %adding ,escription & shorthand %ro%erty for setting all of the %adding %ro%erties in one declaration -alues padding-top padding-right padding-bottom padding-left Sets the bottom %adding of length an element % Sets the left %adding of an length element % Sets the right %adding of an length element % Sets the to% %adding of an length element % IE . % W2C 4 * 4 *

%adding2bottom %adding2left %adding2right %adding2to%

4 4 4 4

* * * *

4 4 4 4

* * * *

CSS $ist
The /SS list %ro%erties allow you to %lace the list2item mar"er' change between different list2 item mar"ers' or set an image as the list2item mar"er

CSS $ist )roperties

The /SS list %ro%erties allow you to %lace the list2item mar"er' change between different list2 item mar"ers' or set an image as the list2item mar"er +rowser support! 9#: 9nternet #$%lorer' C: Cirefo$' B: Betsca%e W2C! The number in the 8+,/8 column indicates in which /SS recommendation the %ro%erty is defined 0/SS* or /SS-1 )roperty list2style ,escription -alues & shorthand %ro%erty for list-style-type setting all of the %ro%erties list-style-position for a list in one declaration list-style-image Sets an image as the list2item none mar"er url Sets where the list2item inside mar"er is %laced in the list outside Sets the ty%e of the list2item none mar"er disc circle s<uare decimal decimal2leading23ero lower2roman u%%er2roman lower2al%ha u%%er2al%ha lower2gree" lower2latin u%%er2latin hebrew armenian georgian IE . % W2C 4 * @ *

list2style2image list2style2%osition list2style2ty%e

4 4 4

* * *

@ @ 4

* * *

mar"er2offset

c5"2ideogra%hic hiragana "ata"ana hiragana2iroha "ata"ana2iroha auto length

CSS able
The /SS table %ro%erties allow you to set the layout of a table

CSS able )roperties

The /SS table %ro%erties allow you to set the layout of a table +rowser support! 9#: 9nternet #$%lorer' M: Mac 9# only' C: Cirefo$' B: Betsca%e W2C! The number in the 8+,/8 column indicates in which /SS recommendation the %ro%erty is defined 0/SS* or /SS-1 )roperty border2colla%se ,escription Sets whether the table borders are colla%sed into a single border or detached as in standard HTML Sets the distance that se%arates cell borders 0only for the 8se%arated borders8 model1 Sets the %osition of the table ca%tion -alues colla%se se%arate IE . % W2C ? * K -

border2s%acing

length length

?M *

ca%tion2side

em%ty2cells

table2layout

to% bottom left right Sets whether or not to show show em%ty cells in a table 0only hide for the 8se%arated borders8 model1 Sets the algorithm used to auto dis%lay the table cells' rows' fi$ed and columns

?M *

?M *

CSS ,imension
The /SS dimension %ro%erties allow you to control the height and width of an element 9t also allows you to increase the s%ace between two lines

CSS ,imension )roperties

The /SS dimension %ro%erties allow you to control the height and width of an element 9t also allows you to increase the s%ace between two lines +rowser support! 9#: 9nternet #$%lorer' C: Cirefo$' B: Betsca%e W2C! The number in the 8+,/8 column indicates in which /SS recommendation the %ro%erty is defined 0/SS* or /SS-1 )roperty height ,escription -alues Sets the height of an element auto length % Sets the distance between normal lines number length % Sets the ma$imum height of none an element length % Sets the ma$imum width of none an element length % Sets the minimum height of length an element % Sets the minimum width of length an element % Sets the width of an element auto % length IE . % W2C 4 * @ *

line2height

ma$2height

ma$2width

min2height min2width width

2 2 4

* * *

@ @ 4

CSS Classification
The /SS classification %ro%erties allow you to s%ecify how and where to dis%lay an element

CSS Classification )roperties

The /SS classification %ro%erties allow you to control how to dis%lay an element' set where an image will a%%ear in another element' %osition an element relative to its normal %osition' %osition an element using an absolute value' and how to control the visibility of an element +rowser support! 9#: 9nternet #$%lorer' C: Cirefo$' B: Betsca%e W2C! The number in the 8+,/8 column indicates in which /SS recommendation the %ro%erty is defined 0/SS* or /SS-1 )roperty clear ,escription Sets the sides of an element where other floating elements are not allowed -alues left right both none S%ecifies the ty%e of cursor url to be dis%layed auto crosshair default %ointer move e2resi3e ne2resi3e nw2resi3e n2resi3e se2resi3e sw2resi3e s2resi3e w2resi3e te$t wait hel% Sets how/if an element is none dis%layed inline bloc" list2item run2in com%act mar"er table inline2table table2row2grou% table2header2grou% table2footer2grou% IE . % W2C 4 * 4 *

cursor

dis%lay

float

%osition

visibility

table2row table2column2grou% table2column table2cell table2ca%tion Sets where an image or a left te$t will a%%ear in another right element none Places an element in a static' static relative' absolute or fi$ed relative %osition absolute fi$ed Sets if an element should be visible visible or invisible hidden colla%se

CSS )ositioning
The /SS %ositioning %ro%erties allows you to %osition an element

CSS )ositioning )roperties

The /SS %ositioning %ro%erties allow you to s%ecify the left' right' to%' and bottom %osition of an element 9t also allows you to set the sha%e of an element' %lace an element behind another' and to s%ecify what should ha%%en when an elementNs content is too big to fit in a s%ecified area +rowser support! 9#: 9nternet #$%lorer' C: Cirefo$' B: Betsca%e W2C! The number in the 8+,/8 column indicates in which /SS recommendation the %ro%erty is defined 0/SS* or /SS-1 )roperty bottom ,escription -alues Sets how far the bottom edge auto of an element is above/below% the bottom edge of the length %arent element Sets the sha%e of an element shape The element is cli%%ed into auto this sha%e' and dis%layed Sets how far the left edge of auto an element is to the right/left % of the left edge of the %arent length IE . % W2C ? * @ -

cli%

left

overflow

element Sets what ha%%ens if the content of an element overflow its area

%osition

right

to%

vertical2align

32inde$

visible hidden scroll auto Places an element in a static' static relative' absolute or fi$ed relative %osition absolute fi$ed Sets how far the right edge auto of an element is to the % left/right of the right edge of length the %arent element Sets how far the to% edge of auto an element is above/below % the to% edge of the %arent length element Sets the vertical alignment ofbaseline an element sub su%er to% te$t2to% middle bottom te$t2bottom length % Sets the stac" order of an auto element number

CSS )seudo"classes
/SS %seudo2classes are used to add s%ecial effects to some selectors

Syntax
The synta$ of %seudo2classes: selector:%seudo2class :%ro%erty:value; /SS classes can also be used with %seudo2classes: selector class:%seudo2class :%ro%erty:value;

(nchor )seudo"classes
Lin"s can be dis%layed in different ways in a /SS2su%%orting browser: a:lin" :color:FCC!!!!; /G unvisited lin" G/ a:visited :color:F!!CC!!; /G visited lin" G/ a:hover :color:FCC!!CC; /G mouse over lin" G/ a:active :color:F!!!!CC; /G selected lin" G/ %ote! a:hover MHST come after a:lin" and a:visited in the /SS definition in order to be effective66 %ote! a:active MHST come after a:hover in the /SS definition in order to be effective66 %ote! Pseudo2class names are not case2sensitive

)seudo"classes and CSS Classes

Pseudo2classes can be combined with /SS classes: a red:visited :color:FCC!!!!; (a classA8red8 hrefA8cssQsynta$ as%8)/SS Synta$(/a) 9f the lin" in the e$am%le above has been visited' it will be dis%layed in red

CSS " he !first"child )seudo"class

The :first2child %seudo2class matches a s%ecified element that is the first child of another element %ote! Cor :first2child to wor" in 9# a (6.4/T>P#) must be declared

Match the first 3p4 element

9n the following e$am%le' the selector matches any (%) element that is the first child of any element:

Example

(html) (head) (style ty%eA8te$t/css8) %:first2child : color:blue ; (/style) (/head) (body) (%)9 am a strong man (/%) (%)9 am a strong man (/%) (/body) (/html)

Match the first 3i4 element in all 3p4 elements

9n the following e$am%le' the selector matches the first (i) element in all (%) elements:

Example
(html) (head) (style ty%eA8te$t/css8) % ) i:first2child : font2weight:bold ; (/style) (/head) (body) (%)9 am a (i)strong(/i) man 9 am a (i)strong(/i) man (/%) (%)9 am a (i)strong(/i) man 9 am a (i)strong(/i) man (/%) (/body) (/html)

Match all 3i4 elements in all first child 3p4 elements

9n the following e$am%le' the selector matches all (i) elements in (%) elements that are the first child of another element:

Example
(html) (head) (style ty%eA8te$t/css8) %:first2child i : color:blue ; (/style) (/head) (body) (%)9 am a (i)strong(/i) man 9 am a (i)strong(/i) man (/%) (%)9 am a (i)strong(/i) man 9 am a (i)strong(/i) man (/%) (/body) (/html)

CSS " he !lang )seudo"class

The :lang %seudo2class allows you to define s%ecial rules for different languages 9n the e$am%le below' the :lang class defines the ty%e of <uotation mar"s for < elements with a lang attribute with a value of 8no8: (html) (head) (style ty%eA8te$t/css8) <:lang0no1 : <uotes:8R8 8R8 ; (/style) (/head) (body)

(%)Some te$t (< langA8no8)& <uote in a %aragra%h(/<) Some te$t (/%) (/body) (/html)

)seudo"classes
+rowser support! 9#: 9nternet #$%lorer' C: Cirefo$' B: Betsca%e W2C! The number in the 8+,/8 column indicates in which /SS recommendation the %ro%erty is defined 0/SS* or /SS-1 )seudo"class :active :focus :hover :lin" :visited :first2child :lang )urpose &dds s%ecial style to an activated element &dds s%ecial style to an element while the element has focus &dds s%ecial style to an element when you mouse over it &dds s%ecial style to an unvisited lin" &dds s%ecial style to a visited lin" &dds s%ecial style to an element that is the first child of some other element &llows the author to s%ecify a language to use in a s%ecified element IE . % W2C 4 * I * 2 *?I 4 , , K 2 * * * * * K 4 4 K I * * * -

CSS Image &allery

/SS can be used to create an image gallery

Image &allery
The following image gallery is created with /SS: 9mage gallery The source code loo"s li"e this: (html) (head) (style ty%eA8te$t/css8) div img : margin:-%$=

border:*%$ solid F!!!!ff= height:auto= width:auto= float:left= te$t2align:center= ; div img img : dis%lay:inline= margin:,%$= border:*%$ solid Fffffff= ; div img a:hover img : border:*%$ solid F!!!!ff= ; div desc : te$t2align:center= font2weight:normal= width:*-!%$= margin:-%$= ; (/style) (/head) (body) (div classA8img8) (a targetA8Qblan"8 hrefA8"lematisQbig htm8) (img srcA8"lematisQsmall 5%g8 altA8Slematis8 widthA8**!8 heightA8M!8 /) (/a) (div classA8desc8)&dd a descri%tion of the image here(/div) (/div) (div classA8img8) (a targetA8Qblan"8 hrefA8"lematis-Qbig htm8) (img srcA8"lematis-Qsmall 5%g8 altA8Slematis8 widthA8**!8 heightA8M!8 /) (/a) (div classA8desc8)&dd a descri%tion of the image here(/div) (/div) (div classA8img8) (a targetA8Qblan"8 hrefA8"lematis,Qbig htm8) (img srcA8"lematis,Qsmall 5%g8 altA8Slematis8 widthA8**!8 heightA8M!8 /) (/a) (div classA8desc8)&dd a descri%tion of the image here(/div) (/div) (div classA8img8)

(a targetA8Qblan"8 hrefA8"lematis4Qbig htm8) (img srcA8"lematis4Qsmall 5%g8 altA8Slematis8 widthA8**!8 heightA8M!8 /) (/a) (div classA8desc8)&dd a descri%tion of the image here(/div) (/div) (/body) (/html)

CSS Image 'pacity 5 ransparency

/reating trans%arent images with /SS is easy

Example 6 " Creating a ransparent Image

Cirst we will show you how to create a trans%arent image with /SS Jegular image:

The same image with trans%arency:

Loo" at the following source code: (img srcA8"lematis 5%g8 widthA8*?!8 heightA8**,8 altA8"lematis8 styleA8o%acity:! 4=filter:al%ha0o%acityA4!18 /) Cirefo$ uses the %ro%erty opacity!x for trans%arency' while 9# uses filter!alpha7opacity8x9 ip! The /SS, synta$ for trans%arency is opacity!x

9n Cirefo$ 0o%acity:$1 $ can be a value from ! ! 2 * ! & lower value ma"es the element more trans%arent 9n 9# 0filter:al%ha0o%acityA$11 $ can be a value from ! 2 *!! & lower value ma"es the element more trans%arent

Example : " Image ransparency " Mouseover Effect

Mouse over the images:

The source code loo"s li"e this: (img srcA8"lematis 5%g8 styleA8o%acity:! 4=filter:al%ha0o%acityA4!18 onmouseoverA8this style o%acityA*=this filters al%ha o%acityA*!!8 onmouseoutA8this style o%acityA! 4=this filters al%ha o%acityA4!8 /) (img srcA8"lematis- 5%g8 styleA8o%acity:! 4=filter:al%ha0o%acityA4!18 onmouseoverA8this style o%acityA*=this filters al%ha o%acityA*!!8 onmouseoutA8this style o%acityA! 4=this filters al%ha o%acityA4!8 /) +e see that the first line of the source code is similar to the source code in #$am%le * 9n addition' we have added an onmouseover attribute and an onmouseout attribute The onmouseover attribute defines what will ha%%en when the mouse %ointer moves over the image 9n this case we want the image to B4T be trans%arent when we move the mouse %ointer over it The synta$ for this in Cirefo$ is: this*style*opacity86 and the synta$ in 9# is: this*filters*alpha*opacity86;; +hen the mouse %ointer moves away from the image' we want the image to be trans%arent again This is done in the onmouseout attribute

Example 2 " ext in ransparent +ox

This is some te$t that is %laced in the trans%arent bo$ This is some te$t that is %laced in the trans%arent bo$ This is some te$t that is %laced in the trans%arent bo$ This is some te$t that is %laced in the trans%arent bo$ This is some te$t that is %laced in the trans%arent bo$ The source code loo"s li"e this:

(html) (head) (style ty%eA8te$t/css8) div bac"ground : width:?!!%$= height:-?!%$= bac"ground:url0"lematis 5%g1 re%eat= border:-%$ solid blac"= ; div transbo$ : width:4!!%$= height:*I!%$= margin:,!%$ ?!%$= bac"ground2color:Fffffff= border:*%$ solid blac"= /G for 9# G/ filter:al%ha0o%acityA@!1= /G /SS, standard G/ o%acity:! @= ; div transbo$ % : margin:,!%$ 4!%$= font2weight:bold= color:F!!!!!!= ; (/style) (/head) (body) (div classA8bac"ground8) (div classA8transbo$8) (%)This is some te$t that is %laced in the trans%arent bo$ This is some te$t that is %laced in the trans%arent bo$ This is some te$t that is %laced in the trans%arent bo$ This is some te$t that is %laced in the trans%arent bo$ This is some te$t that is %laced in the trans%arent bo$ (/%) (/div) (/div) (/body) (/html)

Cirst' we create a div element 0classA8bac"ground81 with a fi$ed height and width' a bac"ground image' and a border Then we create a smaller div 0classA8transbo$81 inside the first div element This div also have a fi$ed width' a bac"ground image' and a border 9n addition we ma"e this div trans%arent 9nside the trans%arent div' we add some te$t inside a % element

CSS Media ypes

Media Ty%es allow you to s%ecify how documents will be %resented in different media The document can be dis%layed differently on the screen' on the %a%er' with an aural browser' etc

Media ypes
Some /SS %ro%erties are only designed for a certain media Cor e$am%le the 8voice2family8 %ro%erty is designed for aural user agents Some other %ro%erties can be used for different media ty%es Cor e$am%le' the 8font2si3e8 %ro%erty can be used for both screen and %rint media' but %erha%s with different values & document usually needs a larger font2si3e on a screen than on %a%er' and sans2serif fonts are easier to read on the screen' while serif fonts are easier to read on %a%er

he <media =ule
The Tmedia rule allows different style rules for different media in the same style sheet The style in the e$am%le below tells the browser to dis%lay a *4 %i$els Uerdana font on the screen But if the %age is %rinted' it will be in a *! %i$els Times font Botice that the font2weight is set to bold' both on screen and on %a%er: (html) (head) (style) Tmedia screen : % test :font2family:verdana'sans2serif=font2si3e:*4%$; ; Tmedia %rint : % test :font2family:times'serif=font2si3e:*!%$; ; Tmedia screen'%rint : % test :font2weight:bold; ;

(/style) (/head) (body) (/body) (/html) See it yourself > 9f you are using Mo3illa/Cirefo$ or 9# ?O and %rint this %age' you will see that the %aragra%h under 8Media Ty%es8 will be dis%layed in another font' and have a smaller font si3e than the rest of the te$t

,ifferent Media ypes

%ote! The media ty%e names are not case2sensitive Media ype all aural braille embossed handheld %rint %ro5ection screen tty tv ,escription Hsed for all media ty%e devices Hsed for s%eech and sound synthesi3ers Hsed for braille tactile feedbac" devices Hsed for %aged braille %rinters Hsed for small or handheld devices Hsed for %rinters Hsed for %ro5ected %resentations' li"e slides Hsed for com%uter screens Hsed for media using a fi$ed2%itch character grid' li"e telety%es and terminals Hsed for television2ty%e devices

CSS ,on?t
Here are some technologies you should try to avoid when using /SS

Internet Explorer +ehaviors

What is it? 9nternet #$%lorer ? introduced behaviors Behaviors are a way to add behaviors to HTML elements with the use of /SS styles Why avoid it? The behavior attribute is only su%%orted by 9nternet #$%lorer What to use instead? Hse VavaScri%t and the HTML .4M instead

Example 6 " Mouseover #ighlight

The following HTML file has a (style) element that defines a behavior for the (h*) element: (html) (head) (style ty%eA8te$t/css8) h* : behavior:url0behave htc1 ; (/style) (/head) (body) (h*)Mouse over me666(/h*) (/body) (/html) The XML document 8behave htc8 is shown below:

Example 7IE @A 'nly9

The behavior file contains a VavaScri%t and event handlers for the elements (attach forA8element8 eventA8onmouseover8 handlerA8higQlite8 /) (attach forA8element8 eventA8onmouseout8 handlerA8lowQlite8 /) (scri%t ty%eA8te$t/5avascri%t8) function higQlite01 : element style colorANredN= ; function lowQlite01 : element style colorANblueN= ; (/scri%t)

Example : " ypewriter Simulation

The following HTML file has a (style) element that defines a behavior for elements with an id of 8ty%ing8: (html)

(head) (style ty%eA8te$t/css8) Fty%ing : behavior:url0behaveQty%ing htc1= font2family:8courier new8= ; (/style) (/head) (body) (s%an idA8ty%ing8 s%eedA8*!!8)9#? introduced .HTML behaviors Behaviors are a way to add .HTML functionality to HTML elements with the ease of /SS (br /)(br /)How do behaviors wor"W(br /) By using XML we can lin" behaviors to any element in a web %age and mani%ulate that element (/%) (/s%an) (/body) (/html) The XML document 8ty%ing htc8 is shown below:

Example 7IE @A 'nly9

(attach forA8window8 eventA8onload8 handlerA8beginTy%ing8 /) (method nameA8ty%e8 /) (scri%t ty%eA8te$t/5avascri%t8) var i'te$t*'te$t-'te$tLength't= function beginTy%ing01 : iA!= te$t*Aelement innerTe$t= te$tLengthAte$t* length= element innerTe$tA88= te$t-A88= tAwindow set9nterval0element idO8 ty%e018's%eed1= ; function ty%e01 : te$t-Ate$t-Ote$t* substring0i'iO*1= element innerTe$tAte$t-= iAiO*= if 0iAAte$tLength1 : clear9nterval0t1= ; ; (/scri%t)

1ou #ave $earned CSSB %ow What?

CSS Summary
This tutorial has taught you how to create style sheets to control the style and layout of multi%le web sites at once >ou have learned how to use /SS to add bac"grounds' format te$t' add and format borders' and s%ecify %adding and margins of elements >ou have also learned how to %osition an element' control the visibility and si3e of an element' set the sha%e of an element' %lace an element behind another' and to add s%ecial effects to some selectors' li"e lin"s

Cor more information on /SS' %lease ta"e a loo" at our /SS e$am%les and our /SS reference

%ow 1ou Cnow CSSB What?s %ext?

The ne$t ste% is to learn XHTML and VavaScri%t D# M$ XHTML reformulates HTML 4 !* in XML 9f you want to learn more about XHTML' %lease visit our XHTML tutorial EavaScript VavaScri%t can ma"e your web site more dynamic & static web site is nice when you 5ust want to show flat content' but a dynamic web site can react to events and allow user interaction VavaScri%t is the most %o%ular scri%ting language on the internet and it wor"s with all ma5or browsers 9f you want to learn more about VavaScri%t' %lease visit our VavaScri%t tutorial