CSS Text

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified.

Text Color
The color property is used to set the color of the text. With CSS, a color is most often specified by: 1. a !" #alue - li$e %&ff''''% (. an )*+ #alue - li$e %rgb,(--,','.% /. a color name - li$e %red%
The default color for a page is defined in the body selector. Example body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(2 !0!0";} 0ote : 1or W/C compliant CSS: 2f you define the color property, you must also define the bac$ground-color property.

Text #l$g%me%t
The text-align property is used to set the hori3ontal alignment of a text. Text can be centered, or aligned to the left or right, or 4ustified. When text-align is set to %4ustify%, each line is stretched so that e#ery line has e5ual width, and the left and right margins are straight ,li$e in maga3ines and newspapers..
Example h1 {text&al$g%:ce%ter;} p'date {text&al$g%:r$ght;} p'ma$% {text&al$g%:(u)t$fy;}

Text *ecorat$o%
The text-decoration property is used to set or remo#e decorations from text. The text-decoration property is mostly used to remo#e underlines from lin$s for design purposes:
Example a {text&decorat$o%:%o%e;} 2t can also be used to decorate text: Example h1 {text&decorat$o%:o+erl$%e;} h2 {text&decorat$o%:l$%e&through;} h, {text&decorat$o%:u%derl$%e;} h- {text&decorat$o%:bl$%.;}

0ote: 2t is not recommended to underline text that is not a lin$, as this often confuses users.

Text Tra%)format$o%
The text-transform property is used to specify uppercase and lowercase letters in a text. 2t can be used to turn e#erything into uppercase or lowercase letters, or capitali3e the first letter of each word.

Example
p'upperca)e {text&tra%)form:upperca)e;} p'lo/erca)e {text&tra%)form:lo/erca)e;} p'cap$tal$0e {text&tra%)form:cap$tal$0e;}

Text 1%de%tat$o%
The text-indentation property is used to specify the indentation of the first line of a text. Example p {text&$%de%t: 0px;}

6ll CSS Text 7roperties

2roperty color d$rect$o% letter&)pac$%g l$%e&he$ght text&al$g% text&decorat$o% text&$%de%t text&)hado/ text&tra%)form +ert$cal&al$g% /h$te&)pace /ord&)pac$%g *e)cr$pt$o% Sets the color of text Specifies the text direction8writing direction 2ncreases or decreases the space between characters in a text Sets the line height Specifies the hori3ontal alignment of text Specifies the decoration added to text Specifies the indentation of the first line in a text-bloc$ Specifies the shadow effect added to text Controls the capitali3ation of text Sets the #ertical alignment of an element Specifies how white-space inside an element is handled 2ncreases or decreases the space between words in a text

CSS 3o%t
CSS font properties define the font family, boldness, si3e, and the style of a text.
2roperty fo%t fo%t&fam$ly fo%t&)$0e fo%t&)tyle fo%t&/e$ght *e)cr$pt$o% Sets all the font properties in one declaration Specifies the font family for text Specifies the font si3e of text Specifies the font style for text Specifies the weight of a font

*$ffere%ce 4et/ee% Ser$f a%d Sa%)&)er$f 3o%t)

9n computer screens, sans-serif fonts are considered easier to read than serif fonts.

CSS 3o%t 3am$l$e)

2n CSS, there are two types of font family names:

ge%er$c fam$ly - a group of font families with a similar loo$ ,li$e %Serif% or %:onospace%. fo%t fam$ly - a specific font family ,li$e %Times 0ew )oman% or %6rial%.
3o%t fam$ly *e)cr$pt$o% Serif fonts ha#e small lines at the ends on some characters %Sans% means without - these fonts do not ha#e the lines at the ends of characters 6ll monospace characters ha#e the same width

5e%er$c fam$ly Serif Sans-serif :onospace

Times 0ew )oman *eorgia 6rial,;erdana Courier 0ew <ucida Console

3o%t 3am$ly
The font family of a text is set with the font-family property. The font-family property should hold se#eral font names as a %fallbac$% system. 2f the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pic$ a similar font in the generic family, if no other fonts are a#ailable.

6ote: 2f the name of a font family is more than one word, it must be in 5uotation mar$s, li$e font-family: %Times 0ew )oman%. :ore than one font family is specified in a comma-separated list: Example p=font-family:%Times 0ew )oman%, Times, serif>?

3o%t Style
The font-style property is mostly used to specify italic text. This property has three #alues: normal - The text is shown normally italic - The text is shown in italics obli5ue - The text is %leaning% ,obli5ue is #ery similar to italic, but less supported.
Example p'%ormal {fo%t&)tyle:%ormal;} p'$tal$c {fo%t&)tyle:$tal$c;} p'obl$7ue {fo%t&)tyle:obl$7ue;}

3o%t S$0e
The font-si3e property sets the si3e of the text. +eing able to manage the text si3e is important in web design. owe#er, you should not use font si3e ad4ustments to ma$e paragraphs loo$ li$e headings, or headings loo$ li$e paragraphs. 6lways use the proper T:< tags, li$e @h1A - @hBA for headings and @pA for paragraphs. The font-si3e #alue can be an absolute or relati#e si3e. #b)olute )$0e: 1. Sets the text to a specified si3e (. Coes not allow a user to change the text si3e in all browsers ,bad for accessibility reasons. /. 6bsolute si3e is useful when the physical si3e of the output is $nown 8elat$+e )$0e: 1. Sets the si3e relati#e to surrounding elements (. 6llows a user to change the text si3e in browsers 6ote: The default si3e for normal text, li$e paragraphs, is 1Bpx ,1BpxD1em.. Set 3o%t S$0e 9$th 2$xel)
Setting the text si3e with pixels, gi#es you full control o#er the text si3e: Example h1 {fo%t&)$0e:-0px;}

h2 {fo%t&)$0e:,0px;} p {fo%t&)$0e:1-px;} The example abo#e allows 1irefox, Chrome, and Safari to resi3e the text, but %ot 1%ter%et Explorer. The text can be resi3ed in all browsers using the 3oom tool ,howe#er, this resi3es the entire page, not 4ust the text.. The default text si3e in browsers is 1emD1Bpx. Example h1 {fo%t&)$0e:2' em;} :; -0px:1<=2' em ;: h2 {fo%t&)$0e:1'>? em;} :; ,0px:1<=1'>? em ;: p {fo%t&)$0e:0'>? em;} :; 1-px:1<=0'>? em ;:

@)e a Comb$%at$o% of 2erce%t a%d Em

The solution that wor$s in all browsers, is to set a default font-si3e in percent for the body element:

