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.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multi le style definitions will cascade into one

Styles Solve a Common Problem HTML tags were originally designed to define the content of a document. They were su osed to say !This is a header!" !This is a aragra h!" !This is a ta#le!" #y using tags like $h%&" $ &" $ta#le&" and so on. The layout of the document was su osed to #e taken care of #y the #rowser" without using any formatting tags. 's the two ma(or #rowsers ) *etsca e and +nternet Ex lorer ) continued to add new HTML tags and attri#utes ,like the $font& tag and the color attri#ute- to the original HTML s ecification" it #ecame more and more difficult to create .e# sites where the content of HTML documents was clearly se arated from the document/s resentation layout. To solve this ro#lem" the .orld .ide .e# 0onsortium ,.10- ) the non rofit" standard setting consortium" res onsi#le for standardi2ing HTML ) created ST3LES in addition to HTML 4.0. 'll ma(or #rowsers su ort 0ascading Style Sheets.

Style Sheets Can Save a Lot of Work Styles sheets define H4. HTML elements are to #e dis layed" (ust like the font tag and the color attri#ute in HTML 1.5. Styles are normally saved in external .css files. External style sheets ena#le you to change the a earance and layout of all the ages in your .e#" (ust #y editing one single 0SS document6 0SS is a #reakthrough in .e# design #ecause it allows develo ers to control the style and layout of multi le .e# ages all at once. 's a .e# develo er you can define a style for each HTML element and a ly it to as many .e# ages as you want. To make a glo#al change" sim ly change the style" and all elements in the .e# are u dated automatically. Multiple Styles Will Cascade nto !ne

Style sheets allow style information to #e s ecified in many ways. Styles can #e s ecified inside a single HTML element" inside the $head& element of an HTML age" or in an external 0SS file. Even multi le external style sheets can #e referenced inside a single HTML document. Cascadin" !rder What style will be used when there is more than one style specified for an #$ML element? 7enerally s eaking we can say that all the styles will !cascade! into a new !virtual! style sheet #y the following rules" where num#er four has the highest riority8 %. 5. 1. 4. 9rowser default External style sheet +nternal style sheet ,inside the $head& tag+nline style ,inside an HTML element-

So" an inline style ,inside an HTML element- has the highest riority" which means that it will override a style declared inside the $head& tag" in an external style sheet" or in a #rowser ,a default value-. Syntax The 0SS syntax is made u of three arts8 a selector" a ro erty and a value8 selector : ro erty8 value; The selector is normally the HTML element<tag you wish to define" the ro erty is the attri#ute you wish to change" and each ro erty can take a value. The ro erty and value are se arated #y a colon" and surrounded #y curly #races8 #ody :color8 #lack; %ote& +f the value is multi le words" ut =uotes around the value8 :font)family8 !sans serif!; %ote& +f you wish to s ecify more than one ro erty" you must se arate each ro erty with a semicolon. The exam le #elow shows how to define a center aligned aragra h" with a red text color8 :text)align8center>color8red;

To make the style definitions more reada#le" you can descri#e one ro erty on each line" like this8 : text)align8 center> color8 #lack> font)family8 arial ; 'roupin" 3ou can grou selectors. Se arate each selector with a comma. +n the exam le #elow we have grou ed all the header elements. 'll header elements will #e dis layed in green text color8 h%"h5"h1"h4"h?"h@ : color8 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 like to have two ty es of aragra hs in your document8 one right)aligned aragra h" and one center)aligned aragra h. Here is how you can do it with styles8 .right :text)align8 right; .center :text)align8 center; 3ou have to use the class attri#ute in your HTML document8 $ classA!right!& This aragra h will #e right)aligned. $< & $ classA!center!& This aragra h will #e center)aligned. $< & %ote& 4nly one class attri#ute can #e s ecified er HTML element6 The exam le #elow is wrong8

$ classA!right! classA!center!& This is a aragra h. $< & 3ou can also omit the tag name in the selector to define a style that will #e used #y all HTML elements that have a certain class. +n the exam le #elow" all HTML elements with classA!center! will #e center)aligned8 .center :text)align8 center; +n the code #elow #oth the h% element and the element have classA!center!. This means that #oth elements will follow the rules in the !.center! selector8 $h% classA!center!& This heading will #e center)aligned $<h%& $ classA!center!& This aragra h will also #e center)aligned. $< & Bo %!$ start a class name with a num#er6 +t will not work in Mo2illa<Cirefox. $he id Selector 3ou can also define styles for HTML elements with the id selector. The id selector is defined as a D. The style rule #elow will match the element that has an id attri#ute with a value of !green!8 Dgreen :color8 green; The style rule #elow will match the ! ara%!8 D ara% : text)align8 center> color8 red ; Bo %!$ start an +B name with a num#er6 +t will not work in Mo2illa<Cirefox. CSS Comments element that has an id with a value of

