Css Tutorial

What You Should Already Know
Before you continue you should have some basic understanding of the following:
HTM ! "HTM
#f you want to study this sub$ect first% find the tutorials on our Home &age'
What is (SS)
CSS stands for Cascading Style Sheets
Styles define how to display HTM elements
Styles are normally stored in Style Sheets
Styles were added to HTM *'+ to solve a problem
External Style Sheets can save you a lot of wor,
-.ternal Style Sheets are stored in CSS files
Multi&le style definitions will cascade into one
(SS /emo
With (SS% your HTM documents can be dis&layed using different out&ut styles:
See how it wor,s
Styles Solve a (ommon 0roblem
HTM tags were originally designed to define the content of a document' They
were su&&osed to say 1This is a header1% 1This is a &aragra&h1% 1This is a table1%
by using tags li,e 2h34% 2&4% 2table4% and so on' The layout of the document
was su&&osed to be ta,en care of by the browser% without using any formatting
tags'
As the two ma$or browsers 5 6etsca&e and #nternet -.&lorer 5 continued to add
new HTM tags and attributes 7li,e the 2font4 tag and the color attribute8 to the
original HTM s&ecification% it became more and more difficult to create Web
sites where the content of HTM documents was clearly se&arated from the
document9s &resentation layout'
To solve this &roblem% the World Wide Web (onsortium 7W:(8 5 the non &rofit%
standard setting consortium% res&onsible for standardi;ing HTM 5 created
STY-S in addition to HTM *'+'
All ma$or browsers su&&ort (ascading Style Sheets'
Style Sheets (an Save a ot of Wor,
Styles sheets define H<W HTM elements are to be dis&layed% $ust li,e the font
tag and the color attribute in HTM :'=' 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 your Web% $ust by editing one single (SS document>
(SS is a brea,through in Web design because it allows develo&ers to control the
style and layout of multi&le Web &ages all at once' As a Web develo&er you can
define a style for each HTM element and a&&ly it to as many Web &ages as you
want' To ma,e a global change% sim&ly change the style% and all elements in the
Web are u&dated automatically'
Multi&le Styles Will (ascade #nto <ne
Style sheets allow style information to be s&ecified in many ways' Styles can be
s&ecified inside a single HTM element% inside the 2head4 element of an HTM
&age% or in an e.ternal (SS file' -ven multi&le e.ternal style sheets can be
referenced inside a single HTM document'
(ascading <rder
What style will be used when there is more than one style specified for an
HTML element?
?enerally s&ea,ing we can say that all the styles will 1cascade1 into a new
1virtual1 style sheet by the following rules% where number four has the highest
&riority:
Browser default
-.ternal style sheet
#nternal style sheet 7inside the 2head4 tag8
#nline style 7inside an HTM element8
So% an inline style 7inside an HTM element8 has the highest &riority% which
means that it will override a style declared inside the 2head4 tag% in an e.ternal
style sheet% or in a browser 7a default value8'
Synta.
The (SS synta. is made u& of three &arts: a selector% a &ro&erty and a value:
selector @&ro&erty: valueA
The selector is normally the HTM 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,A
ote! #f the value is multi&le words% &ut Buotes around the value:
& @font5family: 1sans serif1A
ote! #f you wish 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.t5align:centerCcolor:redA
To ma,e the style definitions more readable% you can describe one &ro&erty on
each line% li,e this:
&
@
te.t5align: centerC
color: blac,C
font5family: arial
A
?rou&ing
You can grou& selectors' Se&arate each selector with a comma' #n the e.am&le
below we have grou&ed all the header elements' All header elements will be
dis&layed in green te.t color:
h3%h=%h:%h*%hD%hE
@
color: green
A
The class Selector
With the class selector you can define different styles for the same ty&e of HTM
element'
Say that you would li,e to have two ty&es of &aragra&hs in your document: one
right5aligned &aragra&h% and one center5aligned &aragra&h' Here is how you can
do it with styles:
&'right @te.t5align: rightA
&'center @te.t5align: centerA
You have to use the class attribute in your HTM document:
2& classF1right14
This &aragra&h will be right5aligned'
2!&4
2& classF1center14
This &aragra&h will be center5aligned'
2!&4
ote! <nly one class attribute can be s&ecified &er HTM element> The e.am&le
below is wrong:
2& classF1right1 classF1center14
This is a &aragra&h'
2!&4
You can also omit the tag name in the selector to define a style that will be used
by all HTM elements that have a certain class' #n the e.am&le below% all HTM
elements with classF1center1 will be center5aligned:
'center @te.t5align: centerA
#n the code below both the h3 element and the & element have classF1center1'
This means that both elements will follow the rules in the 1'center1 selector:
2h3 classF1center14
This heading will be center5aligned
2!h34
2& classF1center14
This &aragra&h will also be center5aligned'
2!&4
/o "T start a class name with a number> #t will not wor, in Mo;illa!Girefo.'
The id Selector
You can also define styles for HTM elements with the id selector' The id selector
is defined as a H'
The style rule below will match the element that has an id attribute with a value of
1green1:
Hgreen @color: greenA
The style rule below will match the & element that has an id with a value of
1&ara31:
&H&ara3
@
te.t5align: centerC
color: red
A
/o "T start an #/ name with a number> #t will not wor, in Mo;illa!Girefo.'
(SS (omments
(omments are used to e.&lain your code% and may hel& you when you edit the
source code at a later date' A comment will be ignored by browsers' A (SS
comment begins with 1!I1% and ends with 1I!1% li,e this:
!I This is a comment I!
&
@
te.t5align: centerC
!I This is another comment I!
color: blac,C
font5family: arial
A
(SS How To'''
-.am&les
oo, at -.am&le 3
The HTM file below lin,s to an e.ternal style sheet with the 2lin,4 tag:
2html4
2head4
2lin, relF1stylesheet1
ty&eF1te.t!css1 hrefF1e.3'css1 !4
2!head4
2body4
2h34This header is :E &t2!h34
2h=4This header is blue2!h=4
2&4This &aragra&h has a left
margin of D+ &i.els2!&4
2!body4
2!html4

This is the style sheet file 7e.3'css8:
body @bac,ground5color: yellowA
h3 @font5si;e: :E&tA
h= @color: blueA
& @margin5left: D+&.A

The result is in the frame below:
This header is :E &t
This header is blue
This &aragra&h has a left margin of D+ &i.els
oo, at -.am&le =
The HTM file below lin,s to an e.ternal style sheet with the 2lin,4 tag:
2html4
2head4
2lin, relF1stylesheet1 ty&eF1te.t!css1
hrefF1e.='css1 !4
2!head4
2body4
2h34This is a header 32!h34
2hr !4
2&4You can see that the style
sheet formats the te.t2!&4
2&42a hrefF1htt&:!!www'microsoft'com1
targetF1Jblan,14This is a lin,2!a42!&4
2!body4
2!html4

This is the style sheet file 7e.='css8:
body @bac,ground5color: tanA
h3 @color:maroonC font5si;e:=+&tA
hr @color:navyA
& @font5si;e:33&tC margin5left: 3D&.A
a:lin, @color:greenA
a:visited @color:yellowA
a:hover @color:blac,A
a:active @color:blueA

The result is in the frame below:
This is a header 3
You can see that the style sheet formats the te.t
How to #nsert a Style Sheet
When a browser reads a style sheet% it will format the document according to it'
There are three ways of inserting a style sheet:
-.ternal Style Sheet
An e.ternal style sheet is ideal when the style is a&&lied to many &ages' With an
e.ternal style sheet% you can change the loo, of an entire Web site by changing
one file' -ach &age must lin, to the style sheet using the 2lin,4 tag' The 2lin,4
tag goes inside the head section:
2head4
2lin, relF1stylesheet1 ty&eF1te.t!css1
hrefF1mystyle'css1 !4
2!head4
The browser will read the style definitions from the file mystyle'css% and format
the document according to it'
An e.ternal style sheet can be written in any te.t editor' The file should not
contain any html tags' Your style sheet should be saved with a 'css e.tension' An
e.am&le of a style sheet file is shown below:
hr @color: siennaA
& @margin5left: =+&.A
body @bac,ground5image: url71images!bac,*+'gif18A
/o "T leave s&aces between the &ro&erty value and the units> #f you use
1margin5left: =+ &.1 instead of 1margin5left: =+&.1 it will only wor, &ro&erly in #-E
but it will not wor, in Mo;illa!Girefo. or 6etsca&e'
#nternal Style Sheet
An internal style sheet should be used when a single document has a uniBue
style' You define internal styles in the head section by using the 2style4 tag% li,e
this:
2head4
2style ty&eF1te.t!css14
hr @color: siennaA
2!style4
2!head4
The browser will now read the style definitions% and format the document
according to it'
ote! A browser normally ignores un,nown tags' This means that an old browser
that does not su&&ort styles% will ignore the 2style4 tag% but the content of the
2style4 tag will be dis&layed on the &age' #t is &ossible to &revent an old browser
from dis&laying the content by hiding it in the HTM comment element:
2head4
2>55
hr @color: siennaA
554
2!style4
2!head4
#nline Styles
An inline style loses many of the advantages of style sheets by mi.ing content
with &resentation' Kse 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:
2& styleF1color: siennaC margin5left: =+&.14
This is a &aragra&h
2!&4
Multi&le Style Sheets
#f 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'
Gor e.am&le% an e.ternal style sheet has these &ro&erties for the h: selector:
h:
@
color: redC
te.t5align: leftC
font5si;e: L&t
A
And an internal style sheet has these &ro&erties for the h: selector:
h:
@
te.t5align: rightC
font5si;e: =+&t
A
#f the &age with the internal style sheet also lin,s to the e.ternal style sheet the
&ro&erties for h: will be:
color: redC
te.t5align: rightC
font5si;e: =+&t
The color is inherited from the e.ternal style sheet and the te.t5alignment and the
font5si;e is re&laced by the internal style sheet'
(SS Bac,ground
The (SS bac,ground &ro&erties define the bac,ground effects of an element'
-.am&les
Set the bac,ground color
This e.am&le demonstrates how to set the bac,ground color for an element'
2html4
2head4
body @bac,ground5color: yellowA
h3 @bac,ground5color: H++ff++A
h= @bac,ground5color: trans&arentA
& @bac,ground5color: rgb7=D+%+%=DD8A
2!style4
2!head4
2body4
2h34This is header 32!h34
2h=4This is header =2!h=4
2&4This is a &aragra&h2!&4
2!body4
2!html4
Set an image as the bac,ground
This e.am&le demonstrates how to set an image as the bac,ground'
2html4
2head4
body
@
bac,ground5image:
url79bgdesert'$&g98
A
2!style4
2!head4
2body4
2!body4
2!html4
How to re&eat a bac,ground image
This e.am&le demonstrates how to re&eat a bac,ground image'
2html4
2head4
body
@
bac,ground5image:
url79bgdesert'$&g98C
bac,ground5re&eat: re&eat
A
2!style4
2!head4
2body4
2!body4
2!html4
How to re&eat a bac,ground image only vertically
This e.am&le demonstrates how to re&eat a bac,ground image only vertically'
2html4
2head4
body
@
bac,ground5image:
bac,ground5re&eat: re&eat5y
A
2!style4
2!head4
2body4
2!body4
2!html4
How to re&eat a bac,ground image only hori;ontally
This e.am&le demonstrates how to re&eat a bac,ground image only hori;ontally'
2html4
2head4
body
@
bac,ground5image:
bac,ground5re&eat: re&eat5.
A
2!style4
2!head4
2body4
2!body4
2!html4
How to &lace the bac,ground image
This e.am&le demonstrates how to &lace the image on the &age'
2html4
2head4
body
@
bac,ground5image:
url79smiley'gif98C
bac,ground5re&eat:
no5re&eatC
bac,ground5&osition:
centerC
A
2!style4
2!head4
2body4
2!body4
2!html4
How to set a fi.ed bac,ground image
This e.am&le demonstrates how to set a fi.ed bac,ground image' The image will
not scroll with the rest of the &age'
2html4
2head4
body
@
bac,ground5image:
url79smiley'gif98C
bac,ground5re&eat:
no5re&eatC
bac,ground5attachment:
fi.ed
A
2!style4
2!head4
2body4
2&4The image will not scroll with the rest of the &age2!&4
2!body4
2!html4
All the bac,ground &ro&erties in one declaration
This e.am&le demonstrates how to use the shorthand &ro&erty for setting all of
the bac,ground &ro&erties in one declaration'
2html4
2head4
body
@
bac,ground: H++ff++ url79smiley'gif98 no5re&eat fi.ed centerC
A
2!style4
2!head4
2body4
2&4This is some te.t2!&4
2!body4
2!html4
(SS Bac,ground 0ro&erties
The (SS bac,ground &ro&erties allow you to control the bac,ground color of an
element% set an image as the bac,ground% re&eat a bac,ground image vertically
or hori;ontally% and &osition an image on a &age'
#rowser support! #-: #nternet -.&lorer% G: Girefo.% 6: 6etsca&e'
W$C! The number in the 1W:(1 column indicates in which (SS recommendation
the &ro&erty is defined 7(SS3 or (SS=8'
%roperty &escription 'alues (E ) W$C
bac,ground A shorthand &ro&erty
for setting all
bac,ground &ro&erties
in one declaration
background-color
background-image
background-repeat
background-
attachment
background-
position
* 3 E 3
bac,ground5
attachment
Sets whether a
bac,ground image is
fi.ed or scrolls with the
rest of the &age
scroll
fi.ed
* 3 E 3
bac,ground5color Sets the bac,ground
color of an element
color-rgb
color-hex
color-name
trans&arent
* 3 * 3
bac,ground5image Sets an image as the
bac,ground
url
none
* 3 * 3
bac,ground5
&osition
Sets the starting
&osition of a
bac,ground image
to& left
to& center
to& right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
* 3 E 3
bac,ground5re&eat Sets if!how a
bac,ground image will
be re&eated
re&eat
re&eat5.
re&eat5y
no5re&eat
* 3 * 3
(SS bac,ground 0ro&erty
The bac,ground &ro&erty is a shorthand &ro&erty for setting all bac,ground
&ro&erties in one declaration'
(nherited! 6o
-.am&le
body
@
bac,ground: HGG++++
A
body
@
bac,ground: url7stars'gif8 no5re&eat to&
A
body
@
bac,ground: H++GG++ url7stars'gif8 no5re&eat fi.ed to&
A
0ossible Malues
'alue &escription
bac,ground5color
bac,ground5image
bac,ground5re&eat
bac,ground5attachment
bac,ground5&osition
You can declare from one to five bac,ground
&ro&erties in this declaration
(SS bac,ground5attachment 0ro&erty
The bac,ground5attachment &ro&erty sets whether a bac,ground image is fi.ed
or scrolls with the rest of the &age'
(nherited! 6o
-.am&le
body
@
bac,ground5image: url7stars'gif8C
bac,ground5attachment: scroll
A
0ossible Malues
'alue &escription
scroll The bac,ground image moves when the rest of the &age scrolls
fi.ed The bac,ground image does not move when the rest of the &age scrolls'
(SS bac,ground5color 0ro&erty
The bac,ground5color &ro&erty sets the bac,ground color of an element'
(nherited! 6o
-.am&le
&
@
bac,ground5color: H++ff++
A
0ossible Malues
'alue &escription
color The color value can be a color name 7red8% a rgb value
7rgb7=DD%+%+88% or a he. number 7Hff++++8
trans&arent The bac,ground color is trans&arent
(SS bac,ground5image 0ro&erty
The bac,ground5image &ro&erty sets an image as the bac,ground'
Tip! Always set a bac,ground5color to be used if the image is unavailable'
(nherited! 6o
-.am&le
body
@
bac,ground5color: H++++++
A
0ossible Malues
'alue &escription
url The &ath to an image
none 6o bac,ground image
(SS bac,ground5&osition 0ro&erty
The bac,ground5&osition &ro&erty sets the starting &osition of a bac,ground
image'
(nherited! 6o
-.am&le
body
@
bac,ground5re&eat: no5re&eatC
bac,ground5&osition: to& left
A
body
@
bac,ground5re&eat: no5re&eatC
bac,ground5&osition: +N +N
A
0ossible Malues
'alue &escription
to& left
to& center
to& right
center left
center center
center right
bottom left
bottom center
bottom right
#f you only s&ecify one ,eyword% the second value will be
1center1'
x-% y-% The first value is the hori;ontal &osition and the second value is
the vertical' The to& left corner is +N +N' The right bottom
corner is 3++N 3++N' #f you only s&ecify one value% the other
value will be D+N'
x-pos y-pos The first value is the hori;ontal &osition and the second value is
the vertical' The to& left corner is + +' Knits can be &i.els 7+&.
+&.8 or any other (SS units' #f you only s&ecify one value% the
other value will be D+N' You can mi. N and &ositions'
(SS bac,ground5re&eat 0ro&erty
The bac,ground5re&eat &ro&erty sets if!how a bac,ground image will be
re&eated'
(nherited! 6o
-.am&le
body
@
bac,ground5re&eat: re&eat5.
A
0ossible Malues
'alue &escription
re&eat The bac,ground image will be re&eated vertically and hori;ontally
re&eat5. The bac,ground image will be re&eated hori;ontally
re&eat5y The bac,ground image will be re&eated vertically
no5re&eat The bac,ground5image will be dis&layed only once
(SS Te.t
The (SS te.t &ro&erties define the a&&earance of te.t'
-.am&les
Set the color of the te.t
This e.am&le demonstrates how to set the color of the te.t'
2html4
2head4
h3 @color: H++ff++A
h= @color: Hdda+ddA
& @color: rgb7+%+%=DD8A
2!style4
2!head4
2body4
2!body4
2!html4
Set the bac,ground5color of the te.t
This e.am&le demonstrates how to set the bac,ground5color of a &art of the te.t'
2html4
2head4
s&an'highlight
@
bac,ground5color:yellow
A
2!style4
2!head4
2body4
2&4
2s&an classF1highlight14This is a te.t'2!s&an4 This is a te.t' This is a te.t' This is
a te.t' This is a te.t' This is a te.t' This is a te.t' This is a te.t' This is a te.t'
2s&an classF1highlight14This is a te.t'2!s&an4
2!&4
2!body4
2!html4
S&ecify the s&ace between characters
This e.am&le demonstrates how to increase or decrease the s&ace between
characters'
2html4
2head4
h3 @letter5s&acing: 5:&.A
h* @letter5s&acing: +'DcmA
2!style4
2!head4
2body4
2h*4This is header *2!h*4
2!body4
2!html4
Align the te.t
This e.am&le demonstrates how to align the te.t'
2html4
2head4
h3 @te.t5align: centerA
h= @te.t5align: leftA
h: @te.t5align: rightA
2!style4
2!head4
2body4
2h:4This is header :2!h:4
2!body4
2!html4
/ecorate the te.t
This e.am&le demonstrates how to add decoration to te.t'
2html4
2head4
h3 @te.t5decoration: overlineA
h= @te.t5decoration: line5throughA
h: @te.t5decoration: underlineA
a @te.t5decoration: noneA
2!style4
2!head4
2body4
2&42a hrefF1htt&:!!www'w:schools'com!default'as&14This is a lin,2!a42!&4
2!body4
2!html4
#ndent te.t
This e.am&le demonstrates how to indent the first line of a &aragra&h'
2html4
2head4
& @te.t5indent: 3cmA
2!style4
2!head4
2body4
2&4
This is some te.t in a &aragra&h
2!&4
2!body4
(ontrol the letters in a te.t
This e.am&le demonstrates how to control the letters in a te.t'
2html4
2head4
&'u&&ercase @te.t5transform: u&&ercaseA
&'lowercase @te.t5transform: lowercaseA
&'ca&itali;e @te.t5transform: ca&itali;eA
2!style4
2!head4
2body4
2& classF1u&&ercase14This is some te.t in a &aragra&h2!&4
2& classF1lowercase14This is some te.t in a &aragra&h2!&4
2& classF1ca&itali;e14This is some te.t in a &aragra&h2!&4
2!body4
2!html4
(SS Te.t 0ro&erties
The (SS te.t &ro&erties allow you to control the a&&earance of te.t' #t is &ossible
to change the color of a te.t% increase or decrease the s&ace between characters
in a te.t% align a te.t% decorate a te.t% indent the first line in a te.t% and more'
color Sets the color of a te.t color : 3 * 3
direction Sets the te.t direction ltr
rtl
E 3 E =
letter5s&acing #ncrease or decrease
the s&ace between
characters
normal
length
* 3 E 3
te.t5align Aligns the te.t in an
element
left
right
center
$ustify
* 3 * 3
te.t5decoration Adds decoration to te.t none
underline
overline
line5through
blin,
* 3 * 3
te.t5indent #ndents the first line of
te.t in an element
length
%
* 3 * 3
te.t5shadow none
color
length

te.t5transform (ontrols the letters in
an element
none
ca&itali;e
u&&ercase
lowercase
* 3 * 3
unicode5bidi normal
embed
D =
bidi5override
white5s&ace Sets how white s&ace
inside an element is
handled
normal
&re
nowra&
D 3 * 3
word5s&acing #ncrease or decrease
the s&ace between
words
normal
length
E 3 E 3
(SS color 0ro&erty
The color &ro&erty sets the color of a te.t'
(nherited! Yes
-.am&les
body
@
color: rgb7=DD%=DD%+8
A
0ossible Malues
'alue &escription
color The color value can be a color name 7red8% a rgb value 7rgb7=DD%+%+88% or a
he. number 7Hff++++8'
(SS direction 0ro&erty
The direction &ro&erty sets the te.t direction'
(nherited! Yes
-.am&les
div
@
direction: rtl
A
0ossible Malues
'alue &escription
ltr Te.t direction is left5to5right
rtl Te.t direction is right5to5left
(SS letter5s&acing 0ro&erty
The letter5s&acing &ro&erty increases or decreases the white s&ace between
characters'
(nherited! Yes
ote! 6egative values are allowed'
-.am&les
&
@
letter5s&acing: 3=&.
A
&
@
letter5s&acing: 5+'D&.
A
0ossible Malues
'alue &escription
normal /efines normal s&ace between characters
length /efines a fi.ed s&ace between characters
(SS te.t5align 0ro&erty
The te.t5align &ro&erty aligns the te.t in an element'
(nherited! Yes
-.am&les
&
@
te.t5align: center
A
0ossible Malues
'alue &escription
left Aligns the te.t to the left
right Aligns the te.t to the right
center (enters the te.t
$ustify
(SS te.t5decoration 0ro&erty
The te.t5decoration &ro&erty decorates the te.t'
(nherited! 6o
ote! The color of the decoration should be set by the 1color1 &ro&erty'
-.am&les
&
@
te.t5decoration: underline
A
0ossible Malues
'alue &escription
none /efines a normal te.t
underline /efines a line under the te.t
overline /efines a line over the te.t
line5through /efines a line through the te.t
blin, /efines a blin,ing te.t
(SS te.t5indent 0ro&erty
The te.t5indent indents the first line of te.t in an element'
(nherited! Yes
ote! 6egative values are allowed' The first line will be indented to the left if the
value is negative'
-.am&les
&
@
te.t5indent: =+&.
A
&
@
te.t5indent: 53=&.
A
0ossible Malues
'alue &escription
length /efines a fi.ed indentation
% /efines an indentation in N of the width of the &arent element
(SS te.t5transform 0ro&erty
The te.t5transform &ro&erty controls the letters in an element'
(nherited! Yes
-.am&les
&
@
te.t5transform: u&&ercase
A
0ossible Malues
'alue &escription
none /efines normal te.t% with lower case letters and ca&ital letters
ca&itali;e -ach word in a te.t starts with a ca&ital letter
u&&ercase /efines only ca&ital letters
lowercase /efines no ca&ital letters% only lower case letters
(SS white5s&ace 0ro&erty
The white5s&ace &ro&erty sets how white5s&ace inside an element is handled'
(nherited! Yes
-.am&les
&
@
white5s&ace: normal
A
0ossible Malues
'alue &escription
normal White5s&ace is ignored by the browser
&re White5s&ace is &reserved by the browser' Acts li,e the 2&re4 tag in
HTM
nowra& The te.t will never wra&% it continues on the same line until a 2br4 tag is
encountered
(SS word5s&acing 0ro&erty
The word5s&acing &ro&erty increases or decreases the white s&ace between
words'
(nherited! Yes
ote! 6egative values are allowed'
-.am&les
&
@
word5s&acing: :+&.
A
&
@
word5s&acing: 5+'D&.
A
0ossible Malues
'alue &escription
normal /efines normal s&ace between words
length /efines a fi.ed s&ace between words
(SS Gont
The (SS font &ro&erties define the font in te.t'
-.am&les
Set the font of a te.t
This e.am&le demonstrates how to set a font of a te.t'
2html4
2head4
h: @font5family:arial A
& @font5family: courierA
&'sansserif @font5family: sans5serifA
2!style4
2!head4
2body4
2& classF1sansserif14This is a &aragra&h2!&4
2!body4
2!html4
Set the si;e of the font
This e.am&le demonstrates how to set the si;e of a font'
2html4
2head4
h3 @font5si;e: 3D+NA
h= @font5si;e: 3:+NA
& @font5si;e: 3++NA
2!style4
2!head4
2body4
2!body4
2!html4
Set the style of the font
This e.am&le demonstrates how to set the style of a font'
2html4
2head4
h3 @font5style: italicA
h= @font5style: normalA
& @font5style: obliBueA
2!style4
2!head4
2body4
2!body4
2!html4
Set the variant of the font
This e.am&le demonstrates how to set the variant of a font'
2html4
2head4
&'normal @font5variant: normalA
&'small @font5variant: small5ca&sA
2!style4
2!head4
2body4
2& classF1normal14This is a &aragra&h2!&4
2& classF1small14This is a &aragra&h2!&4
2!body4
2!html4
Set the boldness of the font
This e.am&le demonstrates how to set the boldness of a font'
2html4
2head4
&'normal @font5weight: normalA
&'thic, @font5weight: boldA
&'thic,er @font5weight: O++A
2!style4
2!head4
2body4
2& classF1normal14This is a &aragra&h2!&4
2& classF1thic,14This is a &aragra&h2!&4
2& classF1thic,er14This is a &aragra&h2!&4
2!body4
2!html4
All the font &ro&erties in one declaration
This e.am&le demonstrates how to use the shorthand &ro&erty for setting all of
the font &ro&erties in one declaration'
2html4
2head4
&
@
font: italic small5ca&s O++ 3=&. arial
A
2!style4
2!head4
2body4
2!body4
2!html4
(SS Gont 0ro&erties
The (SS font &ro&erties allow you to change the font family% boldness% si;e% and
the style of a te.t'
ote! #n (SS3 fonts are identified by a font name' #f a browser does not su&&ort
the s&ecified font% it will use a default font'
font A shorthand &ro&erty
for setting all of the
&ro&erties for a font in
one declaration
font-style
font-variant
font-weight
font-size/line-
height
font-family
ca&tion
icon
menu
message5bo.
small5ca&tion
status5bar
* 3 * 3
font5family A &rioriti;ed list of font
family names and!or
generic family names
for an element
family-name
generic-family
: 3 * 3
font5si;e Sets the si;e of a font ..5small
.5small
small
medium
large
.5large
..5large
smaller
larger
length
%
: 3 * 3
font5si;e5ad$ust S&ecifies an as&ect
value for an element
that will &reserve the .5
height of the first5
choice font
none
number
5 5 5 =
font5stretch (ondenses or e.&ands
the current font5family
normal
wider
narrower
ultra5condensed
e.tra5condensed
condensed
semi5condensed
semi5e.&anded
e.&anded
e.tra5e.&anded
ultra5e.&anded
5 5 5 =
font5style Sets the style of the
font
normal
italic
obliBue
* 3 * 3
font5variant /is&lays te.t in a small5
ca&s font or a normal
font
normal
small5ca&s
* 3 E 3
font5weight Sets the weight of a
font
normal
bold
bolder
lighter
3++
=++
:++
*++
D++
E++
* 3 * 3
P++
L++
O++
(SS font 0ro&erty
The font &ro&erty is% with e.ce&tion of some system fonts% a shorthand &ro&erty
for setting all of the &ro&erties for a font in one declaration'
ote! This &ro&erty also has a si.th value: 1line5height1% which sets the s&ace
between lines'
(nherited! Yes
-.am&le
&
@
font: 3=&. arial
A
&
@
font: italic small5ca&s bold 3=&. arial
A
&
@
font: obliBue small5ca&s O++ 3=&.!3*&. arial
A
&
@
font: menu
A
0ossible Malues
'alue &escription
font-style
font-variant
font-weight
font-size/line-
height
font-family
Sets the &ro&erties for a font' The line5height value sets the s&ace
between lines' The value can be a number% a N% or a font si;e
ca&tion /efines the font that are used by ca&tioned controls 7li,e buttons%
dro&5downs% etc'8
icon /efines the fonts that are used by icon labels
menu /efines the fonts that are used by dro&down menus
message5bo. /efines the fonts that are used by dialog bo.es
small5ca&tion
status5bar /efines the fonts that are used by window status bars
(SS font5family 0ro&erty
The font5family &ro&erty is a &rioriti;ed list of font family names and!or generic
family names for an element' The browser will use the first value it recogni;es'
There are two ty&es of font5family values:
family5name: The name of a font5family% li,e 1times1% 1courier1% 1arial1% etc'
generic5family: The name of a generic5family% li,e 1serif1% 1sans5serif1% 1cursive1%
1fantasy1% 1monos&ace1'
ote! Se&arate each value with a comma% and always offer a generic5family
name as the last alternative'
ote! #f a family5name contains white5s&ace% it should be Buoted' Single Buotes
must be used when using the 1style1 attribute in HTM'
(nherited! Yes
-.am&le
body
@
font5family: courier% serif
A
&
@
font5family: arial% 1lucida console1% sans5serif
A
2& styleF1font5family: arial% 9lucida console9% sans5serif14
0ossible Malues
'alue &escription
family-name
generic-
family
A &rioriti;ed list of font family names and!or generic family names
for an element
(SS font5si;e 0ro&erty
The font5si;e &ro&erty sets the si;e of a font'
(nherited! Yes
-.am&le
body
@
font5si;e: .5large
A
&
@
font5si;e: 3+&.
A
0ossible Malues
'alue &escription
..5small
.5small
small
medium
large
.5large
..5large
Sets the si;e of the font to different si;es% from ..5small to ..5large
smaller Sets the font5si;e to a smaller si;e than the &arent element
larger Sets the font5si;e to a larger si;e than the &arent element
length Sets the font5si;e to a fi.ed si;e
% Sets the font5si;e to a N of the &arent element
(SS font5si;e5ad$ust 0ro&erty
The ratio between the height of the font9s lowercase letter 1.1 and the height of
the 1font5si;e1 is called a font9s aspect value' #f the as&ect value is high% the font
will be legible when it is set to a smaller si;e' Gor e.am&le: Merdana has an
as&ect value of +'DL 7means that when font si;e is 3++ &.% its .5height is DL &.8'
Times 6ew Qoman has an as&ect value of +'*E' This means that Merdana is
more legible at smaller si;es than Times 6ew Qoman'
The font5si;e5ad$ust &ro&erty s&ecifies an as&ect value for an element that will
&reserve the .5height of the first5choice font'
(nherited! Yes
-.am&le
h=
@
font5si;e5ad$ust: +'DL
A
0ossible Malues
'alue &escription
none /o not &reserve the font9s .5height if the font is unavailable
number /efines the as&ect value ratio for the font
The formula to use:
font5si;e of first5choice fontI7font5si;e5ad$ust!as&ect value of available
font8 F font5si;e to a&&ly to available font
-.am&le:
#f 3*&. Merdana 7as&ect value of +'DL8 was unavailable% but an available
font had an as&ect value of +'*E% the font5si;e of the substitute would be
3* I 7+'DL!+'*E8 F 3P'ED&.
(SS font5stretch 0ro&erty
The font5stretch &ro&erty condenses or e.&ands the current font5family'
ote! The font5family are condensed or e.&anded hori;ontally only'
(nherited! Yes
-.am&le
h=
@
font5stretch: ultra5condensed
A
0ossible Malues
'alue &escription
normal Sets the scale of condensation or e.&ansion to normal
wider Sets the scale of e.&ansion to the ne.t e.&anded value
narrower Sets the scale of condensation to the ne.t condensed value
ultra5
condensed
e.tra5
condensed
condensed
semi5
condensed
semi5
e.&anded
e.&anded
e.tra5
e.&anded
ultra5
e.&anded
Sets the scale of condensation or e.&ansion of the font5family'
1ultra5condensed1 is the most condensed 7narrowest8 value% and
1ultra5e.&anded1 is the most e.&anded 7widest8 value
(SS font5style 0ro&erty
The font5style &ro&erty sets the style of a font'
(nherited! Yes
-.am&le
body
@
font5style: italic
A
0ossible Malues
'alue &escription
normal The browser dis&lays a normal font
italic The browser dis&lays an italic font
obliBue The browser dis&lays an obliBue font
(SS font5variant &ro&erty
The font5variant &ro&erty is used to dis&lay te.t in a small5ca&s font% which
means that all the lower case letters are converted to u&&ercase letters% but all
the letters in the small5ca&s font have a smaller font5si;e com&ared to the rest of
the te.t'
(nherited! Yes
-.am&le
&
@
font5variant: small5ca&s
A
0ossible Malues
'alue &escription
normal The browser dis&lays a normal font
small5ca&s The browser dis&lays a small5ca&s font
(SS font5weight 0ro&erty
The font5weight &ro&erty sets how thic, or thin characters in te.t should be
dis&layed'
(nherited! Yes
-.am&le
&
@
font5weight: bold
A
0ossible Malues
'alue &escription
normal /efines normal characters
bold /efines thic, characters
bolder /efines thic,er characters
lighter /efines lighter characters
3++
=++
:++
*++
D++
/efines from thin to thic, characters' *++ is the same as normal% and P++
is the same as bold
E++
P++
L++
O++
(SS Border
The (SS border &ro&erties define the borders around an element'
-.am&les
Set the style of the four borders
This e.am&le demonstrates how to set the style of the four borders'
2html4
2head4
&'dotted @border5style: dottedA
&'dashed @border5style: dashedA
&'solid @border5style: solidA
&'double @border5style: doubleA
&'groove @border5style: grooveA
&'ridge @border5style: ridgeA
&'inset @border5style: insetA
&'outset @border5style: outsetA
2!style4
2!head4
2body4
2& classF1dotted14A dotted border2!&4
2& classF1dashed14A dashed border2!&4
2& classF1solid14A solid border2!&4
2& classF1double14A double border2!&4
2& classF1groove14A groove border2!&4
2& classF1ridge14A ridge border2!&4
2& classF1inset14An inset border2!&4
2& classF1outset14An outset border2!&4
2!body4
2!html4
Set different borders on each side
This e.am&le demonstrates how to set different borders on each side of the
element'
2html4
2head4
&'soliddouble @border5style: solid doubleA
&'doublesolid @border5style: double solidA
&'groovedouble @border5style: groove doubleA
&'three @border5style: solid double grooveA
2!style4
2!head4
2body4
2& classF1soliddouble14Some te.t2!&4
2& classF1doublesolid14Some te.t2!&4
2& classF1groovedouble14Some te.t2!&4
2& classF1three14Some te.t2!&4
2!body4
2!html4
Set the color of the four borders
This e.am&le demonstrates how to set the color of the four borders' #t can have
from one to four colors'
2html4
2head4
&'one
@
border5style: solidC
border5color: H++++ff
A
&'two
@
border5color: Hff++++ H++++ff
A
&'three
@
border5color: Hff++++ H++ff++ H++++ff
A
&'four
@
border5color: Hff++++ H++ff++ H++++ff rgb7=D+%+%=DD8
A
2!style4
2!head4
2body4
2& classF1one14<ne5colored border>2!&4
2& classF1two14Two5colored border>2!&4
2& classF1three14Three5colored border>2!&4
2& classF1four14Gour5colored border>2!&4
2&42b46ote:2!b4 The 1border5color1 &ro&erty does not wor, if it is used alone'
Kse the 1border5style1 &ro&erty to set the borders first'2!&4
2!body4
2!html4
Set the width of the bottom border
This e.am&le demonstrates how to set the width of the bottom border'
2html4
2head4
&
@
border5bottom5width: 3D&.
A
2!style4
2!head4
2body4
2&42b46ote:2!b4 The 1border5bottom5width1 &ro&erty does not wor, if it is used
alone' Kse the 1border5style1 &ro&erty to set the borders first'2!&4
2!body4
Set the width of the left border
This e.am&le demonstrates how to set the width of the left border'
2html4
2head4
&
@
border5left5width: 3D&.
A
2!style4
2!head4
2body4
2&42b46ote:2!b4 The 1border5left5width1 &ro&erty does not wor, if it is used
2!body4
2!html4
Set the width of the right border
This e.am&le demonstrates how to set the width of the right border'
2html4
2head4
&
@
border5right5width: 3D&.
A
2!style4
2!head4
2body4
2&42b46ote:2!b4 The 1border5right5width1 &ro&erty does not wor, if it is used
2!body4
Set the width of the to& border
This e.am&le demonstrates how to set the width of the to& border'
RRRly li,e above
All the bottom border &ro&erties in one declaration
This e.am&le demonstrates a shorthand &ro&erty for setting all of the &ro&erties
for the bottom border in one declaration'
2html4
2head4
&
@
border5bottom: medium solid Hff++++
A
2!style4
2!head4
2body4
2&4Some te.t'2!&4
2!body4
2!html4
All the left border &ro&erties in one declaration
for the left border in one declaration'
2html4
2head4
&
@
border5left: medium solid Hff++++
A
2!style4
2!head4
2body4
2&4Some te.t'2!&4
2!body4
2!html4
All the right border &ro&erties in one declaration
for the right border in one declaration'
2html4
2head4
&
@
border5right: medium solid Hff++++
A
2!style4
2!head4
2body4
2&4Some te.t'2!&4
2!body4
2!html4
All the to& border &ro&erties in one declaration
for the to& border in one declaration'
2html4
2head4
&
@
border5to&: medium solid Hff++++
A
2!style4
2!head4
2body4
2&4Some te.t'2!&4
2!body4
2!html4
All the width of the border &ro&erties in one declaration
This e.am&le demonstrates a shorthand &ro&erty for setting the width of the four
borders in one declaration% can have from one to four values'
2html4
2head4
&'one
@
border5width: D&.
A
&'two
@
border5width: D&. 3+&.
A
&'three
@
border5width: D&. 3+&. 3&.
A
&'four
@
border5width: D&. 3+&. 3&. medium
A
2!style4
2!head4
2body4
2& classF1one14Some te.t2!&4
2& classF1two14Some te.t2!&4
2& classF1three14Some te.t2!&4
2& classF1four14Some te.t2!&4
2&42b46ote:2!b4 The 1border5width1 &ro&erty does not wor, if it is used alone'
Kse the 1border5style1 &ro&erty to set the borders first'2!&4
2!body4
2!html4
All the border &ro&erties in one declaration
for the four borders in one declaration% can have from one to three values'
2html4
2head4
&
@
border: medium double rgb7=D+%+%=DD8
A
2!style4
2!head4
2body4
2&4Some te.t2!&4
2!body4
2!html4
(SS Border 0ro&erties
The (SS border &ro&erties allow you to s&ecify the style and color of an
element9s border' #n HTM 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'
border A shorthand &ro&erty
&ro&erties for the four
borders in one
declaration
border-width
border-style
border-color
* 3 * 3
border5bottom A shorthand &ro&erty
&ro&erties for the
bottom border in one
declaration
border-bottom-
width
border-style
border-color
* 3 E 3
border5bottom5
color
Sets the color of the
bottom border
border-color * 3 E =
border5bottom5style Sets the style of the
bottom border
border-style * 3 E =
border5bottom5
width
Sets the width of the
bottom border
thin
medium
thic,
length
* 3 * 3
border5color Sets the color of the
four borders% can have
from one to four colors
color * 3 E 3
border5left A shorthand &ro&erty
&ro&erties for the left
border in one
declaration
border-left-width
border-style
border-color
* 3 E 3
border5left5color Sets the color of the left
border
border5left5style Sets the style of the left
border
border5left5width Sets the width of the
left border
thin
medium
thic,
length
* 3 * 3
border5right A shorthand &ro&erty
&ro&erties for the right
border in one
declaration
border-right-width
border-style
border-color
* 3 E 3
border5right5color Sets the color of the border-color * 3 E =
right border
border5right5style Sets the style of the
right border
border5right5width Sets the width of the
right border
thin
medium
thic,
length
* 3 * 3
border5style Sets the style of the
four borders% can have
from one to four styles
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
* 3 E 3
border5to& A shorthand &ro&erty
&ro&erties for the to&
border in one
declaration
border-top-width
border-style
border-color
* 3 E 3
border5to&5color Sets the color of the
to& border
border5to&5style Sets the style of the to&
border
border5to&5width Sets the width of the
to& border
thin
medium
thic,
length
* 3 * 3
border5width A shorthand &ro&erty
for setting the width of
the four borders in one
declaration% can have
from one to four values
thin
medium
thic,
length
* 3 * 3
CSS border Property
The border property is a shorthand property for setting all of the properties for the four
borders in one declaration.
Note: This property can not set a different value for each side of the border, like "margin"
and "padding".
Inherited: No
Example
p
{
border: thin dotted #0000
!
span
{
border: solid #0000
!
Possible Values
'alue &escription
border-width
border-style
border-color
Sets the &ro&erties for the four borders
CSS border-bottom Property
The border"bottom property is a shorthand property for setting all the properties for the
bottom border in one declaration.
Inherited: No
Example
table
{
border"bottom: thin dotted #0000
!
span
{
border"bottom: solid #0000
!
Possible Values
'alue &escription
border-bottom-width
border-style
border-color
Sets the &ro&erties for the bottom border
CSS border-bottom-color Property
The border"bottom"color sets the color of an element#s bottom border.
Inherited: No
Example
table
{
border"bottom"color: #ff$$%%
!
table
{
border"bottom"color: rgb&'((,0,0)
!
Possible Values
'alue &escription
he. number 7HGG++++8
CSS border-bottom-style Property
The border"bottom"style sets the style of an element#s bottom border.
Inherited: No
Example
table
{
border"bottom"style: solid
!
Possible Values
'alue &escription
none /efines no border
hidden The same as 1none1% e.ce&t in border conflict resolution for table
elements
dotted /efines a dotted border' Qenders as solid in most browsers
dashed /efines a dashed border' Qenders as solid in most browsers
solid /efines a solid border
double /efines two borders' The width of the two borders are the same as the
border5width value
groove /efines a :/ grooved border' The effect de&ends on the border5color
value
ridge /efines a :/ ridged border' The effect de&ends on the border5color
value
inset /efines a :/ inset border' The effect de&ends on the border5color value
outset /efines a :/ outset border' The effect de&ends on the border5color value
CSS border-bottom-width Property
The border"bottom"*idth sets the *idth of an element#s bottom border.
Inherited: No
Example
table
{
border"bottom"*idth: thin
!
table
{
border"bottom"*idth: 0.(p+
!
Possible Values
'alue &escription
thin /efines a thin bottom border
medium /efines a medium bottom border
thic, /efines a thic, bottom border
length Allows you to define the thic,ness of the bottom border
CSS border-color Property
The border"color property sets the color of the four borders. This property can take one to
four colors.
Note: ,l*ays declare the border"style property before the border"color property. ,n
element must have borders before you change the color of them.
Inherited: No
Example
table @border5color: redA
all four borders will be red
table {border"color: red green!
top and bottom border *ill be red, left and right border *ill be green
table {border"color: red green blue!
top border *ill be red, left and right border *ill be green, bottom border *ill be blue
table {border"color: red green blue yello*!
top border *ill be red, right border *ill be green, bottom border *ill be blue, left border
*ill be yello*
Possible Values
'alue &escription
color The color value can be a color name 7red8% a rgb value
7rgb7=DD%+%+88% or a he. number 7HGG++++8'
trans&arent The border is trans&arent
CSS border-left Property
The border"left property is a shorthand property for setting all of the properties for the left
border in one declaration.
Inherited: No
Example
table
{
border"left: thin dotted #0000
!
table
{
border"left: thick #0000
!
Possible Values
'alue &escription
border-left-width
border-style
border-color
Sets the &ro&erties for the left border
CSS border-left-color Property
The border"left"color property sets the color of an element#s left border.
Inherited: No
Example
table
{
border"left"color: #ff$$%%
!
table
{
border"left"color: rgb&'((,0,0)
!
Possible Values
'alue &escription
CSS border-left-style Property
The border"left"style property sets the style of an element#s left border.
Inherited: No
Example
table
{
border"left"style: solid
!
Possible Values
'alue &escription
elements
border5width value
value
value
CSS border-left-width Property
The border"left"*idth property sets the *idth of an element#s left border.
Inherited: No
Example
table
{
border"left"*idth: thin
!
table
{
border"left"*idth: 0.(cm
!
Possible Values
'alue &escription
thin /efines a thin left border'
medium /efines a medium left border'
thic, /efines a thic, left border'
length Allows you to define the thic,ness of the left border'
CSS border-right Property
The border"right property is a shorthand property for setting the border"right"*idth and-or
the border"style and-or the border"color in one declaration.
Inherited: No
Example
table
{
border"right: thin dotted #0000
!
table
{
border"right: thick #0000
!
Possible Values
'alue &escription
border-right-width
border-style
border-color
Sets the &ro&erties for the right border
CSS border-right-color Property
The border"right"color property sets the color of an element#s right border.
Inherited: No
Example
table
{
border"right"color: #ff$$%%
!
table
{
border"right"color: rgb&'((,0,0)
!
Possible Values
'alue &escription
CSS border-right-style Property
The border"right"style property sets the style of an element#s right border.
Inherited: No
Example
table
{
border"right"style: solid
!
Possible Values
'alue &escription
elements
border5width value
value
value
CSS border-right-width Property
The border"right"*idth property sets the *idth of an element#s right border.
Inherited: No
Example
table
{
border"right"*idth: thin
!
table
{
border"right"*idth: 0.(cm
!
Possible Values
'alues &escription
thin /efines a thin right border'
medium /efines a medium right border'
thic, /efines a thic, right border'
length Allows you to define the thic,ness of the right border'
CSS border-style Property
The border"style property sets the style of the four borders, can have from one to four
styles.
Inherited: No
Example
table @border5style: dottedA
all four borders will be dotted
table {border"style: dotted dashed!
top and bottom border *ill be dotted, left an right border *ill be dashed
table {border"style: dotted dashed solid!
top border *ill be dotted, left and right border *ill be dashed, bottom border *ill be solid
table {border"style: dotted dashed solid double!
top border *ill be dotted, right border *ill be dashed, bottom border *ill be solid, left
border *ill be double
Possible Values
'alue &escription
elements
border5width value
value
value
CSS border-top Property
The border"top property is a shorthand property for setting all of the properties for the top
border in one declaration.
Inherited: No
Example
table
{
border"top: thin dotted #0000
!
table
{
border"top: solid #0000
!
Possible Values
'alue &escription
border-top-width
border-style
border-color
Sets the &ro&erties for the to& border
CSS border-top-color Property
The border"top"color property sets the color of an element#s top border.
Inherited: No
Example
table
{
border"top"color: #ff$$%%
!
table
{
border"top"color: rgb&'((,0,0)
!
Possible Values
'alues &escription
color The color value can be a color name 7red8% a rgb value 7rgb7=DD%+%+88% or
a he. number 7HGG++++8
CSS border-top-style Property
The border"top"style property sets the style of an element#s top border.
Inherited: No
Example
table
{
border"top"style: solid
!
Possible Values
'alue &escription
elements
border5width value
value
value
CSS border-top-width Property
The border"top"*idth property sets the *idth of an element#s top border.
Inherited: No
Example
table
{
border"top"*idth: thin
!
table
{
border"top"*idth: 0.(cm
!
Possible Values
'alue &escription
thin /efines a thin to& border'
medium /efines a medium to& border'
thic, /efines a thic, to& border'
length Allows you to define the thic,ness of the to& border'
CSS border-width Property
The border"*idth property is a shorthand property for setting the *idth of the four
borders in one declaration, can have from one to four values.
Inherited: No
Example
table {border"*idth: thin!
all four borders *ill be thin
table {border"*idth: thin medium!
top and bottom border *ill be thin, left and right border *ill be medium
table {border"*idth: thin medium thick!
top border *ill be thin, left and right border *ill be medium, bottom border *ill be thick
table {border"*idth: thin medium thick none!
top border *ill be thin, right border *ill be medium, bottom border *ill be thick, left side
*ill have no border
Possible Values
'alue &escription
thin /efines a thin border'
medium /efines a medium border'
thic, /efines a thic, border'
length Allows you to define the thic,ness of the borders'
CSS argin
The .// margin properties define the space around elements.
Examples
/et the left margin of a te+t
This e+ample demonstrates ho* to set the left margin of a te+t.
2html4
2head4
&'leftmargin @margin5left: =cmA
2!style4
2!head4
2body4
2&4This is a &aragra&h with no margin s&ecified2!&4
2& classF1leftmargin14This is a &aragra&h with a s&ecified left margin2!&4
2!body4
2!html4
/et the right margin of a te+t
This e+ample demonstrates ho* to set the right margin of a te+t.
2html4
2head4
&'rightmargin @margin5right: LcmA
2!style4
2!head4
2body4
2& classF1rightmargin14This is a &aragra&h with a s&ecified right margin2!&4
2!body4
2!html4
/et the top margin of a te+t
This e+ample demonstrates ho* to set the top margin of a te+t.
2html4
2head4
&'to&margin @margin5to&: DcmA
2!style4
2!head4
2body4
2& classF1to&margin14This is a &aragra&h with a s&ecified to& margin2!&4
2!body4
2!html4
/et the bottom margin of a te+t
This e+ample demonstrates ho* to set the bottom margin of a te+t.
2html4
2head4
&'bottommargin @margin5bottom: =cmA
2!style4
2!head4
2body4
2& classF1bottommargin14This is a &aragra&h with a s&ecified bottom
margin2!&4
2!body4
2!html4
,ll the margin properties in one declaration
This e+ample demonstrates ho* to set a shorthand property for setting all of the margin
properties in one declaration.
2html4
2head4
&'margin @margin: =cm *cm :cm *cmA
2!style4
2!head4
2body4
2&4This is a &aragra&h with no s&ecified margins2!&4
2& classF1margin14This is a &aragra&h with s&ecified margins2!&4
2&4This is a &aragra&h with no s&ecified margins2!&4
2!body4
2!html4
CSS argin Properties
The .// margin properties define the space around elements. 0t is possible to use
negative values to overlap content. The top, right, bottom, and left margin can be changed
independently using separate properties. , shorthand margin property can also be used to
change all of the margins at once.
Note: Netscape and 01 give the body tag a default margin of 2p+. 3pera does not4
0nstead, 3pera applies a default padding of 2p+, so if one *ants to ad5ust the margin for
an entire page and have it display correctly in 3pera, the body padding must be set as
*ell4
!rowser support: 01: 0nternet 1+plorer, : irefo+, N: Netscape.
"#C: The number in the "6$." column indicates in *hich .// recommendation the
property is defined &.//7 or .//').
margin A shorthand &ro&erty margin-top * 3 * 3
for setting the margin
&ro&erties in one
declaration
margin-right
margin-bottom
margin-left
margin"bottom
Sets the bottom margin
of an element
auto
length
%
* 3 * 3
margin"left
Sets the left margin of
an element
auto
length
%
: 3 * 3
margin"right
Sets the right margin of
an element
auto
length
%
: 3 * 3
margin5to& Sets the to& margin of
an element
auto
length
%
: 3 * 3
CSS margin Property
The margin property is a shorthand property for setting all of the properties for the four
margins in one declaration.
Note: Negative values are allo*ed.
Inherited: No
Example
h7 {margin: 70p+!
all four margins *ill be 70p+
h7 {margin: 70p+ '8!
top and bottom margin *ill be 70p+, left and right margin *ill be '8 of the total *idth of
the document.
h7 {margin: 70p+ '8 "70p+!
top margin *ill be 70p+, left and right margin *ill be '8 of the total *idth of the
document, bottom margin *ill be "70p+
h7 {margin: 70p+ '8 "70p+ auto!
top margin *ill be 70p+, right margin *ill be '8 of the total *idth of the document,
bottom margin *ill be "70p+, left margin *ill be set by the bro*ser
Possible Values
'alue &escription
margin-top
margin-right
margin-bottom
margin-left
Sets the &ro&erties for the margins' The values comes in %
7defines a margin in N of the total height!width of the
document8% length 7defines a fi.ed margin8% and auto 7the
browser sets a margin8'
CSS margin-bottom Property
The margin"bottom property sets the bottom margin of an element.
Inherited: No
Example
h7
{
margin"bottom: 70p+
!
h'
{
margin"bottom: "'0p+
!
Possible Values
'alue &escription
auto The browser sets a bottom margin
length /efines a fi.ed bottom margin
% /efines a bottom margin in N of the total height of the document
CSS margin-left Property
The margin"left property sets the left margin of an element.
Inherited: No
Example
h7
{
margin"left: 70p+
!
h'
{
margin"left: "'0p+
!
Possible Values
'alue &escription
auto The browser sets a left margin
length /efines a fi.ed left margin
% /efines a left margin in N of the total width of the document
CSS margin-right Property
The margin"right property sets the right margin of an element.
Inherited: No
Example
h7
{
margin"right: 70p+
!
h'
{
margin"right: "'0p+
!
Possible Values
'alue &escription
auto The browser sets a right margin
length /efines a fi.ed right margin
% /efines a right margin in N of the total width of the document
CSS margin-top Property
The margin"top property sets the top margin of an element.
Inherited: No
Example
h7
{
margin"top: 70p+
!
h'
{
margin"top: "'0p+
!
Possible Values
'alue &escription
auto The browser sets a to& margin
length /efines a fi.ed to& margin
% /efines a to& margin in N of the total height of the document
CSS Padding
The .// padding properties define the space bet*een the element border and the element
content.
Examples
/et the left padding
This e+ample demonstrates ho* to set the left padding of a tablecell.
2html4
2head4
td @&adding5left: =cmA
2!style4
2!head4
2body4
2table borderF1314
2tr4
2td4
This is a tablecell with a left &adding' This is a tablecell with a left &adding'
2!td4
2!tr4
2!table4
2!body4
2!html4
/et the right padding
This e+ample demonstrates ho* to set the right padding of a tablecell.
2html4
2head4
td @&adding5right: DcmA
2!style4
2!head4
2body4
2table borderF1314
2tr4
2td4
This is a tablecell *ith a right padding. This is a tablecell *ith a right padding.
2!td4
2!tr4
2!table4
2!body4
2!html4
/et the top padding
This e+ample demonstrates ho* to set the top padding of a tablecell.
2html4
2head4
td @&adding5to&: =cmA
2!style4
2!head4
2body4
2table borderF1314
2tr4
2td4
This is a tablecell with a to& &adding
2!td4
2!tr4
2!table4
2!body4
2!html4
/et the bottom padding
This e+ample demonstrates ho* to set the bottom padding of a tablecell.
2html4
2head4
td @&adding5bottom: =cmA
2!style4
2!head4
2body4
2table borderF1314
2tr4
2td4
This is a tablecell with a bottom &adding
2!td4
2!tr4
2!table4
2!body4
2!html4
,ll the padding properties in one declaration
This e+ample demonstrates a shorthand property for setting all of the padding properties
in one declaration, can have from one to four values.
2html4
2head4
td'test3 @&adding: 3'DcmA
td'test= @&adding: +'Dcm ='DcmA
2!style4
2!head4
2body4
2table borderF1314
2tr4
2td classF1test314
This is a tablecell with eBual &adding on each side'
2!td4
2!tr4
2!table4
2br4
2table borderF1314
2tr4
2td classF1test=14
This tablecell has a top and bottom padding of 0.(cm and a left and right padding of
'.(cm.
2!td4
2!tr4
2!table4
2!body4
2!html4
CSS Padding Properties
The .// padding properties define the space bet*een the element border and the element
content. Negative values are not allo*ed. The top, right, bottom, and left padding can be
changed independently using separate properties. , shorthand padding property is also
created to control multiple sides at once.
&adding A shorthand &ro&erty
&adding &ro&erties in
one declaration
padding-top
padding-right
padding-bottom
padding-left
* 3 * 3
padding"bottom
Sets the bottom
&adding of an element
length
%
* 3 * 3
padding"left
Sets the left &adding of
an element
length
%
* 3 * 3
padding"right
Sets the right &adding
of an element
length
%
* 3 * 3
&adding5to& Sets the to& &adding of
an element
length
%
* 3 * 3
CSS padding Property
The padding property is a shorthand property for setting all of the padding properties in
one declaration.
Note: Negative values are not allo*ed.
Inherited: No
Example
h7 {padding: 70p+!
the padding *ill be 70p+ on all four sides
h7 {padding: 70p+ '8!
top and bottom padding *ill be 70p+, left and right padding *ill be '8 of the *idth of the
closest element.
h7 {padding: 70p+ '8 7(p+!
top padding *ill be 70p+, left and right padding *ill be '8 of the *idth of the closest
element, bottom padding *ill be 7(p+
h7 {padding: 70p+ '8 7(p+ '0p+!
top padding *ill be 70p+, right padding *ill be '8 of the *idth of the closest element,
bottom padding *ill be 7(p+, left padding *ill be '0p+
Possible Values
'alue &escription
padding-top
padding-right
padding-bottom
Sets the &adding' The values comes in % 7defines &adding
in N of the width of the closest element8 and length 7defines
a fi.ed &adding8
padding-left
CSS padding-bottom Property
The padding"bottom property sets the bottom padding &space) of an element.
Inherited: No
Example
h7
{
padding"bottom: 70p+
!
Possible Values
'alue &escription
length /efines a fi.ed bottom &adding
% /efines a bottom &adding in N of the height of the closest element
CSS padding-left Property
The padding"left property sets the left padding &space) of an element.
Inherited: No
Example
h7
{
padding"left: 70p+
!
Possible Values
'alue &escription
length /efines a fi.ed left &adding
% /efines a left &adding in N of the width of the closest element
CSS padding-right Property
The padding"right property sets the right padding &space) of an element.
Inherited: No
Example
h7
{
padding"right: 70p+
!
Possible Values
'alue &escription
length /efines a fi.ed right &adding
% /efines a right &adding in N of the width of the closest element
CSS padding-top Property
The padding"top property sets the top padding &space) of an element.
Inherited: No
Example
h7
{
padding"top: 70p+
!
Possible Values
'alue &escription
length /efines a fi.ed to& &adding
% /efines a to& &adding in N of the height of the closest element
CSS $ist
The .// list properties allo* you to place the list"item marker, change bet*een different
list"item markers, or set an image as the list"item marker.
Examples
The different list"item markers in unordered lists
This e+ample demonstrates the different list"item markers in .//.
2html4
2head4
ul'disc @list5style5ty&e: discA
ul'circle @list5style5ty&e: circleA
ul'sBuare @list5style5ty&e: sBuareA
ul'none @list5style5ty&e: noneA
2!style4
2!head4
2body4
2ul classF1disc14
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ul4
2ul classF1circle14
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ul4
2ul classF1sBuare14
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ul4
2ul classF1none14
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ul4
2!body4
2!html4
The different list"item markers in ordered lists
This e+ample demonstrates the different list"item markers in .//.
2html4
2head4
ol'decimal @list5style5ty&e: decimalA
ol'lroman @list5style5ty&e: lower5romanA
ol'uroman @list5style5ty&e: u&&er5romanA
ol'lal&ha @list5style5ty&e: lower5al&haA
ol'ual&ha @list5style5ty&e: u&&er5al&haA
2!style4
2!head4
2body4
2ol classF1decimal14
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ol4
2ol classF1lroman14
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ol4
2ol classF1uroman14
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ol4
2ol classF1lal&ha14
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ol4
2ol classF1ual&ha14
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ol4
2!body4
2!html4
/et an image as the list"item marker
This e+ample demonstrates ho* to set an image as the list"item marker.
2html4
2head4
ul
@
list5style5image: url79arrow'gif98
A
2!style4
2!head4
2body4
2ul4
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ul4
2!body4
2!html4
9lace the list"item marker
This e+ample demonstrates *here to place the list"item marker.
2html4
2head4
ul'inside
@
list5style5&osition: inside
A
ul'outside
@
list5style5&osition: outside
A
2!style4
2!head4
2body4
2&4This list has a list5style5&osition with a value of 1inside1:2!&4
2ul classF1inside14
2li4-arl ?rey Tea 5 A fine blac, tea2!li4
2li4Sasmine Tea 5 A fabulous 1all &ur&ose1 tea2!li4
2li4Honeybush Tea 5 A su&er fruity delight tea2!li4
2!ul4
2&4This list has a list5style5&osition with a value of 1outside1:2!&4
2ul classF1outside14
2li4-arl ?rey Tea 5 A fine blac, tea2!li4
2li4Sasmine Tea 5 A fabulous 1all &ur&ose1 tea2!li4
2li4Honeybush Tea 5 A su&er fruity delight tea2!li4
2!ul4
2!body4
2!html4
,ll list properties in one declaration
This e+ample demonstrates a shorthand property for setting all of the properties for a list
in one declaration.
2html4
2head4
ul
@
list5style: sBuare inside url79arrow'gif98
A
2!style4
2!head4
2body4
2ul4
2li4(offee2!li4
2li4Tea2!li4
2li4(oca (ola2!li4
2!ul4
2!body4
2!html4
CSS $ist Properties
The .// list properties allo* you to place the list"item marker, change bet*een different
list"item markers, or set an image as the list"item marker.
list5style A shorthand &ro&erty
&ro&erties for a list in
one declaration
list-style-type
list-style-position
list-style-image
* 3 E 3
list5style5image Sets an image as the
list5item mar,er
none
url
* 3 E 3
list5style5&osition Sets where the list5item
mar,er is &laced in the
list
inside
outside
* 3 E 3
list5style5ty&e Sets the ty&e of the list5
item mar,er
none
disc
circle
sBuare
decimal
decimal5leading5
;ero
lower5roman
u&&er5roman
lower5al&ha
u&&er5al&ha
lower5gree,
lower5latin
u&&er5latin
hebrew
armenian
georgian
c$,5ideogra&hic
hiragana
,ata,ana
hiragana5iroha
,ata,ana5iroha
* 3 * 3
mar,er5offset auto
length
3 P =
CSS list-style Property
The list"style property is a shorthand property for setting all the properties for a list in one
declaration.
Inherited: :es
Example
ul
@
list5style: disc outside
A
ol
{
list"style: decimal inside
!
Possible Values
'alue &escription
list-style-type
list-style-position
list-style-image
Sets the &ro&erties for a list
CSS list-style-image Property
The list"style"image property replaces the list"item marker *ith an image.
Note: ,l*ays specify a "list"style"type" property in case the image is unavailable.
Inherited: :es
Example
ol
@
list5style5image: url7blueball'gif8C
list5style5ty&e: circle
A
Possible Values
'alue &escription
url The &ath to the image
6one 6o image will be dis&layed
CSS list-style-position Property
The list"style"position property places the list"item marker in the list.
Inherited: :es
Example
<l
@
list5style5&osition: inside
A
Possible Values
'alue &escription
inside #ndents the mar,er and the te.t'
outside Kee&s the mar,er to the left of the te.t
CSS list-style-type Property
The list"style"type sets the type of the list"item marker.
Note: /ome bro*sers only support the "disc" value.
Inherited: :es
Example
ul
@
list5style5ty&e: disc
A
Possible Values
'alue &escription
none 6o mar,er
disc The mar,er is a filled circle
circle The mar,er is a circle
sBuare The mar,er is a sBuare
decimal The mar,er is a number
decimal5leading5;ero The mar,er is a number &added by initial ;eros 7+3% +=%
+:% etc'8
lower5roman The mar,er is lower5roman 7i% ii% iii% iv% v% etc'8
u&&er5roman The mar,er is u&&er5roman 7#% ##% ###% #M% M% etc'8
lower5al&ha The mar,er is lower5al&ha 7a% b% c% d% e% etc'8
u&&er5al&ha The mar,er is u&&er5al&ha 7A% B% (% /% -% etc'8
lower5gree, The mar,er is lower5gree, 7al&ha% beta% gamma% etc'8
lower5latin The mar,er is lower5latin 7a% b% c% d% e% etc'8
u&&er5latin The mar,er is u&&er5latin 7A% B% (% /% -% etc'8
hebrew The mar,er is traditional Hebrew numbering
armenian The mar,er is traditional Armenian numbering
georgian The mar,er is traditional ?eorgian numbering 7an% ban%
gan% etc'8
c$,5ideogra&hic The mar,er is &lain ideogra&hic numbers
hiragana The mar,er is: a% i% u% e% o% ,a% ,i% etc'
,ata,ana The mar,er is: A% #% K% -% <% KA% K#% etc'
hiragana5iroha The mar,er is: i% ro% ha% ni% ho% he% to% etc'
,ata,ana5iroha The mar,er is: #% Q<% HA% 6#% H<% H-% T<% etc'
CSS %imension
The .// dimension properties allo* you to control the height and *idth of an element. 0t
also allo*s you to increase the space bet*een t*o lines.
Examples
0ncrease the space bet*een lines
This e+ample demonstrates ho* to increase the space bet*een the lines.
2html4
2head4
&'small @line5height: +'*cmA
&'big @line5height: +'OcmA
2!style4
2!head4
2body4
2&4
This is a &aragra&h with a standard line5height'
2!&4
2& classF1small14
This is a &aragra&h with a smaller line5height'
2!&4
2& classF1big14
This is a &aragra&h with a bigger line5height'
2!&4
2!body4
2!html4
CSS %imension Properties
The .// dimension properties allo* you to control the height and *idth of an element. 0t
also allo*s you to increase the space bet*een t*o lines.
height Sets the height of an
element
auto
length
%
* 3 E 3
line5height Sets the distance
between lines
normal
number
length
%
* 3 * 3
ma.5height Sets the ma.imum
height of an element
none
length
%
5 3 E =
ma.5width Sets the ma.imum none 5 3 E =
width of an element length
%
min5height Sets the minimum
height of an element
length
%
5 3 E =
min5width Sets the minimum
width of an element
length
%
5 3 E =
width Sets the width of an
element
auto
%
length
* 3 * 3
CSS height Property
The height property sets the height of an element.
Inherited: No
Example
img
@
height: =:+&.
A
Possible Values
'alue &escription
auto The browser calculates the actual height
length /efines the height in &.% cm% etc'
% /efines the height in N of the containing bloc,
CSS line-height Property
The line"height property sets the distance bet*een lines.
Inherited: :es
Example
p
{
line"height: 7.;
!
p
{
line"height: 7;pt
!
p
{
line"height: 7;08
!
Possible Values
'alue &escription
normal Sets a reasonable distance between lines
number Sets a number that will be multi&lied with the current font5si;e to set the
distance between the lines
length Sets a fi.ed distance between the lines
% Sets a distance between the lines in N of the current font si;e
CSS max-height Property
The ma+"height property sets the ma+imum height of an element.
Inherited: No
Example
&
@
ma.5height: 3++&.
A
Possible Values
'alue &escription
none /efines no limit on the ma.imum height allowed for the element
length /efines a ma.imum height for the element
% /efines the ma.imum height for the element in N of the containing bloc,
CSS max-width Property
The ma+"*idth property sets the ma+imum *idth of an element.
Inherited: No
Example
h=
@
ma.5width: D++&.
A
Possible Values
'alue &escription
none /efines no limit on the ma.imum width allowed for the element
length /efines a ma.imum width for the element
% /efines the ma.imum width for the element in N of the containing bloc,
CSS min-height Property
The min"height property sets the minimum height of an element.
Inherited: No
Example
&
@
min5height: 3+&.
A
Possible Values
'alue &escription
length /efines a minimum height for the element
% /efines the minimum height for the element in N of the containing bloc,
CSS min-width Property
The min"*idth property sets the minimum *idth of an element.
Inherited: No
Example
h=
@
min5width: D+&.
A
Possible Values
'alue &escription
length /efines a minimum width for the element
% /efines the minimum width for the element in N of the containing bloc,
CSS width Property
The *idth property sets the *idth of an element.
Inherited: No
Example
img
@
width: 3++N
A
Possible Values
'alue &escription
auto The browser calculates the actual width
% /efines the width in N of the &arent element9s width
length /efines the width in &.% cm% etc'
CSS Classification
The .// classification properties allo* you to specify ho* and *here to display an
element.
Examples
<o* to display an element
This e+ample demonstrates ho* to display an element.
2html4
2head4
& @dis&lay: inlineA
div @dis&lay: noneA
2!style4
2!head4
2body4
2&4A dis&lay &ro&erty with a value of 1inline1 results in2!&4
2&4no distance between two elements'2!&4
2div4And this div section is not dis&layed>2!div4
2!body4
2!html4
, simple use of the float property
=et an image float to the right in a paragraph.
2html4
2head4
img
@
float:right
A
2!style4
2!head4
2body4
2&4#n the &aragra&h below% we have added an image with style
2b4float:right2!b4' The result is that the image will float to the right in the
&aragra&h'2!&4
2&4
2img srcF1logocss'gif1 widthF1OD1 heightF1L*1 !4
This is some te.t' This is some te.t' This is some te.t'
2!&4
2!body4
2!html4
n the paragraph belo*, *e have added an image *ith style float:right. The result is that
the image *ill float to the right in the paragraph.
,n image *ith border and margins that floats to the right in a paragraph
=et an image float to the right in a paragraph. ,dd border and margins to the image.
2html4
2head4
img
@
float:rightC
border:3&. dotted blac,C
margin:+&. +&. 3D&. =+&.C
A
2!style4
2!head4
2body4
2&4
#n the &aragra&h below% the image will float to the right' A dotted blac, border is
added to the image'
We have also added margins to the image to &ush the te.t away from the image:
+ &. margin on the to& and right side% 3D &. margin on the bottom% and =+ &.
margin on the left side of the image'
2!&4
2&4
2img srcF1logocss'gif1 widthF1OD1 heightF1L*1 !4
2!&4
2!body4
2!html4
,n image *ith a caption that floats to the right
=et an image *ith a caption float to the right.
2html4
2head4
div
@
float:rightC
width:3=+&.C
margin:+ + 3D&. =+&.C
&adding:3D&.C
border:3&. solid blac,C
te.t5align:centerC
A
2!style4
2!head4
2body4
2div4
2img srcF1logocss'gif1 widthF1OD1 heightF1L*1 !42br !4
(SS is fun>
2!div4
2&4
2!&4
2&4
#n the &aragra&h above% the div element is 3=+ &i.els wide and it contains the
image'
The div element will float to the right'
Margins are added to the div to &ush the te.t away from the div'
Borders and &adding are added to the div to frame in the &icture and the ca&tion'
2!&4
2!body4
2!html4
=et the first letter of a paragraph float to the left
=et the first letter of a paragraph float to the left and style the letter.
2html4
2head4
s&an
@
float:leftC
width:+'PemC
font5si;e:*++NC
font5family:algerian%courierC
line5height:L+NC
A
2!style4
2!head4
2body4
2&4
2s&an4T2!s&an4his is some te.t'
This is some te.t' This is some te.t'
2!&4
2&4
#n the &aragra&h above% the first letter of the te.t is embedded in a s&an element'
The s&an element has a width that is +'P times the si;e of the current font'
The font5si;e of the s&an element is *++N 7Buite large8 and the line5height is
L+N'
The font of the letter in the s&an will be in 1Algerian1'
2!&42!body42!html4
.reating a hori>ontal menu
?se float *ith a list of hyperlinks to create a hori>ontal menu.
2html4
2head4
ul
@
float:leftC
width:3++NC
&adding:+C
margin:+C
list5style5ty&e:noneC
A
a
@
float:leftC
width:EemC
te.t5decoration:noneC
color:whiteC
bac,ground5color:&ur&leC
&adding:+'=em +'EemC
border5right:3&. solid whiteC
A
a:hover @bac,ground5color:Hff::++A
li @dis&lay:inlineA
2!style4
2!head4
2body4
2ul4
2li42a hrefF1H14in, one2!a42!li4
2li42a hrefF1H14in, two2!a42!li4
2li42a hrefF1H14in, three2!a42!li4
2li42a hrefF1H14in, four2!a42!li4
2!ul4
2&4
0n the e+ample above, *e let the ul element and the a element float to the left.
The li elements *ill be displayed as inline elements &no line break before or after the
element). This forces the list to be on one line.
The ul element has a *idth of 7008 and each hyperlink in the list has a *idth of %em &%
times the si>e of the current font).
6e add some colors and borders to make it more fancy.
2!&4
2!body4
2!html4
.reating a homepage *ithout tables
?se float to create a homepage *ith a header, footer, left content and main content.
2html4
2head4
div'container
@
width:3++NC
margin:+&.C
border:3&. solid grayC
line5height:3D+NC
A
div'header%div'footer
@
&adding:+'DemC
color:whiteC
bac,ground5color:grayC
clear:leftC
A
h3'header
@
&adding:+C
margin:+C
A
div'left
@
float:leftC
width:3E+&.C
margin:+C
&adding:3emC
A
div'content
@
margin5left:3O+&.C
border5left:3&. solid grayC
&adding:3emC
A
2!style4
2!head4
2body4
2div classF1container14
2div classF1header142h3 classF1header14W:Schools'com2!h342!div4
2div classF1left142&416ever increase% beyond what is necessary% the number of
entities reBuired to e.&lain anything'1 William of <c,ham 73=LD53:*O82!&42!div4
2div classF1content14
2h=4Gree Web Building Tutorials2!h=4
2&4At W:Schools you will find all the Web5building tutorials you need%
from basic HTM and "HTM to advanced "M% "S% Multimedia and WA0'2!&4
2&4W:Schools 5 The argest Web /evelo&ers Site <n The 6et>2!&42!div4
2div classF1footer14(o&yright 3OOO5=++D by Qefsnes /ata'2!div4
2!div4
2!body4
2!html4
9osition:relative
This e+ample demonstrates ho* to position an element relative to its normal position.
2html4
2head4
h='&osJleft
@
&osition:relativeC
left:5=+&.
A
h='&osJright
@
&osition:relativeC
left:=+&.
A
2!style4
2!head4
2body4
2h=4This is a heading in normal &osition2!h=4
2h= classF1&osJleft14This heading is moved left to its normal &osition2!h=4
2h= classF1&osJright14This heading is moved right to its normal &osition2!h=4
2&4Qelative &ositioning moves an element Q-AT#M- to its original &osition'2!&4
2&4The style 1left:5=+&.1 subtracts =+ &i.els from the element9s original left
&osition'2!&4
2&4The style 1left:=+&.1 adds =+ &i.els to the element9s original left &osition'2!&4
2!body4
2!html4
9osition:absolute
This e+ample demonstrates ho* to position an element using an absolute value.
2html4
2head4
h='&osJabs
@
&osition:absoluteC
left:3++&.C
to&:3D+&.
A
2!style4
2!head4
2body4
2h= classF1&osJabs14This is a heading with an absolute &osition2!h=4
2&4With absolute &ositioning% an element can be &laced anywhere on a &age'
The heading below is &laced 3++&. from the left of the &age and 3D+&. from the
to& of the &age'2!&4
2!body4
2!html4
<o* to make an element invisible
This e+ample demonstrates ho* to make an element invisible. @o you *ant the element
to sho* or notA
2html4
2head4
h3'visible @visibility:visibleA
h3'invisible @visibility:hiddenA
2!style4
2!head4
2body4
2h3 classF1visible14This is a visible heading2!h34
2h3 classF1invisible14This is an invisible heading2!h34
2!body4
2!html4
.hange the cursor
This e+ample demonstrates ho* to change the cursor.
2html4
2body4
2&4Move the mouse over the words to see the cursor change:2!&4
2s&an styleF1cursor:auto14
Auto2!s&an42br !4
2s&an styleF1cursor:crosshair14
(rosshair2!s&an42br !4
2s&an styleF1cursor:default14
/efault2!s&an42br !4
2s&an styleF1cursor:&ointer14
0ointer2!s&an42br !4
2s&an styleF1cursor:move14
Move2!s&an42br !4
2s&an styleF1cursor:e5resi;e14
e5resi;e2!s&an42br !4
2s&an styleF1cursor:ne5resi;e14
ne5resi;e2!s&an42br !4
2s&an styleF1cursor:nw5resi;e14
nw5resi;e2!s&an42br !4
2s&an styleF1cursor:n5resi;e14
n5resi;e2!s&an42br !4
2s&an styleF1cursor:se5resi;e14
se5resi;e2!s&an42br !4
2s&an styleF1cursor:sw5resi;e14
sw5resi;e2!s&an42br !4
2s&an styleF1cursor:s5resi;e14
s5resi;e2!s&an42br !4
2s&an styleF1cursor:w5resi;e14
w5resi;e2!s&an42br !4
2s&an styleF1cursor:te.t14
te.t2!s&an42br !4
2s&an styleF1cursor:wait14
wait2!s&an42br !4
2s&an styleF1cursor:hel&14
hel&2!s&an4
2!body4
2!html4
CSS Classification Properties
The .// classification properties allo* you to control ho* to display an element, set
*here an image *ill appear in another element, position an element relative to its normal
position, position an element using an absolute value, and ho* to control the visibility of
an element.
clear Sets the sides of an
element where other
floating elements are
left
right
both
* 3 * 3
not allowed none
cursor S&ecifies the ty&e of
cursor to be dis&layed
url
auto
crosshair
default
&ointer
move
e5resi;e
ne5resi;e
nw5resi;e
n5resi;e
se5resi;e
sw5resi;e
s5resi;e
w5resi;e
te.t
wait
hel&
* 3 E =
dis&lay Sets how!if an element
is dis&layed
none
inline
bloc,
list5item
run5in
com&act
mar,er
table
inline5table
table5row5grou&
table5header5grou&
table5footer5grou&
table5row
table5column5grou&
table5column
table5cell
table5ca&tion
* 3 * 3
float Sets where an image
or a te.t will a&&ear in
another element
left
right
none
* 3 * 3
&osition 0laces an element in a
static% relative% absolute
or fi.ed &osition
static
relative
absolute
fi.ed
* 3 * =
visibility Sets if an element visible * 3 E =
should be visible or
invisible
hidden
colla&se
CSS clear Property
0mage and te+t elements that appear in another element are called floating elements. The
clear property sets the sides of an element *here other floating elements are not allo*ed.
Note: This property does not al*ays *ork as e+pected if it is used along *ith the "float"
property.
Inherited: No
Example
h=
@
clear: right
A
address
{
clear: both
!
Possible Values
'alue &escription
left 6o floating elements allowed on the left side
right 6o floating elements allowed on the right side
both 6o floating elements allowed on either the left or the right side
none Allows floating elements on both sides
CSS cursor Property
The cursor property specifies the type of cursor to be displayed *hen pointing on an
element.
Inherited: :es
Example
h=
@
cursor: crosshair
A
p
{
cursor : url&"first.cur"), url&"second.cur"), pointer
!
Possible Values
'alue &escription
url The url of a custom cursor to be used.
Note: ,l*ays define a generic cursor at the end of the list in case
none of the url"defined cursors can be used
default The default cursor 7often an arrow8
auto The browser sets a cursor
crosshair The cursor render as a crosshair
&ointer The cursor render as a &ointer 7a hand8 that indicates a lin,
move The cursor indicates something that should be moved
e5resi;e The cursor indicates that an edge of a bo. is to be moved
right 7east8
ne5resi;e The cursor indicates that an edge of a bo. is to be moved u&
and right 7north!east8
nw5resi;e The cursor indicates that an edge of a bo. is to be moved u&
and left 7north!west8
n5resi;e The cursor indicates that an edge of a bo. is to be moved u&
7north8
se5resi;e The cursor indicates that an edge of a bo. is to be moved
down and right 7south!east8
sw5resi;e The cursor indicates that an edge of a bo. is to be moved
down and left 7south!west8
s5resi;e The cursor indicates that an edge of a bo. is to be moved
down 7south8
w5resi;e The cursor indicates that an edge of a bo. is to be moved
left 7west8
te.t The cursor indicates te.t
wait The cursor indicates that the &rogram is busy 7often a watch
or an hourglass8
hel& The cursor indicates that hel& is available 7often a Buestion
mar, or a balloon8
CSS display Property
The display property sets ho*-if an element is displayed.
Inherited: No
Example
p
{
display: block
!
li
{
display: list"item
!
table
{
display: table
!
td, th
{
display: table"cell
!
Possible Values
'alue &escription
none The element will not be dis&layed
bloc, The element will be dis&layed as a bloc,5level element%
with a line brea, before and after the element
inline The element will be dis&layed as an inline element% with
no line brea, before or after the element
list5item The element will be dis&layed as a list
run5in The element will be dis&layed as bloc,5level or inline
element de&ending on conte.t
com&act The element will be dis&layed as bloc,5level or inline
element de&ending on conte.t
mar,er
table The element will be dis&layed as a bloc, table 7li,e
2table48% with a line brea, before and after the table
inline5table The element will be dis&layed as an inline table 7li,e
2table48% with no line brea, before or after the table
table5row5grou& The element will be dis&layed as a grou& of one or more
rows 7li,e 2tbody48
table5header5grou& The element will be dis&layed as a grou& of one or more
rows 7li,e 2thead48
table5footer5grou& The element will be dis&layed as a grou& of one or more
rows 7li,e 2tfoot48
table5row The element will be dis&layed as a table row 7li,e 2tr48
table5column5grou& The element will be dis&layed as a grou& of one or more
columns 7li,e 2colgrou&48
table5column The element will be dis&layed as a column of cells 7li,e
2col48
table5cell The element will be dis&layed as a table cell 7li,e 2td4
and 2th48
table5ca&tion The element will be dis&layed as a table ca&tion 7li,e
2ca&tion48
CSS float Property
The float property sets *here an image or a te+t *ill appear in another element.
Note: 0f there is too little space on a line for the floating element, it *ill 5ump do*n on
the ne+t line, and continue until a line has enough space.
Note: .ontent, background, and borders of inline elements should go in front of the float.
Background and borders of a block element should go behind the float, but the content of
the block element should go in front of the float.
Inherited: No
Example
img
@
float: left
A
Possible Values
'alue &escription
left The image or te.t moves to the left in the &arent element
right The image or te.t moves to the right in the &arent element
none The image or the te.t will be dis&layed $ust where it occurs in the te.t
CSS position Property
The position property places an element in a static, relative, absolute or fi+ed position.
Inherited: No
Example
h3
@
&osition:absoluteC
left:3++&.C
to&:3D+&.C
A
Possible Values
'alue &escription
static The element is &laced in a normal &osition 7according to the normal
flow8' With the value of 1static1 we do not use the 1left1 and 1to&1
&ro&erties
relative Moves an element relative to its normal &osition% so 1left:=+1 adds =+
&i.els to the element9s -GT &osition
absolute With a value of 1absolute1 the element can be &laced anywhere on a
&age' The element9s &osition is s&ecified with the 1left1% 1to&1% 1right1%
and 1bottom1 &ro&erties
fi.ed
CSS &isibility Property
The visibility property sets if an element should be visible or invisible.
Note: 0nvisible elements takes up space on the page. ?se the "display" property to create
invisible elements that do not take up space.
Note: This property is used *ith scripts to create @ynamic <TC=.
Inherited: No
Example
&
@
visibility: visible
A
Possible Values
'alue &escription
visible The element is visible
hidden The element is invisible
colla&se When used in table elements% this value removes a row or column% but it
does not affect the table layout' The s&ace ta,en u& by the row or
column will be available for other content' #f this value is used on other
elements% it renders as 1hidden1
CSS Positioning
The .// positioning properties allo*s you to position an element.
Examples
9osition:relative
This e+ample demonstrates ho* to position an element relative to its normal position.
2html4
2head4
h='&osJleft
@
&osition:relativeC
left:5=+&.
A
h='&osJright
@
&osition:relativeC
left:=+&.
A
2!style4
2!head4
2body4
2h=4This is a heading in normal &osition2!h=4
2h= classF1&osJleft14This heading is moved left to its normal &osition2!h=4
2h= classF1&osJright14This heading is moved right to its normal &osition2!h=4
2&4Qelative &ositioning moves an element Q-AT#M- to its original &osition'2!&4
2&4The style 1left:5=+&.1 subtracts =+ &i.els from the element9s original left
&osition'2!&4
2&4The style 1left:=+&.1 adds =+ &i.els to the element9s original left &osition'2!&4
2!body4
2!html4
9osition:absolute
This e+ample demonstrates ho* to position an element using an absolute value.
2html4
2head4
h='&osJabs
@
&osition:absoluteC
left:3++&.C
to&:3D+&.
A
2!style4
2!head4
2body4
2h= classF1&osJabs14This is a heading with an absolute &osition2!h=4
2&4With absolute &ositioning% an element can be &laced anywhere on a &age'
The heading below is &laced 3++&. from the left of the &age and 3D+&. from the
to& of the &age'2!&4
2!body4
2!html4
/et the shape of an element
This e+ample demonstrates ho* to set the shape of an element. The element is clipped
into this shape, and displayed.
2html4
2head4
img
@
&osition:absoluteC
cli&:rect7+&. D+&. =++&. +&.8
A
2!style4
2!head4
2body4
2&4The cli& &ro&erty is here cutting an image:2!&4
2&42img borderF1+1 srcF1boo,as&=+'gif1 widthF13=+1 heightF13D3142!&4
2!body4
2!html4
3verflo*
This e+ample demonstrates ho* to set the overflo* property to specify *hat should
happen *hen an element#s content is too big to fit in a specified area.
2html4
2head4
div
@
bac,ground5color:H++GGGGC
width:3D+&.C
height:3D+&.C
overflow: scroll
A
2!style4
2!head4
2body4
2&4The overflow &ro&erty decides what to do if the content inside an element
e.ceeds the given width and height &ro&erties'2!&4
2div4
You can use the overflow &ro&erty when you want to have better control of the
layout' Try to change the overflow &ro&erty to: visible% hidden% auto% or inherit and
see what ha&&ens' The default value is visible'
2!div4
2!body4
2!html4
Dertical align an image
This e+ample demonstrates ho* to vertical align an image in a te+t.
2html4
2head4
img'to& @vertical5align:te.t5to&A
img'bottom @vertical5align:te.t5bottomA
2!style4
2!head4
2body4
2&4
This is an
2img classF1to&1 borderF1+1
srcF1logocss'gif1 widthF1OD1 heightF1L*1 !4
image inside a &aragra&h'
2!&4
2&4
This is an
2img classF1bottom1 borderF1+1
srcF1logocss'gif1 widthF1OD1 heightF1L*1 !4
image inside a &aragra&h'
2!&4
2!body4
2!html4
E"inde+
E"inde+ can be used to place an element "behind" another element.
2html4
2head4
img'.
@
&osition:absoluteC
left:+&.C
to&:+&.C
;5inde.:53
A
2!style4
2!head4
2body4
2h34This is a Heading2!h34
2img classF1.1 srcF1bulbon'gif1 widthF13++1 heightF13L+14
2&4/efault ;5inde. is +' T5inde. 53 has lower &riority'2!&4
2!body4
2!html4
E"inde+
The elements in the e+ample above have no* changed their E"inde+.
2html4
2head4
img'.
@
&osition:absoluteC
left:+&.C
to&:+&.C
;5inde.:3
A
2!style4
2!head4
2body4
2h34This is a Heading2!h34
2img classF1.1 srcF1bulbon'gif1 widthF13++1 heightF13L+14
2&4/efault ;5inde. is +' T5inde. 3 has higher &riority'2!&4
2!body4
2!html4
CSS Positioning Properties
The .// positioning properties allo* you to specify the left, right, top, and bottom
position of an element. 0t also allo*s you to set the shape of an element, place an element
behind another, and to specify *hat should happen *hen an element#s content is too big
to fit in a specified area.
bottom Sets how far the
bottom edge of an
element is above!below
the bottom edge of the
&arent element
auto
%
length
D 3 E =
cli& Sets the sha&e of an
element' The element
is cli&&ed into this
sha&e% and dis&layed
shape
auto
* 3 E =
left Sets how far the left
edge of an element is
to the right!left of the
left edge of the &arent
element
auto
%
length
* 3 * =
overflow Sets what ha&&ens if
the content of an
element overflow its
area
visible
hidden
scroll
auto
* 3 E =
&osition 0laces an element in a
static% relative% absolute
or fi.ed &osition
static
relative
absolute
fi.ed
* 3 * =
right Sets how far the right
to the left!right of the
right edge of the &arent
element
auto
%
length
D 3 E =
to& Sets how far the to&
above!below the to&
edge of the &arent
element
auto
%
length
* 3 * =
vertical5align Sets the vertical
alignment of an
element
baseline
sub
su&er
to&
te.t5to&
middle
bottom
te.t5bottom
length
%
* 3 * 3
;5inde. Sets the stac, order of
an element
auto
number
* 3 E =
CSS bottom Property
The bottom property specifies the bottom edge of an element.
Note: 0f the "position" property has a value of "static", the "bottom" property has no
effect.
Inherited: No
Example
This e+ample sets the bottom edge of the paragraph to '0 p+ abo&e the bottom edge of the
*indo*:
p
{
position: absoluteF
bottom: '0p+
!
This e+ample sets the bottom edge of the paragraph to '0 p+ below the bottom edge of the
*indo*:
p
{
position: absoluteF
bottom: "'0p+
!
Possible Values
'alue &escription
auto ets the browser calculate the bottom &osition
% Sets the bottom &osition in N from the bottom edge of the window
length Sets the bottom &osition in &.% cm% etc' from the bottom edge of the
window' 6egative values are allowed
CSS clip Property
The clip property sets the shape of an element.
6hat happens if an image is larger than the element it goes insideA " The "clip" property
lets you specify the dimensions of an element that should be visible, and the element is
clipped into this shape, and displayed.
Note: This property can not be used for elements *ith an "overflo*" property set to
"visible".
Inherited: No
Example
img
{
clip: rect&70p+, (p+, 70p+, (p+)
!
Possible Values
'alue &escription
shape Sets the sha&e of the element' The valid sha&e value is: rect 7top, right,
bottom, left8
auto The browser sets the sha&e of the element
CSS left Property
The left property specifies the left edge of an element.
Note: 0f the "position" property has a value of "static", the "left" property has no effect.
Inherited: No
Example
This e+ample sets the left edge of the paragraph '0 p+ to the right of the left edge of the
*indo*:
p
{
position: absoluteF
left: '0p+
!
This e+ample sets the left edge of the paragraph '0 p+ to the left of the left edge of the
*indo*:
p
{
position: absoluteF
left: "'0p+
!
Possible Values
'alue &escription
auto ets the browser calculate the left &osition
% Sets the left &osition in N from the left edge of the window
length Sets the left &osition in &.% cm% etc' from the left edge of the window'
6egative values are allowed
CSS o&erflow Property
The overflo* property sets *hat happens if the content of an element overflo* its area.
Inherited: No
Example
p
{
overflo*: scroll
!
Possible Values
'alue &escription
visible The content is not cli&&ed' #t renders outside the element
hidden The content is cli&&ed% but the browser does not dis&lay a scroll5bar to
see the rest of the content
scroll The content is cli&&ed% but the browser dis&lays a scroll5bar to see the
rest of the content
auto #f the content is cli&&ed% the browser should dis&lay a scroll5bar to see the
rest of the content
CSS position Property
The position property places an element in a static, relative, absolute or fi+ed position.
Inherited: No
Example
h3
@
&osition:absoluteC
left:3++&.C
to&:3D+&.C
A
Possible Values
'alue &escription
static The element is &laced in a normal &osition 7according to the normal
flow8' With the value of 1static1 we do not use the 1left1 and 1to&1
&ro&erties
relative Moves an element relative to its normal &osition% so 1left:=+1 adds =+
&i.els to the element9s -GT &osition
absolute With a value of 1absolute1 the element can be &laced anywhere on a
&age' The element9s &osition is s&ecified with the 1left1% 1to&1% 1right1%
and 1bottom1 &ro&erties
fi.ed
CSS right Property
The right property specifies the right edge of an element.
Note: 0f the "position" property has a value of "static", the "right" property has no effect.
Inherited: No
Example
This e+ample sets the right edge of the paragraph '0 p+ to the left of the right edge of the
*indo*:
p
{
position: absoluteF
right: '0p+
!
This e+ample sets the right edge of the paragraph '0 p+ to the right of the right edge of
the *indo*:
p
{
position: absoluteF
right: "'0p+
!
Possible Values
'alue &escription
auto ets the browser calculate the right &osition
% Sets the right &osition in N from the right edge of the window
length Sets the right &osition in &.% cm% etc' from the right edge of the window'
CSS top Property
The top property specifies the top edge of an element.
Note: 0f the "position" property has a value of "static", the "top" property has no effect.
Inherited: No
Example
This e+ample sets the top edge of the paragraph '0 p+ below the top edge of the *indo*:
p
{
position: absoluteF
top: '0p+
!
This e+ample sets the top edge of the paragraph '0 p+ abo&e the top edge of the *indo*:
p
{
position: absoluteF
top: "'0p+
!
Possible Values
'alue &escription
auto ets the browser calculate the to& &osition
% Sets the to& &osition in N from the to& edge of the window
length Sets the to& &osition in &.% cm% etc' from the to& edge of the window'
CSS &ertical-align Property
The vertical"align property sets the vertical alignment of an element.
Inherited: No
Example
img
{
vertical"align: bottom
!
Possible Values
'alue &escription
baseline The element is &laced on the baseline of the &arent element
sub Aligns the element as it was subscri&t
su&er Aligns the element as it was su&erscri&t
to& The to& of the element is aligned with the to& of the tallest
element on the line
te.t5to& The to& of the element is aligned with the to& of the &arent
element9s font
middle The element is &laced in the middle of the &arent element
bottom The bottom of the element is aligned with the lowest element
on the line
te.t5bottom The bottom of the element is aligned with the bottom of the
&arent element9s font
length
% Aligns the element in a N value of the 1line5height1 &ro&erty'
CSS '-index Property
The >"inde+ property sets the stack order of an element. ,n element *ith greater stack
order is al*ays in front of another element *ith lo*er stack order.
Note: 1lements can have negative stack orders.
Note: E"inde+ only *orks on elements that have been positioned &eg position:absoluteF)4
Inherited: No
Example
img
{
>"inde+: "7
!
Possible Values
'alue &escription
auto The stac, order is eBual to its &arents
number Sets the stac, order of the element
CSS Pseudo-classes
.// pseudo"classes are used to add special effects to some selectors.
Examples
<yperlink
This e+ample demonstrates ho* to add different colors to a hyperlink in a document.
2html4
2head4
a:lin, @color: HGG++++A
a:visited @color: H++GG++A
a:hover @color: HGG++GGA
a:active @color: H++++GGA
2!style4
2!head4
2body4
2&42b42a hrefF1default'as&1 targetF1Jblan,14This is a lin,2!a42!b42!&4
2&42b46ote:2!b4 a:hover MKST come after a:lin, and a:visited in the (SS
definition in order to be effective>>2!&4
2&42b46ote:2!b4 a:active MKST come after a:hover in the (SS definition in
order to be effective>>2!&4
2!body4
2!html4
<yperlink '
This e+ample demonstrates ho* to add other styles to hyperlinks.
2html4
2head4
a'one:lin, @color: Hff++++A
a'one:visited @color: H++++ffA
a'one:hover @color: Hffcc++A
a'two:lin, @color: Hff++++A
a'two:visited @color: H++++ffA
a'two:hover @font5si;e: 3D+NA
a'three:lin, @color: Hff++++A
a'three:visited @color: H++++ffA
a'three:hover @bac,ground: HEEffEEA
a'four:lin, @color: Hff++++A
a'four:visited @color: H++++ffA
a'four:hover @font5family: monos&aceA
a'five:lin, @color: Hff++++C te.t5decoration: noneA
a'five:visited @color: H++++ffC te.t5decoration: noneA
a'five:hover @te.t5decoration: underlineA
2!style4
2!head4
2body4
2&4Mouse over the lin,s to see them change layout'2!&4
2&42b42a classF1one1 hrefF1default'as&1 targetF1Jblan,14This lin, changes
color2!a42!b42!&4
2&42b42a classF1two1 hrefF1default'as&1 targetF1Jblan,14This lin, changes font5
si;e2!a42!b42!&4
2&42b42a classF1three1 hrefF1default'as&1 targetF1Jblan,14This lin, changes
bac,ground5color2!a42!b42!&4
2&42b42a classF1four1 hrefF1default'as&1 targetF1Jblan,14This lin, changes
font5family2!a42!b42!&4
2&42b42a classF1five1 hrefF1default'as&1 targetF1Jblan,14This lin, changes te.t5
decoration2!a42!b42!&4
2!body4
2!html4
:first"child &does not *ork in 01)
This e+ample demonstrates the use of the :first"child pseudo"class.
2html4
2head4
a:first5child
@
te.t5decoration:none
A
2!style4
2!head4
2body4
2&4The :first5child &seudo5class is used to define a s&ecial style for an element
that is the first child of another element'2!&4
2&4Misit 2a hrefF1htt&:!!www'w:schools'com14W:Schools2!a4 and learn (SS>
Misit 2a hrefF1htt&:!!www'w:schools'com14W:Schools2!a4 and learn HTM>2!&4
2!body4
2!html4
:lang &does not *ork in 01)
This e+ample demonstrates the use of the :lang pseudo"class.
2html4
2head4
B:lang7no8
@
Buotes: 1U1 1U1
A
2!style4
2!head4
2body4
2&4The :lang &seudo5class allows you to define s&ecial rules for different
languages' #n the e.am&le below% the :lang class defines the ty&e of Buotation
mar,s for B elements with a lang attribute with a value of 1no1:2!&4
2&4Some te.t 2B langF1no14A Buote in a &aragra&h2!B4 Some te.t'2!&4
2!body4
2!html4
CSS Pseudo-elements
.// pseudo"elements are used to add special effects to some selectors.
Examples
Cake the first letter special
This e+ample demonstrates ho* to add a special effect to the first letter of a te+t.
2html4
2head4
&:first5letter
@
color: Hff++++C
font5si;e:..5large
A
2!style4
2!head4
2body4
2&4
You can use the :first5letter &seudo5element to add a s&ecial effect to the first
letter of a te.t>
2!&4
2!body4
2!html4
Cake the first line special
This e+ample demonstrates ho* to add a special effect to the first line of a te+t.
2html4
2head4
&:first5line
@
color: Hff++++C
font5variant: small5ca&s
A
2!style4
2!head4
2body4
2&4
You can use the :first5line &seudo5element to add a s&ecial effect to the first line
of a te.t>
2!&4
2!body4
2!html4
Syntax
The synta+ of pseudo"classes:
selector:pseudo-class {property: value}
.// classes can also be used *ith pseudo"classes:
selector.class:pseudo-class {property: value}
(nchor Pseudo-classes
, link that is active, visited, unvisited, or *hen you mouse over a link can all be
displayed in different *ays in a .//"supporting bro*ser:
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
Note: a:hover C?/T come after a:link and a:visited in the .// definition in order to be
effective44
Note: a:active C?/T come after a:hover in the .// definition in order to be effective44
Note: 9seudo"class names are not case"sensitive.
Pseudo-classes and CSS Classes
9seudo"classes can be combined *ith .// classes:
a.red:visited {color: #FF0000}
<a class=red hre!=css"synta#.asp$%&& &ynta#</a$
0f the link in the e+ample above has been visited, it *ill be displayed in red.
CSS) - *he :first-child Pseudo-class
The :first"child pseudo"class matches a specified element that is the first child of another
element.
0n this e+ample, the selector matches any p element that is the first child of a di&
element, and indents the first paragraph inside a div element:
div $ p:!irst-child
{
te#t-indent:'(p#
}
This selector *ill match the first paragraph inside the div in the follo*ing <TC=:
<div$
<p$
First para)raph in div.
*his para)raph +ill ,e indented.
</p$
<p$
&econd para)raph in div.
*his para)raph +ill not ,e indented.
</p$
</div$
but it *ill not match the paragraph in this <TC=:
<div$
<h-$.eader</h-$
<p$
*he !irst para)raph inside the div.
*his para)raph +ill not ,e indented.
</p$
</div$
0n this e+ample, the selector matches any em element that is the first child of a p
element, and sets the font"*eight to bold for the first em inside a p element:
p:!irst-child em
{
!ont-+ei)ht:,old
}
or e+ample, the em in the <TC= belo* is the first child of the paragraph:
<p$/ am a <em$stron)</em$ man.</p$
0n this e+ample, the selector matches any a element that is the first child of any
element, and sets the te+t"decoration to none:
a:!irst-child
{
te#t-decoration:none
}
or e+ample, the first a in the <TC= belo* is the first child of the paragraph and *ill not
be underlined. But the second a in the paragraph is not the first child of the paragraph and
*ill be underlined:
<p$
0isit <a hre!=http://+++.+1schools.com$21&chools</a$
and learn %&&3
0isit <a hre!=http://+++.+1schools.com$21&chools</a$
and learn .*453
</p$
CSS) - *he :lang Pseudo-class
The :lang pseudo"class allo*s you to define special rules for different languages. 0n the
e+ample belo*, the :lang class defines the type of Guotation marks for G elements *ith a
lang attribute *ith a value of "no":
<html$
<head$
<style type=te#t/css$
6:lan)7no8
{
6uotes: 9 9
}
</style$
</head$
<,ody$
<p$&ome te#t <6 lan)=no$: 6uote in a para)raph</6$
&ome te#t.</p$
</,ody$
</html$
Pseudo-classes
%seudo*class %urpose (E ) W$C
:active Adds s&ecial style to an activated element * 3 L 3
:focus Adds s&ecial style to an element while the
element has focus
5 5 5 =
:hover Adds s&ecial style to an element when you
mouse over it
* 3 P 3
:lin, Adds s&ecial style to an unvisited lin, : 3 * 3
:visited Adds s&ecial style to a visited lin, : 3 * 3
:first5child Adds s&ecial style to an element that is the
first child of some other element
3 P =
:lang Allows the author to s&ecify a language to
use in a s&ecified element
3 L =
CSS Pseudo-elements
.// pseudo"elements are used to add special effects to some selectors.
Examples
Cake the first letter special
This e+ample demonstrates ho* to add a special effect to the first letter of a te+t.
Cake the first line special
This e+ample demonstrates ho* to add a special effect to the first line of a te+t.
Syntax
The synta+ of pseudo"elements:
selector:pseudo-element {property: value}
.// classes can also be used *ith pseudo"elements:
selector.class:pseudo-element {property: value}
*he :first-line Pseudo-element
The "first"line" pseudo"element is used to add special styles to the first line of the te+t in
a selector:
p {!ont-si;e: -'pt}
p:!irst-line {color: #0000FF< !ont-variant: small-caps}
<p$&ome te#t that ends up on t+o or more lines</p$
The output could be something like this:
/3C1 T1HT T<,T 1N@/
up on t*o or more lines
0n the e+ample above the bro*ser displays the first line formatted according to the "first"
line" pseudo element. "here the bro*ser breaks the line depends on the si>e of the
bro*ser *indo*.
Note: The "first"line" pseudo"element can only be used *ith block"level elements.
Note: The follo*ing properties apply to the "first"line" pseudo"element:
font &ro&erties
color &ro&erties
word5s&acing
letter5s&acing
te.t5decoration
vertical5align
te.t5transform
line5height
clear
*he :first-letter Pseudo-element
The "first"letter" pseudo"element is used to add special style to the first letter of the te+t
in a selector:
p {!ont-si;e: -'pt}
p:!irst-letter {!ont-si;e: '00=< !loat: le!t}
<p$*he !irst +ords o! an article.</p$
III
J he first
J *ords of an
article.
Note: The "first"letter" pseudo"element can only be used *ith block"level elements.
Note: The follo*ing properties apply to the "first"letter" pseudo" element:
font &ro&erties
color &ro&erties
margin &ro&erties
&adding &ro&erties
border &ro&erties
te.t5decoration
vertical5align 7only if 9float9 is 9none98
te.t5transform
line5height
float
clear
Pseudo-elements and CSS Classes
9seudo"elements can be combined *ith .// classes:
p.article:!irst-letter {color: #FF0000}
<p class=article$: para)raph in an article</p$
The e+ample above *ill make the first letter of all paragraphs *ith classK"article" red.
ultiple Pseudo-elements
/everal pseudo"elements can be combined:
p {!ont-si;e: -'pt}
p:!irst-letter {color: #FF0000< !ont-si;e: '00=}
p:!irst-line {color: #0000FF}
<p$*he !irst +ords o! an article</p$
III
J he first
J *ords of an
article.
0n the e+ample above the first letter of the paragraph *ill be red *ith a font si>e of ';pt.
The rest of the first line *ould be blue *hile the rest of the paragraph *ould be the
default color.
CSS) - *he :before Pseudo-element
The ":before" pseudo"element can be used to insert some content before an element.
The style belo* *ill play a sound before each occurrence of a header one element.
h7:before
{
content: url&beep.*av)
!
CSS) - *he :after Pseudo-element
The ":after" pseudo"element can be used to insert some content after an element.
The style belo* *ill play a sound after each occurrence of a header one element.
h7:after
{
content: url&beep.*av)
!
Pseudo-elements
%seudo*element %urpose (E ) W$C
:first5letter Adds s&ecial style to the first letter of a te.t D 3 L 3
:first5line Adds s&ecial style to the first line of a te.t D 3 L 3
:before #nserts some content before an element 3'D L =
:after #nserts some content after an element 3'D L =
CSS) edia *ypes
Cedia Types allo* you to specify ho* documents *ill be presented in different media.
The document can be displayed differently on the screen, on the paper, *ith an aural
bro*ser, etc.
edia *ypes
/ome .// properties are only designed for a certain media. or e+ample the "voice"
family" property is designed for aural user agents. /ome other properties can be used for
different media types. or e+ample, the "font"si>e" property can be used for both screen
and print media, but perhaps *ith different values. , document usually needs a larger
font"si>e on a screen than on paper, and sans"serif fonts are easier to read on the screen,
*hile serif fonts are easier to read on paper.
*he +media ,ule
The Lmedia rule allo*s different style rules for different media in the same style sheet.
The style in the e+ample belo* tells the bro*ser to display a 7; pi+els Derdana font on
the screen. But if the page is printed, it *ill be in a 70 pi+els Times font. Notice that the
font"*eight is set to bold, both on screen and on paper:
<html$
<head$
<style$
>media screen
{
p.test {!ont-!amily:verdana?sans-seri!< !ont-si;e:-@p#}
}
>media print
{
p.test {!ont-!amily:times?seri!< !ont-si;e:-0p#}
}
>media screen?print
{
p.test {!ont-+ei)ht:,old}
}
</style$
</head$
<,ody$
....
</,ody$
</html$
See it yourself - 0f you are using Co>illa-irefo+ or 01 (M and print this page, you *ill
see that the paragraph under "Cedia Types" *ill be displayed in another font, and have a
smaller font si>e than the rest of the te+t.
%ifferent edia *ypes
Note: The media type names are not case"sensitive.
Media Type &escription
All Ksed for all media ty&e devices
aural Ksed for s&eech and sound synthesi;ers
braille Ksed for braille tactile feedbac, devices
embossed Ksed for &aged braille &rinters
handheld Ksed for small or handheld devices
&rint Ksed for &rinters
&ro$ection Ksed for &ro$ected &resentations% li,e slides
screen Ksed for com&uter screens
tty Ksed for media using a fi.ed5&itch character grid% li,e telety&es
and terminals
tv Ksed for television5ty&e devices
Now .ou /now CSS0 "hat1s Next2
The ne+t step is to learn H<TC= and Nava/cript.
34*$
H<TC= is the "ne*" <TC=. The latest <TC= recommendation is <TC= ;.07. This is
the last and final <TC= version.
<TC= *ill be replaced by H<TC=, *hich is a stricter and cleaner version of <TC=.
0f you *ant to learn more about H<TC=, please visit our H<TC= tutorial.
5a&aScript
Nava/cript can make your *eb site more dynamic.
, static *eb site is nice *hen you 5ust *ant to sho* flat content, but a dynamic *eb site
can react to events and allo* user interaction.
Nava/cript is the most popular scripting language on the internet and it *orks *ith all
ma5or bro*sers.
0f you *ant to learn more about Nava/cript, please visit our Nava/cript tutorial.

Css Tutorial

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Css Tutorial

Enviado por

Direitos autorais:

Formatos disponíveis

What You Should Already Know

Você também pode gostar