Example
body {fo%t&)$0e:100A;} h1 {fo%t&)$0e:2' em;} h2 {fo%t&)$0e:1'>? em;} p {fo%t&)$0e:0'>? em;} 9ur code now wor$s greatE 2t shows the same text si3e in all browsers, and allows all browsers to 3oom or resi3e the textE

CSS B$%.)
<in$s can be styled in different ways. Styl$%g B$%.) <in$s can be styled with any CSS property ,e.g. color, font-family, bac$ground, etc... Special for lin$s are that they can be styled differently depending on what state they are in. The four lin$s states are:
a:l$%. - a normal, un#isited lin$ a:+$)$ted - a lin$ the user has #isited a:ho+er - a lin$ when the user mouses o#er it a:act$+e - a lin$ the moment it is clic$ed

Example a:l$%. {color:#330000;} :; u%+$)$ted l$%. ;: a:+$)$ted {color:#003300;} :; +$)$ted l$%. ;: a:ho+er {color:#330033;} :; mou)e o+er l$%. ;: a:act$+e {color:#000033;} :; )elected l$%. ;: When setting the style for se#eral lin$ states, there are some order rules:

a:ho#er :FST come after a:lin$ and a:#isited a:acti#e :FST come after a:ho#er

Commo% B$%. Style)

2n the example abo#e the lin$ changes color depending on what state it is in. <ets go through some of the other common ways to style lin$s:

Text *ecorat$o%
The text-decoration property is mostly used to remo#e underlines from lin$s: Example a:l$%. {text&decorat$o%:%o%e;} a:+$)$ted {text&decorat$o%:%o%e;} a:ho+er {text&decorat$o%:u%derl$%e;} a:act$+e {text&decorat$o%:u%derl$%e;}

4ac.grou%d Color
The bac$ground-color property specifies the bac$ground color for lin$s: Example a:l$%. {bac.grou%d&color:#4233CC;} a:+$)$ted {bac.grou%d&color:#3333> ;} a:ho+er {bac.grou%d&color:#33?0-*;} a:act$+e {bac.grou%d&color:#33?0-*;}

CSS B$)t)
2n T:<, there are two types of lists: unordered lists - the list items are mar$ed with bullets ordered lists - the list items are mar$ed with numbers or letters With CSS, lists can be styled further, and images can be used as the list item mar$er. The CSS list properties allow us to: Set different list item mar$ers for ordered lists Set different list item mar$ers for unordered lists Set an image as the list item mar$er #ll CSS B$)t 2ropert$e)
2roperty l$)t&)tyle l$)t&)tyle&$mage l$)t&)tyle&po)$t$o% *e)cr$pt$o% Sets all the properties for a list in one declaration Specifies an image as the list-item mar$er Specifies if the list-item mar$ers should appear inside or outside the content flow

l$)t&)tyle&type

Specifies the type of list-item mar$er

*$ffere%t B$)t 1tem Dar.er)

The type of list item mar$er is specified with the list-style-type property: Example ul'a {l$)t&)tyle&type: c$rcle;} ul'b {l$)t&)tyle&type: )7uare;} ol'c {l$)t&)tyle&type: upper&roma%;} ol'd {l$)t&)tyle&type: lo/er&alpha;} Some of the #alues are for unordered lists, and some for ordered lists.

#% 1mage a) The B$)t 1tem Dar.er

To specify an image as the list item mar$er, use the list-style-image property: Example ul { l$)t&)tyle&$mage: url(E)7purple'g$fE"; }

The example abo#e does not display e5ually in all browsers. 2! and 9pera will display the image-mar$er a little bit higher than 1irefox, Chrome, and Safari. 2f you want the image-mar$er to be placed e5ually in all browsers, a crossbrowser solution is explained below.

Cro))bro/)er Solut$o%
The following example displays the image-mar$er e5ually in all browsers: Example ul { l$)t&)tyle&type: %o%e; padd$%g: 0px; marg$%: 0px; } l$ { bac.grou%d&$mage: url()7purple'g$f"; bac.grou%d&repeat: %o&repeat; bac.grou%d&po)$t$o%: 0px px; padd$%g&left: 1-px; } Example expla$%ed: 1or ul: a. Set the list-style-type to none to remo#e the list item mar$er b. Set both padding and margin to 'px ,for cross-browser compatibility. 1or li: a. Set the F)< of the image, and show it only once ,no-repeat.

b. 7osition the image where you want it ,left 'px and down -px. c. 7osition the text in the list with padding-left

B$)t & Shortha%d property

2t is also possible to specify all the list properties in one, single property. This is called a shorthand property. The shorthand property used for lists, is the list-style property: Example ul { l$)t&)tyle: )7uare url(F)7purple'g$fF"; } When using the shorthand property, the order of the #alues are: list-style-type list-style-position ,for a description, see the CSS properties table below. list-style-image 2t does not matter if one of the #alues abo#e are missing, as long as the rest are in the specified order.

CSS Table)
The loo$ of an T:< table can be greatly impro#ed with CSS: Compa%y 6lfreds 1utter$iste +erglunds snabb$Gp !rnst andel 2sland Trading Co%tact :aria 6nders Cou%try *ermany :exico 6ustria FH

Christina +erglund Sweden )oland :endel elen +ennett

Centro comercial :octe3uma 1rancisco Chang

Table 4order)
To specify table borders in CSS, use the border property. The example below specifies a blac$ border for table, th, and td elements: Example table, th, td = border: 1px solid blac$> ? 0otice that the table in the example abo#e has double borders. This is because both the table, th, and td elements ha#e separate borders. To display a single border for the table, use the border-collapse property.

Collap)e 4order)
The border-collapse property sets whether the table borders are collapsed into a single border or separated:

Example
table = border-collapse:collapse> ? table,th, td = border: 1px solid blac$> ?

Table 9$dth a%d Ge$ght

Width and height of a table is defined by the width and height properties. The example below sets the width of the table to 1''I, and the height of the th elements to -'px:

Example
table = width:1''I> ? th = height:-'px> ?

Table Text #l$g%me%t

The text in a table is aligned with the text-align and #ertical-align properties.

The text-align property sets the hori3ontal alignment, li$e left, right, or center:

Example
td = text-align:right> ? The #ertical-align property sets the #ertical alignment, li$e top, bottom, or middle:

Example
td = height:-'px> #ertical-align:bottom> ?

Table 2add$%g
To control the space between the border and content in a table, use the padding property on td and th elements: Example td = padding:1-px> ?

Table Color
The example below specifies the color of the borders, and the text and bac$ground color of th elements: Example table, td, th = border:1px solid green> ? th = bac$ground-color:green> color:white> ?

CSS 4ox Dodel

6ll T:< elements can be considered as boxes. 2n CSS, the term %box model% is used when tal$ing about design and layout. The CSS box model is essentially a box that wraps around T:< elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model:

!xplanation of the different parts:

Darg$% - Clears an area around the border. The margin does not ha#e a bac$ground color, it is completely transparent 4order - 6 border that goes around the padding and content. The border is affected by the bac$ground color of the box 2add$%g - Clears an area around the content. The padding is affected by the bac$ground color of the box Co%te%t - The content of the box, where text and images appear

2n order to set the width and height of an element correctly in all browsers, you need to $now how the box model wor$s.

9$dth a%d Ge$ght of a% Eleme%t

1mporta%t: When you specify the width and height properties of an element with CSS, you are 4ust setting the width and height of the content area. To $now the full si3e of the element, you must also add the padding, border and margin. The total width of the element in the example below is /''px: width:(-'px> padding:1'px> border:-px solid gray> margin:1'px> <etJs do the math: (-'px ,width. K ('px ,left and right padding. K 1'px ,left and right border. K ('px ,left and right margin. D /''px 2magine that you only had (-'px of space. <etJs ma$e an element with a total width of (-'px:

Example

width:(('px> padding:1'px> border:-px solid gray> margin:'px> The total width of an element should always be calculated li$e this: Total element width D width K left padding K right padding K left border K right border K left margin K right margin The total height of an element should always be calculated li$e this: Total element height D height K top padding K bottom padding K top border K bottom border K top margin K bottom margin

4ro/)er) Compat$b$l$ty 1))ue

2f you tested the pre#ious example in 2nternet !xplorer, you saw that the total width was not exactly (-'px. 2!L and earlier #ersions includes padding and border in the width, when the width property is set, u%le)) a *HCTI2E $) declared. To fix this problem, 4ust add a C9CTM7! to the code:

Example
@EC9CTM7! html 7F+<2C %-88W/C88CTC " T:< 1.' Transitional88!0% %http:88www.w/.org8T)8xhtml18CTC8xhtml1-transitional.dtd%A @htmlA @headA @style typeD%text8css%A di#.ex = width:(('px> padding:1'px> border:-px solid gray> margin:'px> ? @8styleA @8headA

CSS 4order
CSS +order 7roperties
The CSS border properties allow you to specify the style and color of an elementJs border.

+order Style
The border-style property specifies what $ind of border to display. 0one of the border properties will ha#e 60M effect unless the border-style property is setE

border&)tyle +alue):
none: Cefines no border dotted: Cefines a dotted border dashed: Cefines a dashed border solid: Cefines a solid border double: Cefines two borders. The width of the two borders are the same as the border-width #alue groo#e: Cefines a /C groo#ed border. The effect depends on the border-color #alue ridge: Cefines a /C ridged border. The effect depends on the border-color #alue inset: Cefines a /C inset border. The effect depends on the border-color #alue

outset: Cefines a /C outset border. The effect depends on the border-color #alue

4order 9$dth
The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined #alues: thin, medium, or thic$. 6ote: The %border-width% property does not wor$ if it is used alone. Fse the %border-style% property to set the borders first.

Example
p.one = border-style:solid> border-width:-px> ? p.two =

border-style:solid> border-width:medium> ?

4order Color
The border-color property is used to set the color of the border. The color can be set by:

name - specify a color name, li$e %red% )*+ - specify a )*+ #alue, li$e %rgb,(--,','.% ex - specify a hex #alue, li$e %&ff''''%

Mou can also set the border color to %transparent%. 6ote: The %border-color% property does not wor$ if it is used alone. Fse the %border-style% property to set the borders first.

Example
p.one = border-style:solid> border-color:red> ? p.two = border-style:solid> border-color:&NLbf(1> ?

4order & 1%d$+$dual )$de)

2n CSS it is possible to specify different borders for different sides:

Example
p = border-top-style:dotted> border-right-style:solid> border-bottom-style:dotted> border-left-style:solid> ? The example abo#e can also be set with a single property:

Example
border-style:dotted solid>

The border-style property can ha#e from one to four #alues.

border&)tyle:dotted )ol$d double da)hed; o top border is dotted o right border is solid o bottom border is double o left border is dashed border&)tyle:dotted )ol$d double; o top border is dotted o right and left borders are solid o bottom border is double border&)tyle:dotted )ol$d; o top and bottom borders are dotted o right and left borders are solid border&)tyle:dotted; o all four borders are dotted

The border-style property is used in the example abo#e. owe#er, it also wor$s with borderwidth and border-color.

4order & Shortha%d property

6s you can see from the examples abo#e, there are many properties to consider when dealing with borders. To shorten the code, it is also possible to specify all the border properties in one property. This is called a shorthand property. The shorthand property for the border properties is %border%:

Example
border:-px solid red> When using the border property, the order of the #alues are:

border-width border-style border-color

2t does not matter if one of the #alues abo#e are missing ,although, border-style is re5uired., as long as the rest are in the specified order.

#ll CSS 4order 2ropert$e)

2roperty border *e)cr$pt$o% Sets all the border properties in one declaration

border-bottom border-bottom-color border-bottom-style border-bottom-width border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width

Sets all the bottom border properties in one declaration Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border Sets the color of the four borders Sets all the left border properties in one declaration Sets the color of the left border Sets the style of the left border Sets the width of the left border Sets all the right border properties in one declaration Sets the color of the right border Sets the style of the right border Sets the width of the right border Sets the style of the four borders Sets all the top border properties in one declaration Sets the color of the top border Sets the style of the top border Sets the width of the top border Sets the width of the four borders

CSS Darg$%
The margin clears an area around an element ,outside the border.. The margin does not ha#e a bac$ground color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. 6 shorthand margin property can also be used, to change all margins at once.

2o))$ble Jalue)
Jalue *e)cr$pt$o% The browser sets the margin. auto The result of this is dependant of the browser length Cefines a fixed margin ,in pixels, pt, em, etc.. % Cefines a margin in I of the containing element 2t is possible to use negati#e #alues, to o#erlap content.

Darg$% & 1%d$+$dual )$de)

2n CSS, it is possible to specify different margins for different sides: Example margin-top:1''px> margin-bottom:1''px> margin-right:-'px> margin-left:-'px>

Darg$% & Shortha%d property

To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property. The shorthand property for all the margin properties is %margin%: Example margin:1''px -'px> The margin property can ha#e from one to four #alues.