0omments are used to ex lain your code" and may hel you when you edit the source code at a later date. ' comment will #e ignored #y #rowsers. ' 0SS comment #egins with !<E!" and ends with !E<!" like this8 <E This is a comment E< : text)align8 center> <E This is another comment E< color8 #lack> font)family8 arial ;

#ow to nsert a Style Sheet .hen a #rowser reads a style sheet" it will format the document according to it. There are three ways of inserting a style sheet8 External Style Sheet 'n external style sheet is ideal when the style is a lied to many ages. .ith an external style sheet" you can change the look of an entire .e# site #y changing one file. Each age must link to the style sheet using the $link& tag. The $link& tag goes inside the head section8 $head& $link relA!stylesheet! ty eA!text<css! hrefA!mystyle.css! <& $<head& The #rowser will read the style definitions from the file mystyle.css" and format the document according to it. 'n external style sheet can #e written in any text editor. The file should not contain any html tags. 3our style sheet should #e saved with a .css extension. 'n exam le of a style sheet file is shown #elow8 hr :color8 sienna; :margin)left8 50 x; #ody :#ackground)image8 url,!images<#ack40.gif!-; Bo %!$ leave s aces #etween the ro erty value and the units6 +f you use !margin)left8 50 x! instead of !margin)left8 50 x! it will only work ro erly in +E@ #ut it will not work in Mo2illa<Cirefox or *etsca e.

nternal Style Sheet 'n internal style sheet should #e used when a single document has a uni=ue style. 3ou define internal styles in the head section #y using the $style& tag" like this8 $head& $style ty eA!text<css!& hr :color8 sienna; :margin)left8 50 x; #ody :#ackground)image8 url,!images<#ack40.gif!-; $<style& $<head& The #rowser will now read the style definitions" and format the document according to it. %ote& ' #rowser normally ignores unknown tags. This means that an old #rowser that does not su ort styles" will ignore the $style& tag" #ut the content of the $style& tag will #e dis layed on the age. +t is ossi#le to revent an old #rowser from dis laying the content #y hiding it in the HTML comment element8 $head& $style ty eA!text<css!& $6)) hr :color8 sienna; :margin)left8 50 x; #ody :#ackground)image8 url,!images<#ack40.gif!-; ))& $<style& $<head& nline Styles 'n inline style loses many of the advantages of style sheets #y mixing content with resentation. Fse this method s aringly" such as when a style is to #e a lied to a single occurrence of an element. To use inline styles you use the style attri#ute in the relevant tag. The style attri#ute can contain any 0SS ro erty. The exam le shows how to change the color and the left margin of a aragra h8 $ styleA!color8 sienna> margin)left8 50 x!& This is a aragra h $< &

Multiple Style Sheets +f some ro erties have #een set for the same selector in different style sheets" the values will #e inherited from the more s ecific style sheet. Cor exam le" an external style sheet has these ro erties for the h1 selector8 h1 : color8 red> text)align8 left> font)si2e8 G t ; 'nd an internal style sheet has these ro erties for the h1 selector8 h1 : text)align8 right> font)si2e8 50 t ; +f the age with the internal style sheet also links to the external style sheet the ro erties for h1 will #e8 color8 red> text)align8 right> font)si2e8 50 t The color is inherited from the external style sheet and the text)alignment and the font)si2e is re laced #y the internal style sheet. $he CSS back"round properties define the back"round effects of an element( CSS )ack"round Properties The 0SS #ackground ro erties allow you to control the #ackground color of an element" set an image as the #ackground" re eat a #ackground image vertically or hori2ontally" and osition an image on a age. )rowser support& +nternet Ex lorer" Cirefox" *etsca e. Property #ackground *escription ' shorthand ro erty for setting all +alues background-color background-

#ackground ro erties in one declaration

#ackground) attachment

Sets whether a #ackground image is fixed or scrolls with the rest of the age #ackground)color Sets the #ackground color-rgb color of an element color-hex color-name trans arent #ackground)image Sets an image as the url #ackground none #ackground) Sets the starting to left osition osition of a to center #ackground image to right center left center center center right #ottom left #ottom center #ottom right x-% y-% x-pos y-pos #ackground) Sets if<how a re eat re eat #ackground image will re eat)x #e re eated re eat)y no)re eat

image backgroundrepeat backgroundattachment backgroundposition scroll fixed

CSS $ext Properties The 0SS text ro erties allow you to control the a earance of text. +t is ossi#le to change the color of a text" increase or decrease the s ace #etween characters in a text" align a text" decorate a text" indent the first line in a text" and more. )rowser support& +nternet Ex lorer" Cirefox" *etsca e. Property color direction *escription Sets the color of a text Sets the text direction +alues color ltr

letter)s acing text)align

+ncrease or decrease the s ace #etween characters 'ligns the text in an element 'dds decoration to text

rtl normal length left right center (ustify none underline overline line)through #link length % none ca itali2e u ercase lowercase normal re nowra normal length

text)decoration

text)indent text)transform

+ndents the first line of text in an element 0ontrols the letters in an element Sets how white s ace inside an element is handled +ncrease or decrease the s ace #etween words

white)s ace word)s acing

CSS ,ont Properties The 0SS font ro erties allow you to change the font family" #oldness" si2e" and the style of a text. %ote& +n 0SS% fonts are identified #y a font name. +f a #rowser does not su the s ecified font" it will use a default font. )rowser support& +nternet Ex lorer" Cirefox" *etsca e. ort

Property font

*escription ' shorthand ro erty for setting all of the ro erties for a font in one declaration

+alues font-style font-variant font-weight font-size/lineheight font-family ca tion

font)family

font)si2e

' rioriti2ed list of font family names and<or generic family names for an element Sets the si2e of a font

icon menu message)#ox small)ca tion status)#ar family-name generic-family xx)small x)small small medium large x)large xx)large smaller larger length % none number

font)si2e)ad(ust

font)stretch

S ecifies an as ect value for an element that will reserve the x)height of the first) choice font 0ondenses or ex ands the current font)family

font)style font)variant font)weight

Sets the style of the font Bis lays text in a small)ca s font or a normal font Sets the weight of a font

normal wider narrower ultra)condensed extra)condensed condensed semi)condensed semi)ex anded ex anded extra)ex anded ultra)ex anded normal italic o#li=ue normal small)ca s normal #old #older lighter

%00 500 100 400 ?00 @00 H00 G00 I00

CSS )order Properties The 0SS #order ro erties allow you to s ecify the style and color of an element/s #order. +n HTML we use ta#les to create #orders around a text" #ut with the 0SS #order ro erties we can create #orders with nice effects" and it can #e a lied to any element. )rowser support& +nternet Ex lorer" Cirefox" *etsca e.

Property #order

#order)#ottom

#order)#ottom) color #order)color #order)left

#order)left)color #order)right

*escription ' shorthand ro erty for setting all of the ro erties for the four #orders in one declaration ' shorthand ro erty for setting all of the ro erties for the #ottom #order in one declaration Sets the color of the #ottom #order Sets the color of the four #orders" can have from one to four colors ' shorthand ro erty for setting all of the ro erties for the left #order in one declaration Sets the color of the left #order ' shorthand ro erty

+alues border-width border-style border-color border-bottomwidth border-style border-color border-color color border-left-width border-style border-color border-color border-right-width

#order)right)color #order)style

for setting all of the ro erties for the right #order in one declaration Sets the color of the right #order Sets the style of the four #orders" can have from one to four styles

border-style border-color border-color none hidden dotted dashed solid dou#le groove ridge inset outset border-top-width border-style border-color border-color thin medium thick length

#order)to

#order)to )color #order)width

' shorthand ro erty for setting all of the ro erties for the to #order in one declaration Sets the color of the to #order ' shorthand ro erty for setting the width of the four #orders in one declaration" can have from one to four values

CSS Mar"in Properties The 0SS margin ro erties define the s ace around elements. +t is ossi#le to use negative values to overla content. The to " right" #ottom" and left margin can #e changed inde endently using se arate ro erties. ' shorthand margin ro erty can also #e used to change all of the margins at once. %ote& *etsca e and +E give the #ody tag a default margin of G x. 4 era does not6 +nstead" 4 era a lies a default adding of G x" so if one wants to ad(ust the margin for an entire age and have it dis lay correctly in 4 era" the #ody adding must #e set as well6 )rowser support& +nternet Ex lorer" Cirefox" *etsca e. Property margin *escription ' shorthand ro erty +alues margin-top

margin)#ottom margin)left margin)right margin)to

for setting the margin ro erties in one declaration Sets the #ottom margin of an element Sets the left margin of an element Sets the right margin of an element Sets the to margin of an element

margin-right margin-bottom margin-left auto length % auto length % auto length % auto length %

CSS Paddin" Properties The 0SS adding ro erties define the s ace #etween the element #order and the element content. *egative values are not allowed. The to " right" #ottom" and left adding can #e changed inde endently using se arate ro erties. ' shorthand adding ro erty is also created to control multi le sides at once. )rowser support& +nternet Ex lorer" Cirefox" *etsca e. Property adding *escription ' shorthand ro erty for setting all of the adding ro erties in one declaration Sets the #ottom adding of an element Sets the left adding of an element Sets the right adding of an element Sets the to adding of an element +alues padding-top padding-right padding-bottom padding-left length % length % length % length %