marg$%:2 px 0px ? px 100px; o top margin is (-px o right margin is -'px o bottom margin is O-px o left margin is 1''px marg$%:2 px 0px ? px; o top margin is (-px o right and left margins are -'px o bottom margin is O-px marg$%:2 px 0px; o top and bottom margins are (-px o right and left margins are -'px marg$%:2 px; o all four margins are (-px

#ll CSS Darg$% 2ropert$e)

2roperty marg$% marg$%&bottom marg$%&left marg$%&r$ght marg$%&top *e)cr$pt$o% 6 shorthand property for setting the margin properties in one declaration Sets the bottom margin of an element Sets the left margin of an element Sets the right margin of an element Sets the top margin of an element

CSS 2add$%g
The padding clears an area around the content ,inside the border. of an element. The padding is affected by the bac$ground color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. 6 shorthand padding property can also be used, to change all paddings at once.

2o))$ble Jalue)
Jalue length % *e)cr$pt$o% Cefines a fixed padding ,in pixels, pt, em, etc.. Cefines a padding in I of the containing element

2add$%g & 1%d$+$dual )$de)

2n CSS, it is possible to specify different padding for different sides: Example padding-top:(-px> padding-bottom:(-px> padding-right:-'px> padding-left:-'px>

2add$%g & Shortha%d property

To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property. The shorthand property for all the padding properties is %padding%: Example padding:(-px -'px> The padding property can ha#e from one to four #alues.

padd$%g:2 px 0px ? px 100px; o top padding is (-px o right padding is -'px o bottom padding is O-px o left padding is 1''px

padd$%g:2 px 0px ? px; o top padding is (-px o right and left paddings are -'px o bottom padding is O-px padd$%g:2 px 0px; o top and bottom paddings are (-px o right and left paddings are -'px padd$%g:2 px; o all four paddings are (-px

#ll CSS 2add$%g 2ropert$e)

2roperty padding padding-bottom padding-left padding-right padding-top *e)cr$pt$o% 6 shorthand property for setting all the padding properties in one declaration Sets the bottom padding of an element Sets the left padding of an element Sets the right padding of an element Sets the top padding of an element

CSS 5roup$%g a%d 6e)t$%g Selector)

5roup$%g Selector)
2n style sheets there are often elements with the same style. h1= color:green> ? h(= color:green> ? p= color:green> ? To minimi3e the code, you can group selectors. Separate each selector with a comma. 2n the example below we ha#e grouped the selectors from the code abo#e: Example h1,h(,p= color:green> ?

6e)t$%g Selector)
2t is possible to apply a style for a selector within a selector. 2n the example below, one style is specified for all p elements, one style is specified for all elements with classD%mar$ed%, and a third style is specified only for p elements with classD%mar$ed%: Example p= color:blue> text-align:center> ? .mar$ed= bac$ground-color:red> ? .mar$ed p = color:white> ?

CSS *$)play a%d J$)$b$l$ty

The display property specifies if8how an element is displayed, and the #isibility property specifies if an element should be #isible or hidden. +ox 1 +ox ( +ox /

G$d$%g a% Eleme%t & d$)play:%o%e or +$)$b$l$ty:h$dde%

iding an element can be done by setting the display property to %none% or the #isibility property to %hidden%. owe#er, notice that these two methods produce different results: #isibility:hidden hides an element, but it will still ta$e up the same space as before. The element will be hidden, but still affect the layout.

Example
h1.hidden =#isibility:hidden>? display:none hides an element, and it will not ta$e up any space. The element will be hidden, and the page will be displayed as the element is not there:

Example
h1.hidden =display:none>?

CSS *$)play & 4loc. a%d 1%l$%e Eleme%t)

6 bloc$ element is an element that ta$es up the full width a#ailable, and has a line brea$ before and after it. !xamples of bloc$ elements: @h1A @pA @di#A 6n inline element only ta$es up as much width as necessary, and does not force line brea$s.

!xamples of inline elements:

@spanA @aA

Cha%g$%g Go/ a% Eleme%t $) *$)played

Changing an inline element to a bloc$ element, or #ice #ersa, can be useful for ma$ing the page loo$ a specific way, and still follow web standards. The following example displays list items as inline elements: Example li =display:inline>? The following example displays span elements as bloc$ elements:

Example span =display:bloc$>?

CSS 2o)$t$o%$%g
*ec$de /h$ch eleme%t to d$)play $% fro%tK Eleme%t) ca% o+erlapK
2o)$t$o%$%g
The CSS positioning properties allow you to position an element. 2t can also place an element behind another, and specify what should happen when an elementJs content is too big. !lements can be positioned using the top, bottom, left, and right properties. owe#er, these properties will not wor$ unless the position property is set first. They also wor$ differently depending on the positioning method. There are four different positioning methods.

Stat$c 2o)$t$o%$%g
T:< elements are positioned static by default. 6 static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.

3$xed 2o)$t$o%$%g
6n element with fixed position is positioned relati#e to the browser window. 2t will not mo#e e#en if the window is scrolled: Example p'po)Lf$xed { po)$t$o%:f$xed; top:,0px; r$ght: px; } 6ote: 2!O and 2!L support the fixed #alue only if a EC9CTM7! is specified. 1ixed positioned elements are remo#ed from the normal flow. The document and other elements beha#e li$e the fixed positioned element does not exist. 1ixed positioned elements can o#erlap other elements.

8elat$+e 2o)$t$o%$%g
6 relati#e positioned element is positioned relati#e to its normal position. Example h2'po)Lleft{ po)$t$o%:relat$+e; left:&20px; } h2'po)Lr$ght{ po)$t$o%:relat$+e; left:20px; } The content of relati#ely positioned elements can be mo#ed and o#erlap other elements, but the reser#ed space for the element is still preser#ed in the normal flow. Example h2'po)Ltop { po)$t$o%:relat$+e; top:& 0px; } )elati#ely positioned elements are often used as container bloc$s for absolutely positioned elements.

#b)olute 2o)$t$o%$%g

6n absolute position element is positioned relati#e to the first parent element that has a position other than static. 2f no such element is found, the containing bloc$ is @htmlA: Example h2{ po)$t$o%:ab)olute; left:100px; top:1 0px; } 6bsolutely positioned elements are remo#ed from the normal flow. The document and other elements beha#e li$e the absolutely positioned element does not exist. 6bsolutely positioned elements can o#erlap other elements.

H+erlapp$%g Eleme%t)
When elements are positioned outside the normal flow, they can o#erlap other elements. The 3-index property specifies the stac$ order of an element ,which element should be placed in front of, or behind, the others.. 6n element can ha#e a positi#e or negati#e stac$ order: Example $mg { po)$t$o%:ab)olute; left:0px; top:0px; 0&$%dex:&1 } 6n element with greater stac$ order is always in front of an element with a lower stac$ order. 6ote: 2f two positioned elements o#erlap, without a 3-index specified, the element positioned last in the T:< code will be shown on top.

#ll CSS 2o)$t$o%$%g 2ropert$e)