adding)#ottom adding)left adding)right adding)to

CSS Positionin" Properties The 0SS ositioning ro erties allow you to s ecify the left" right" to " and #ottom osition of an element. +t also allows you to set the sha e of an element"

lace an element #ehind another" and to s ecify what should ha element/s content is too #ig to fit in a s ecified area. )rowser support& +nternet Ex lorer" Cirefox" *etsca e. Property #ottom *escription Sets how far the #ottom edge of an element is a#ove<#elow the #ottom edge of the arent element Sets the sha e of an element. The element is cli ed into this sha e" and dis layed Sets how far the left edge of an element is to the right<left of the left edge of the arent element Sets what ha ens if the content of an element overflow its area Jlaces an element in a static" relative" a#solute or fixed osition Sets how far the right edge of an element is to the left<right of the right edge of the arent element Sets how far the to edge of an element is a#ove<#elow the to edge of the arent element Sets the vertical alignment of an element +alues auto % length

en when an

cli

shape auto auto % length visi#le hidden scroll auto static relative a#solute fixed auto % length auto % length #aseline su# su er to text)to middle #ottom

left

overflow

osition

right

to

vertical)align

2)index

Sets the stack order of an element

text)#ottom length % auto number

CSS Pseudo-classes 0SS seudo)classes are used to add s ecial effects to some selectors. Syntax The syntax of seudo)classes8 selector8 seudo)class : ro erty8 value; 0SS classes can also #e used with seudo)classes8 selector.class8 seudo)class : ro erty8 value; .nchor Pseudo-classes ' link that is active" visited" unvisited" or when you mouse over a link can all #e dis layed in different ways in a 0SS)su orting #rowser8 a8link :color8 DCC0000; <E unvisited link E< a8visited :color8 D00CC00; <E visited link E< a8hover :color8 DCC00CC; <E mouse over link E< a8active :color8 D0000CC; <E selected link E< %ote& a8hover MFST come after a8link and a8visited in the 0SS definition in order to #e effective66 %ote& a8active MFST come after a8hover in the 0SS definition in order to #e effective66 %ote& Jseudo)class names are not case)sensitive. Pseudo-classes and CSS Classes Jseudo)classes can #e com#ined with 0SS classes8 a.red8visited :color8 DCC0000; $a classA!red! hrefA!cssKsyntax.as !&0SS Syntax$<a&

+f the link in the exam le a#ove has #een visited" it will #e dis layed in red.

Pseudo-classes )rowser support& +E8 +nternet Ex lorer" C8 Cirefox" *8 *etsca e. W/C& The num#er in the !.10! column indicates in which 0SS recommendation the ro erty is defined ,0SS% or 0SS5-. Pseudo-class 8active 8focus 8hover 8link 8visited Purpose '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 link 'dds s ecial style to a visited link

CSS Pseudo-elements 0SS seudo)elements are used to add s ecial effects to some selectors. Syntax The syntax of seudo)elements8 selector8 seudo)element : ro erty8 value; $he &first-line Pseudo-element The !first)line! seudo)element is used to add s ecial styles to the first line of the text in a selector8 :font)si2e8 %5 t; 8first)line :color8 D0000CC> font)variant8 small)ca s; $ &Some text that ends u on two or more lines$< & The out ut could #e something like this8 S4ME TELT TH'T E*BS u on two or more lines

+n the exam le a#ove the #rowser dis lays the first line formatted according to the !first)line! seudo element. Where the #rowser #reaks the line de ends on the si2e of the #rowser window. %ote& The !first)line! seudo)element can only #e used with #lock)level elements. %ote& The following ro erties a

ly to the !first)line! seudo)element8

font ro erties color ro erties #ackground ro erties word)s acing letter)s acing text)decoration vertical)align text)transform line)height clear

$he &first-letter Pseudo-element The !first)letter! seudo)element is used to add s ecial style to the first letter of the text in a selector8 :font)si2e8 %5 t; 8first)letter :font)si2e8 500M> float8 left; $ &The first words of an article.$< & The out ut could #e something like this8 KKK N he first N words of an article. %ote& The !first)letter! seudo)element can only #e used with #lock)level elements. %ote& The following ro erties a

ly to the !first)letter! seudo) element8

font ro erties color ro erties #ackground ro erties margin ro erties

adding ro erties #order ro erties text)decoration vertical)align ,only if /float/ is /none/text)transform line)height float clear

CSS Summary This tutorial has taught you how to create style sheets to control the style and layout of multi le we# sites at once. 3ou have learned how to use 0SS to add #ackgrounds" format text" add and format #orders" and s ecify adding and margins of elements. 3ou have also learned how to osition an element" control the visi#ility and si2e of an element" set the sha e of an element" lace an element #ehind another" and to add s ecial effects to some selectors" like links.