The number in the %CSS% column indicates in which CSS #ersion the property is defined ,CSS1 or CSS(.. 2roperty *e)cr$pt$o% Jalue) Sets the bottom margin edge bottom auto 8 length 8 I 8 inherit for a positioned box Clips an absolutely clip shape 8 auto 8 inherit positioned element url 8 auto 8 crosshair 8 default 8 pointer 8 mo#e Specifies the type of cursor to e-resi3e 8 ne-resi3e 8 nw-resi3e 8 n-resi3e 8 cursor be displayed se-resi3e 8 sw-resi3e 8 s-resi3e 8 w-resi3e 8 text 8 wait 8 help Sets the left margin edge for left auto 8 length 8 I 8 inherit a positioned box Specifies what happens if o#erflow content o#erflows an 6uto 8 hidden 8 scroll 8 #isible 8 inherit elementJs box Specifies the type of position 6bsolute 8 fixed 8 relati#e 8 static 8 inherit positioning for an element Sets the right margin edge for right 6uto 8 length 8 I 8 inherit a positioned box Sets the top margin edge for top 6uto 8 length 8 I 8 inherit a positioned box number Sets the stac$ order of an 3-index auto element inherit

CSS 3loat

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. 1loat is #ery often used for images, but it is also useful when wor$ing with layouts.

Go/ Eleme%t) 3loat

!lements are floated hori3ontally, this means that an element can only be floated left or right, not up or down. 6 floated element will mo#e as far to the left or right as it can. Fsually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. 2f an image is floated to the right, a following text flows around it, to the left: Example img = float:right> ?

3loat$%g Eleme%t) 6ext to Each Hther

2f you place se#eral floating elements after each other, they will float next to each other if there is room. ere we ha#e made an image gallery using the float property: Example .thumbnail = float:left> width:11'px> height:N'px> margin:-px> ?

Tur%$%g off 3loat & @)$%g Clear

!lements after the floating element will flow around it. To a#oid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed. 6dd a text line into the image gallery, using the clear property: Example .textPline = clear:both> ?

#ll CSS 3loat 2ropert$e)

The number in the %CSS% column indicates in which CSS #ersion the property is defined ,CSS1 or CSS(.. 2roperty clear float *e)cr$pt$o% Specifies which sides of an element where other floating elements are not allowed Specifies whether or not a box should float Jalue) <eft 8right 8 both 8 none 8 inherit <eft 8 right 8 none 8 inherit CSS 1 1

CSS Gor$0o%tal #l$g%

1% CSS! )e+eral propert$e) are u)ed to al$g% eleme%t) hor$0o%tally' #l$g%$%g 4loc. Eleme%t)
6 bloc$ element is an element that ta$es up the full width a#ailable, and has a line brea$ before and after it. !xamples of bloc$ elements:

@h1A @pA @di#A

1or aligning text, see the CSS Text chapter. 2n this chapter we will show you how to hori3ontally align bloc$ elements for layout purposes.

Ce%ter #l$g%$%g @)$%g the marg$% 2roperty

+loc$ elements can be aligned by setting the left and right margins to %auto%. 6ote: Fsing margin:auto will not wor$ in 2!L and earlier, u%le)) a K*HCTI2E $) declared' Setting the left and right margins to auto specifies that they should split the a#ailable margin e5ually. The result is a centered element: Example .center = margin-left:auto> margin-right:auto> width:O'I> bac$ground-color:&b'e'eB> ? T$p: 6ligning has no effect if the width is 1''I.

Beft a%d 8$ght #l$g%$%g @)$%g the po)$t$o% 2roperty

9ne method of aligning elements is to use absolute positioning: Example .right = position:absolute> right:'px> width:/''px> bac$ground-color:&b'e'eB> ? 6ote: 6bsolute positioned elements are remo#ed from the normal flow, and can o#erlap elements.

Cro))bro/)er Compat$b$l$ty 1))ue)

When aligning elements li$e this, it is always a good idea to predefine margin and padding for the @bodyA element. This is to a#oid #isual differences in different browsers. There is a problem with 2!L and earlier, when using the position property. 2f a container element ,in our case @di# classD%container%A. has a specified width, and the EC9CTM7! declaration is missing, 2!L and earlier #ersions will add a 1Opx margin on the right side. This seems to be space reser#ed for a scrollbar. 6lways set the EC9CTM7! declaration when using the position property: Example body

= margin:'> padding:'> ? .container = position:relati#e> width:1''I> ? .right = position:absolute> right:'px> width:/''px> bac$ground-color:&b'e'eB> ?

Beft a%d 8$ght #l$g%$%g @)$%g the float 2roperty

9ne method of aligning elements is to use the float property: Example .right = float:right> width:/''px> bac$ground-color:&b'e'eB> ?

Cro))bro/)er Compat$b$l$ty 1))ue)

When aligning elements li$e this, it is always a good idea to predefine margin and padding for the @bodyA element. This is to a#oid #isual differences in different browsers. There is a problem with 2!L and earlier when using the float property. 2f the EC9CTM7! declaration is missing, 2!L and earlier #ersions will add a 1Opx margin on the right side. This seems to be space reser#ed for a scrollbar. 6lways set the EC9CTM7! declaration when using the float property: Example body { marg$%:0; padd$%g:0; } 'r$ght { float:r$ght; /$dth:,00px; bac.grou%d&color:#b0e0e<; }

CSS 2)eudo&cla))e)
CSS pseudo-classes are used to add special effects to some selectors.

Sy%tax
The syntax of pseudo-classes: )elector:p)eudo&cla)) {property:+alue;} CSS classes can also be used with pseudo-classes: )elector'cla)):p)eudo&cla)) {property:+alue;}

#%chor 2)eudo&cla))e)
<in$s can be displayed in different ways in a CSS-supporting browser: Example a:l$%. {color:#330000;} :; u%+$)$ted l$%. ;: a:+$)$ted {color:#003300;} :; +$)$ted l$%. ;: a:ho+er {color:#330033;} :; mou)e o+er l$%. ;: a:act$+e {color:#000033;} :; )elected l$%. ;: 6ote: a:ho#er :FST come after a:lin$ and a:#isited in the CSS definition in order to be effecti#eEE 6ote: a:acti#e :FST come after a:ho#er in the CSS definition in order to be effecti#eEE 6ote: 7seudo-class names are not case-sensiti#e.

2)eudo&cla))e) a%d CSS Cla))e)

7seudo-classes can be combined with CSS classes: a.red:#isited =color:&11''''>? @a classD%red% hrefD%cssPsyntax.asp%ACSS Syntax@8aA 2f the lin$ in the example abo#e has been #isited, it will be displayed in red.

CSS & The :f$r)t&ch$ld 2)eudo&cla))

The :first-child pseudo-class matches a specified element that is the first child of another element. 6ote: 1or :first-child to wor$ in 2!L and earlier, a @EC9CTM7!A must be declared.

Datch the f$r)t MpN eleme%t

2n the following example, the selector matches any @pA element that is the first child of any element: Example @htmlA @headA @style typeD%text8css%A

p:first-child = color:blue> ? @8styleA @8headA @bodyA @pA2 am a strong man.@8pA @pA2 am a strong man.@8pA @8bodyA @8htmlA

Datch the f$r)t M$N eleme%t $% all MpN eleme%t)

2n the following example, the selector matches the first @iA element in all @pA elements: Example @htmlA @headA @style typeD%text8css%A p A i:first-child = font-weight:bold> ? @8styleA @8headA @bodyA @pA2 am a @iAstrong@8iA man. 2 am a @iAstrong@8iA man.@8pA @pA2 am a @iAstrong@8iA man. 2 am a @iAstrong@8iA man.@8pA @8bodyA @8htmlA

Datch all M$N eleme%t) $% all f$r)t ch$ld MpN eleme%t)

2n the following example, the selector matches all @iA elements in @pA elements that are the first child of another element: Example @htmlA @headA @style typeD%text8css%A p:first-child i = color:blue> ? @8styleA

@8headA @bodyA @pA2 am a @iAstrong@8iA man. 2 am a @iAstrong@8iA man.@8pA @pA2 am a @iAstrong@8iA man. 2 am a @iAstrong@8iA man.@8pA @8bodyA @8htmlA

CSS & The :la%g 2)eudo&cla))

The :lang pseudo-class allows you to define special rules for different languages. 6ote: 2!L supports the :lang pseudo-class only if a @EC9CTM7!A is specified. 2n the example below, the :lang class defines the 5uotation mar$s for 5 elements with langD%no%: Example @htmlA @headA @style typeD%text8css%A 5:lang,no. =5uotes: %Q% %Q%>? @8styleA @8headA @bodyA @pASome text @5 langD%no%A6 5uote in a paragraph@85A Some text.@8pA @8bodyA @8htmlA

#ll CSS 2)eudo Cla))e):Eleme%t)

Selector :lin$ :#isited :acti#e :ho#er :focus :first-letter :first-line :first-child :before :after :lang,language. Example a:lin$ a:#isited a:acti#e a:ho#er input:focus p:first-letter p:first-line p:first-child p:before p:after p:lang,it. Example de)cr$pt$o% Selects all un#isited lin$s Selects all #isited lin$s Selects the acti#e lin$ Selects lin$s on mouse o#er Selects the input element which has focus Selects the first letter of e#ery @pA element Selects the first line of e#ery @pA element Selects e#ery @pA elements that is the first child of its parent 2nsert content before e#ery @pA element 2nsert content after e#ery @pA element Selects e#ery @pA element with a lang attribute #alue starting with %it%

CSS 2)eudo&eleme%t)
CSS pseudo-elements are used to add special effects to some selectors.

Sy%tax
The syntax of pseudo-elements: selector:pseudo-element =property:#alue>? CSS classes can also be used with pseudo-elements: selector.class:pseudo-element =property:#alue>?

The :f$r)t&l$%e 2)eudo&eleme%t

The %first-line% pseudo-element is used to add a special style to the first line of a text. 2n the following example the browser formats the first line of text in a p element according to the style in the %first-line% pseudo-element ,where the browser brea$s the line, depends on the si3e of the browser window.: Example p:f$r)t&l$%e { color:#ff0000; fo%t&+ar$a%t:)mall&cap); } 6ote: The %first-line% pseudo-element can only be used with bloc$-le#el elements. 6ote: The following properties apply to the %first-line% pseudo-element:

font properties color properties bac$ground properties word-spacing letter-spacing text-decoration #ertical-align text-transform line-height clear

The :f$r)t&letter 2)eudo&eleme%t

The %first-letter% pseudo-element is used to add a special style to the first letter of a text: Example p:first-letter = color:&ff''''> font-si3e:xx-large> ? 6ote: The %first-letter% pseudo-element can only be used with bloc$-le#el elements.

6ote: The following properties apply to the %first-letter% pseudo- element:

font properties color properties bac$ground properties margin properties padding properties border properties text-decoration #ertical-align ,only if %float% is %none%. text-transform line-height float clear

2)eudo&eleme%t) a%d CSS Cla))e)

7seudo-elements can be combined with CSS classes: p.article:first-letter =color:&ff''''>? @p classD%article%A6 paragraph in an article@8pA The example abo#e will display the first letter of all paragraphs with classD%article%, in red.

Dult$ple 2)eudo&eleme%t)
Se#eral pseudo-elements can also be combined. 2n the following example, the first letter of a paragraph will be red, in an xx-large font si3e. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font si3e and color: Example p:first-letter = color:&ff''''> font-si3e:xx-large> ? p:first-line = color:&''''ff> font-#ariant:small-caps> ?

CSS & The :before 2)eudo&eleme%t

The %:before% pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before each @h1A element: Example h1:before = content:url,smiley.gif.> ?

CSS & The :after 2)eudo&eleme%t

The %:after% pseudo-element can be used to insert some content after the content of an element. The following example inserts an image after each @h1A element: Example h1:after = content:url,smiley.gif.> ?

#ll CSS 2)eudo Cla))e):Eleme%t)

Selector :lin$ :#isited :acti#e :ho#er :focus :first-letter :first-line :first-child :before :after :lang,language. Example a:lin$ a:#isited a:acti#e a:ho#er input:focus p:first-letter p:first-line p:first-child p:before p:after p:lang,it. Example de)cr$pt$o% Selects all un#isited lin$s Selects all #isited lin$s Selects the acti#e lin$ Selects lin$s on mouse o#er Selects the input element which has focus Selects the first letter of e#ery @pA element Selects the first line of e#ery @pA element Selects e#ery @pA elements that is the first child of its parent 2nsert content before e#ery @pA element 2nsert content after e#ery @pA element Selects e#ery @pA element with a lang attribute #alue starting with %it%

CSS 6a+$gat$o% 4ar

6a+$gat$o% 4ar)
a#ing easy-to-use na#igation is important for any web site. With CSS you can transform boring T:< menus into good-loo$ing na#igation bars.

6a+$gat$o% 4ar = B$)t of B$%.)

6 na#igation bar needs standard T:< as a base. 2n our examples we will build the na#igation bar from a standard T:< list. 6 na#igation bar is basically a list of lin$s, so using the @ulA and @liA elements ma$es perfect sense: Example @ulA @liA@a hrefD%default.asp%A ome@8aA@8liA @liA@a hrefD%news.asp%A0ews@8aA@8liA @liA@a hrefD%contact.asp%AContact@8aA@8liA @liA@a hrefD%about.asp%A6bout@8aA@8liA @8ulA 0ow letJs remo#e the bullets and the margins and padding from the list: Example ul = list-style-type:none> margin:'> padding:'> ? !xample explained:

list-style-type:none - )emo#es the bullets. 6 na#igation bar does not need list mar$ers Setting margins and padding to ' to remo#e browser default settings

The code in the example abo#e is the standard code used in both #ertical, and hori3ontal na#igation bars.

Jert$cal 6a+$gat$o% 4ar

To build a #ertical na#igation bar we only need to style the @aA elements, in addition to the code abo#e: Example a = display:bloc$> width:B'px> ? !xample explained:

display:bloc$ - Cisplaying the lin$s as bloc$ elements ma$es the whole lin$ area clic$able ,not 4ust the text., and it allows us to specify the width

width:B'px - +loc$ elements ta$e up the full width a#ailable by default. We want to specify a B' px width

6ote: 6lways specify the width for @aA elements in a #ertical na#igation bar. 2f you omit the width, 2!B can produce unexpected results.

Gor$0o%tal 6a+$gat$o% 4ar

There are two ways to create a hori3ontal na#igation bar. Fsing $%l$%e or float$%g list items. +oth methods wor$ fine, but if you want the lin$s to be the same si3e, you ha#e to use the floating method.

1%l$%e B$)t 1tem)

9ne way to build a hori3ontal na#igation bar is to specify the @liA elements as inline, in addition to the %standard% code abo#e: Example li = display:inline> ? !xample explained:

display:inline> - +y default, @liA elements are bloc$ elements. ere, we remo#e the line brea$s before and after each list item, to display them on one line

3loat$%g B$)t 1tem)

2n the example abo#e the lin$s ha#e different widths. 1or all the lin$s to ha#e an e5ual width, float the @liA elements and specify a width for the @aA elements: Example l${ float:left; } a{ d$)play:bloc.; /$dth:<0px; } !xample explained:

float:left - use float to get bloc$ elements to slide next to each other display:bloc$ - Cisplaying the lin$s as bloc$ elements ma$es the whole lin$ area clic$able ,not 4ust the text., and it allows us to specify the width width:B'px - Since bloc$ elements ta$e up the full width a#ailable, they cannot float next to each other. We specify the width of the lin$s to B'px

CSS 1mage 5allery

CSS can be used to create an image gallery.

6dd a description of the image here

6dd a description of the image here

6dd a description of the image here

6dd a description of the image here

1mage 5allery
The following image gallery is created with CSS:

Example
@htmlA @headA @style typeD%text8css%A di#.img = margin:(px> border:1px solid &''''ff> height:auto> width:auto> float:left> text-align:center> ? di#.img img = display:inline> margin:/px>

border:1px solid &ffffff> ? di#.img a:ho#er img = border:1px solid &''''ff> ? di#.desc = text-align:center> font-weight:normal> width:1('px> margin:(px> ? @8styleA @8headA @bodyA @di# classD%img%A @a targetD%Pblan$% hrefD%$lematisPbig.htm%A @img srcD%$lematisPsmall.4pg% altD%Hlematis% widthD%11'% heightD%N'% 8A @8aA @di# classD%desc%A6dd a description of the image here@8di#A @8di#A @di# classD%img%A @a targetD%Pblan$% hrefD%$lematis(Pbig.htm%A @img srcD%$lematis(Psmall.4pg% altD%Hlematis% widthD%11'% heightD%N'% 8A @8aA @di# classD%desc%A6dd a description of the image here@8di#A @8di#A @di# classD%img%A @a targetD%Pblan$% hrefD%$lematis/Pbig.htm%A @img srcD%$lematis/Psmall.4pg% altD%Hlematis% widthD%11'% heightD%N'% 8A @8aA @di# classD%desc%A6dd a description of the image here@8di#A @8di#A @di# classD%img%A @a targetD%Pblan$% hrefD%$lematisRPbig.htm%A @img srcD%$lematisRPsmall.4pg% altD%Hlematis% widthD%11'% heightD%N'% 8A @8aA @di# classD%desc%A6dd a description of the image here@8di#A @8di#A @8bodyA @8htmlA

CSS 1mage Hpac$ty : Tra%)pare%cy

Creating transparent images with CSS is easy.

6ote: This is not yet a CSS standard. owe#er, it wor$s in all modern browsers, and is a part of the W/C CSS / recommendation.

Example 1 & Creat$%g a Tra%)pare%t 1mage

1irst we will show you how to create a transparent image with CSS. )egular image:

The same image with transparency:

<oo$ at the following source code: @img srcD%$lematis.4pg% widthD%1-'% heightD%11/% altD%$lematis% styleD%opacity:'.R>filter:alpha,opacityDR'.% 8A 1irefox uses the property opac$ty:x for transparency, while 2! uses f$lter:alpha(opac$ty=x". T$p: The CSS/ syntax for transparency is opac$ty:x. 2n 1irefox ,opacity:x. x can be a #alue from '.' - 1.'. 6 lower #alue ma$es the element more transparent. 2n 2! ,filter:alpha,opacityDx.. x can be a #alue from ' - 1''. 6 lower #alue ma$es the element more transparent.

Example 2 & 1mage Tra%)pare%cy & Dou)eo+er Effect

:ouse o#er the images:

The source code loo$s li$e this: @img srcD%$lematis.4pg% styleD%opacity:'.R>filter:alpha,opacityDR'.% onmouseo#erD%this.style.opacityD1>this.filters.alpha.opacityD1''% onmouseoutD%this.style.opacityD'.R>this.filters.alpha.opacityDR'% 8A @img srcD%$lematis(.4pg% styleD%opacity:'.R>filter:alpha,opacityDR'.% onmouseo#erD%this.style.opacityD1>this.filters.alpha.opacityD1''% onmouseoutD%this.style.opacityD'.R>this.filters.alpha.opacityDR'% 8A We see that the first line of the source code is similar to the source code in !xample 1. 2n addition, we ha#e added an onmouseo#er attribute and an onmouseout attribute. The onmouseo#er attribute defines what will happen when the mouse pointer mo#es o#er the image. 2n this case we want the image to 09T be transparent when we mo#e the mouse pointer o#er it. The syntax for this in 1irefox is: th$)')tyle'opac$ty=1 and the syntax in 2! is: th$)'f$lter)'alpha'opac$ty=100. When the mouse pointer mo#es away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.

Example , & Text $% Tra%)pare%t 4ox

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. The source code loo$s li$e this: @htmlA @headA @style typeD%text8css%A di#.bac$ground = width:-''px> height:(-'px> bac$ground:url,$lematis.4pg. repeat> border:(px solid blac$> ? di#.transbox = width:R''px>

height:1L'px> margin:/'px -'px> bac$ground-color:&ffffff> border:1px solid blac$> 8S for 2! S8 filter:alpha,opacityDB'.> 8S CSS/ standard S8 opacity:'.B> ? di#.transbox p = margin:/'px R'px> font-weight:bold> color:&''''''> ? @8styleA @8headA @bodyA @di# classD%bac$ground%A @di# classD%transbox%A @pAThis is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. @8pA @8di#A @8di#A @8bodyA @8htmlA 1irst, we create a di# element ,classD%bac$ground%. with a fixed height and width, a bac$ground image, and a border. Then we create a smaller di# ,classD%transbox%. inside the first di# element. The %transbox% di# ha#e a fixed width, a bac$ground color, and a border and it is transparent. 2nside the transparent di#, we add some text inside a p element.

CSS 1mage Spr$te)

1mage Spr$te)
6n image sprite is a collection of images put into a single image. 6 web page with many images can ta$e a long time to load and generates multiple ser#er re5uests. Fsing image sprites will reduce the number of ser#er re5uests and sa#e bandwidth. 1mage Spr$te) & S$mple Example

2nstead of using three separate images, we use this single image ,%imgPna#sprites.gif%.: With CSS, we can show 4ust the part of the image we need. 2n the following example the CSS specifies which part of the %imgPna#sprites.gif% image to show: Example img.home = width:RBpx> height:RRpx> bac$ground:url,imgPna#sprites.gif. ' '> ? Example expla$%ed:

@img classD%home% srcD%imgPtrans.gif% 8A - 9nly defines a small transparent image because the src attribute cannot be empty. The displayed image will be the bac$ground image we specify in CSS width:RBpx>height:RRpx> - Cefines the portion of the image we want to use bac$ground:url,imgPna#sprites.gif. ' '> - Cefines the bac$ground image and its position ,left 'px, top 'px.

This is the easiest way to use image sprites, now we want to expand it by using lin$s and ho#er effects.

1mage Spr$te) & Create a 6a+$gat$o% B$)t

We want to use the sprite image ,%imgPna#sprites.gif%. to create a na#igation list. We will use an T:< list, because it can be a lin$ and also supports a bac$ground image:

Example
&na#list=position:relati#e>? &na#list li=margin:'>padding:'>list-style:none>position:absolute>top:'>? &na#list li, &na#list a=height:RRpx>display:bloc$>? &home=left:'px>width:RBpx>? &home=bac$ground:url,JimgPna#sprites.gifJ. ' '>? &pre#=left:B/px>width:R/px>? &pre#=bac$ground:url,JimgPna#sprites.gifJ. -ROpx '>? &next=left:1(Npx>width:R/px>? &next=bac$ground:url,JimgPna#sprites.gifJ. -N1px '>? Example expla$%ed:

&na#list=position:relati#e>? - position is set to relati#e to allow absolute positioning inside it &na#list li=margin:'>padding:'>list-style:none>position:absolute>top:'>? - margin and padding is set to ', list-style is remo#ed, and all list items are absolute positioned &na#list li, &na#list a=height:RRpx>display:bloc$>? - the height of all the images are RRpx

0ow start to position and style for each specific part:

&home=left:'px>width:RBpx>? - 7ositioned all the way to the left, and the width of the image is RBpx &home=bac$ground:url,imgPna#sprites.gif. ' '>? - Cefines the bac$ground image and its position ,left 'px, top 'px. &pre#=left:B/px>width:R/px>? - 7ositioned B/px to the right ,&home width RBpx K some extra space between items., and the width is R/px. &pre#=bac$ground:url,JimgPna#sprites.gifJ. -ROpx '>? - Cefines the bac$ground image ROpx to the right ,&home width RBpx K 1px line di#ider. &next=left:1(Npx>width:R/px>?- 7ositioned 1(Npx to the right ,start of &pre# is B/px K &pre# width R/px K extra space., and the width is R/px. &next=bac$ground:url,JimgPna#sprites.gifJ. no-repeat -N1px '>? - Cefines the bac$ground image N1px to the right ,&home width RBpx K 1px line di#ider K &pre# width R/px K 1px line di#ider .

1mage Spr$te) & Go+er Effect

0ow we want to add a ho#er effect to our na#igation list. 9ur new image ,%imgPna#spritesPho#er.gif%. contains three na#igation images and three images to use for ho#er effects: +ecause this is one single image, and not six separate files, there will be %o load$%g delay when a user ho#ers o#er the image. We only add three lines of code to add the ho#er effect: Example &home a:ho#er=bac$ground: url,JimgPna#spritesPho#er.gifJ. ' -R-px>? &pre# a:ho#er=bac$ground: url,JimgPna#spritesPho#er.gifJ. -ROpx -R-px>? &next a:ho#er=bac$ground: url,JimgPna#spritesPho#er.gifJ. -N1px -R-px>? !xample explained:

Since the list item contains a lin$, we can use the :ho#er pseudo-class &home a:ho#er=bac$ground: transparent url,imgPna#spritesPho#er.gif. ' -R-px>? 1or all three ho#er images we specify the same bac$ground position, only R-px further down

CSS Ded$a Type)

:edia Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc.

Ded$a Type)
Some CSS properties are only designed for a certain media. 1or example the %#oice-family% property is designed for aural user agents. Some other properties can be used for different media types. 1or example, the %font-si3e% property can be used for both screen and print media, but perhaps with different #alues. 6 document usually needs a larger font-si3e on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.

The Omed$a 8ule

The Tmedia rule allows different style rules for different media in the same style sheet. The style in the example below tells the browser to display a 1R pixels ;erdana font on the screen. +ut if the page is printed, it will be in a 1' pixels Times font. 0otice that the fontweight is set to bold, both on screen and on paper: @htmlA @headA @styleA Tmedia screen = p.test =font-family:#erdana,sans-serif>font-si3e:1Rpx>? ? Tmedia print = p.test =font-family:times,serif>font-si3e:1'px>? ? Tmedia screen,print = p.test =font-weight:bold>? ? @8styleA @8headA @bodyA .... @8bodyA @8htmlA

See it yourself E 2f you are using :o3illa81irefox or 2!-K and print this page, you will see that the paragraph under %:edia Types% will be displayed in another font, and ha#e a smaller font si3e than the rest of the text.

*$ffere%t Ded$a Type)

0ote: The media type names are not case-sensiti#e. Ded$a Type all aural bra$lle embo))ed ha%dheld pr$%t pro(ect$o% )cree% tty t+ *e)cr$pt$o% Fsed for all media type de#ices Fsed for speech and sound synthesi3ers Fsed for braille tactile feedbac$ de#ices Fsed for paged braille printers Fsed for small or handheld de#ices Fsed for printers Fsed for pro4ected presentations, li$e slides Fsed for computer screens Fsed for media using a fixed-pitch character grid, li$e teletypes and terminals Fsed for tele#ision-type de#ices