Css (Cascadedstylesheet) : I NLI Nemethod

CSS(
CASCADEDSTYLESHEET)
HTMLi susedt opr ovi
det hecont entsofawebpage,whi l
eCSSi susedtohandl ehow theyare
presentedont hepage.Themanneri nwhi chthepresentati
onofanHTMLel ementisdonei n
writt
eni nwhati scal edast
l yl
er ule.Int hewr iti
ngoft heserules,att
ri
butesandval ueswillbe
presentedinpairs.Eachpr oper
ty-valuepai riscaledadecl
l ar
ati
on.Belowist hestr
uctureofaCSS
st
yler ul
e:
Sel ect
or{
Property1:Value1;
Property2:Value2;
:
PropetyN:Val ueN;
}
Thesel ect
orr ef
erst ot heHTMLel ement (s)tobeaf f
ectedbyt hepresentati
onr ul
esenclosed
withi
nt hebraces.Thesel ect
ortakesvar i
ousf or
ms.
I
NHERI
TANCE
An el ementt hatexistinside anotherelementi s call
ed a chil
d element
.Whi lethe element
containingi tiscall
edt hepar entelement.Elementscont ai
nedi nthesamepar entarecalled
si
blings.I fastylerul
eisspeci fi
edforapar entelementandt hechil
delementdoesn’thavethis
samepr opert
yspecifi
edi nast yl
er ul
ef orthechi l
del ement,thechil
del ementinheri
tsthat
providedf ortheparentelement.Ifhoweverthereisaspeci fi
cversionofthi
sstylewrit
tenforthe
chil
del ement ,i
tdoesn’
tinheri
tthatwritt
enfortheparentelement.
HOW TOADDSTYLERULE
Ther
ear
ethr
eewaysofaddi
ngst
yler
ulest
oanHTMLdocument
.Thesear
e:
I
NLI
NEMETHOD
Inthi
scaset hest yl
erul
eispresenteddir
ectlyi
nt heelementt
obeaf f
ected.Thi
sisdonebyusi
ng
thestyleat
t r
ibuteintheelement.Thedeclarat
ion(propert
yoftheel ementandi t
svalue)f
ort
he
elementisprovidedasvaluetothestyl
eattr
ibut
e.Anexampl eofthisisshown
<pstyl
e=”color:r
ed”>Theparagr
aphi spresent
edwi t
hredtext</p>
EMBEDDED/
INTERNALMETHOD
Inthisi nstance,thest yl
er ulesarepr esentedwiththe<st
yle>and</st
yle>t
ags.Therul
esare
provi
dedast hecontentsoft heset ags.Thestyleel
ementisprovi
dedasoneofthecont
enti
nthe
headtag, undert heti
tl
eel ement .Thisisasshownbel ow:
<head>
<ti
tle>EmbeddedSt yleSheet </t
it
le>
<style>
body{
color:#000000;
background-color:#ffff
ff;
font-
famil
y:ar i
al,verdana,sans-seri
f;
}
h1{
font-
size:18pt;
}
p{
font-
size:12pt;
}
</st
yle>
</
head>
EXTERNALMETHOD
Inthisappr oach,t hest yl
er ulesar ewr it
teni nsepar at eddocumentsavedwi tht heext ensioncss.
Thisdocumenti sthenl i
nkedt ot heHTMLpageorpagest hatar etouset hest yl
er ules.Thel inki
ng
i
sdoneusi ng<l ink>whi chhasnocl osingt ag.Thet agi susedwi thatl eastt hefollowingat tri
butes:
1.r el:Itisusedt ost atet her elati
onshi pbet weent hest ylesheetandt heHTMLdocument .
Thisat tribut eisnor mal l
ygi vent heval uest ylesheet .
2.hr ef:Thi si susedt opr ovidet hepat hl eadingt ot hestylesheetdocument .Iti
sgi venaval ue
thatr epresent sthepat ht othest ylesheetdocument .
3.Medi a:t hisspeci fi
est het ypeofdevi cet hatwi llbeusedi nvi ewingt hepage.Theval uef or
thisat tribut er epresent st hisdevi cee. g.scr een (comput erscr eens) ,handhel d(mobi le
devices) ,pr intetc.
Anexampl eofhowt hisl i
nkingi sdonei sasshownbel ow:
<head>
<ti
tl
e>EmbeddedSt yleSheet </ti
tl
e>
<l
inkr el=”stylesheet ”href=” external_sheet .
css”medi a=”screen”>
</head>
Themai nadvant agesofappl yingCSSusi ngt heext ernalmet hodismostnot i
ceablewhensever al
pagesar egoi ngt ouset hesamest ylesheetandt heseadvant agesi nclude:
1.I tsavest imef ordevel opingt hest ylesheet sf orsever alpagesbecauseonecandot hejob
forsever alpages.
2.Updat i
ngt hepr esent ationf ormatofsever alpagesbecomeseasi er.
3.I tispossi blet opr ovidedi fferenttypesofst ylesheetf orthesamedocument ,allbasedon
thet ypeofdevi cet heuseri susi ngt oviewt hepage.
4.Di fferentst ylesheet scanbepr ovidedt of itthet ypeofdevi cef rom whi chthepage( s)wi l
l
bevi ewed.
5.Fi rstvi sitt oapagemakesabr owserdownl oadandsavet hest ylesheet ,sot hatwhen
openi ngot herpagest hatuset hissamest ylesheet ,t
heywi llopenf aster.
CHOOSI
NGRULESFROM MULTI
PLESOURCES
Whenst yl
erulesar eaddedtoanHTMLdocumentusi ngacombi nationoftheabovemet hods,t
he
browserdeci deswhi chr ulet oimplementandwhi chtodi scard.Thequest i
onishow i sthi
s
decisi
onmade?
1.Gener alVSSpeci fi
c
Ithasalreadybeenst atedthatachi
ldelementwi l
linher
itarulemeantf orit
sparentel
ement
exceptithasver sionoft hissamer ulewrit
tenspeci f
icall
yf orit
.Ar ulecanbemadet o
targetaspeci fi
cel ementbyusi ng adi st
inguishing att
ri
but eassel ect
ore.g.id orby
presenti
ngt herul
eint heelement(i
nli
neform)i nwhichcasei tisevenmor especi
fi
c.
<!doctypeht ml>
<html>
<head>
<met achar set="
ut f-
8" >
<tit
le>Exper i
ment s</ ti
tl
e>
<style>
div{
backgr ound-color:cyan;
}
.r
ed{
backgr ound-color:red;
}
</style>
</head>
<body>
<div>
<p>Par agraphwi thdi vpar ent</
p>
</div>
<pcl ass="red">
Independentpar agr aph1
</p>
<pcl ass="red"style=" background-
col
or:
yel
low"
>
Independentpar agr aph2
</p>
<p>Independentpar agraph3</ p>
</body>
</html >
2.CasesofConf li
ct
Generall
ypar si
ngadocumenti sf r
om topdown.Soi ncaseswher ether
eisconf l
icton
becausear uleforanel ementorasetofel ement si sprovi
dedusi ngmul t
ipl
emeans,t he
mostr ul
efrom themostr ecentmeansist hedomi nantone.Si ncepar si
ngofadocumenti s
donefrom tobottom, t
helastmeansencount eredist hemostdomi nant.
Withthissaiditisobviousthatt
herulefrom theinlinemet hodi sthemostdomi nantofthe
thr
eemeansavai l
ablesinceitisinthebodyoft hedocument .Fortheembeddedand
exter
nalmeans,i tisamat teroftheorderinwhi cht heyareintroducedintheheadoft he
document .
I. Embedded( cyan)fi
rst,
ext
ernal(
red)second
EXTERNALSTYLESHEET
@charset"
utf
-8"
;
/*CSSDocument* /
p{
backgr
ound-
color
:r
ed;
}
HTML
<!doctypeht ml >
<html>
<head>
<met achar set ="
ut f
-8">
<ti
tle>Exper iment s</ti
tle>
<style>
p{
backgr ound- color:cyan;
}
</style>
<li
nkr el="stylesheet"hr ef
="ext_
r ul
e.css"
/>
</head>
<body>
<p>
Par agraphone
</p>
<pst yle="backgr oundcol
or:yel
low">
Par agrapht wo
</p>
</body>
</html >
I
I. Ext
ernal(
red)f
ir
st,
embedded(
cyan)second
EXTERNALSTYLESHEET
@charset"
utf
-8"
;
/*CSSDocument* /
p{
backgr
ound-
color
:r
ed;
}
HTML
<!doctypeht ml >
<html>
<head>
<met achar set ="
ut f
-8">
<ti
tle>Exper iment s</ti
tle>
<li
nkr el="stylesheet"hr ef
="ext_
r ul
e.css"
/>
<style>
p{
backgr ound- color:cyan;
}
</style>
</head>
<body>
<p>
Par agraphone
</p>
<pst yle="backgr oundcol
or:yel
low">
Par agrapht wo
</p>
</body>
CSSPROPERTI
ES
CSS pr
opert
ies can be di
vided i
nto sever
alcategori
es dependi
ng on t
he aspectofa page
pr
esent
ati
ontheyarepartof.Bel
owar ethecategor
iesavai
labl
e.
 Font  Backgr
ound  Bor
der
1.f
ont 1.Backgr
ound 1.bor
der
2.f
ont
-f
ami
ly 2.backgr
ound- 2.bor
der
-col
or
att
achment
3.f
ont
-si
ze 3.bor
der
-st
yle
3.backgr
ound-
col
or
4.f
ont
-st
yle 4.bor
der
-wi
dth
4.backgr
ound-
image
5.f
ont
-var
iant 5.bor
der
-bot
tom
5.backgr
ound-
posi
ti
on
6.f
ont
-wei
ght 6.bor
der-
bot
tom-
6.backgr
ound-
repeat col
or
7.bor
der-
bot
tom-
st
yle
 Text  Posi
ti
on
8.border-
bot
tom-
1.col
or 1.bot
tom
width
2.di
rect
ion 2.cl
ip
9.bor
der
-l
eft
3.l
ett
er-
spaci
ng 3.l
eft
10.
bor
der
-l
eft
-col
or
4.t
ext
-al
ign 4.over
fl
ow
11.
bor
der
-l
eft
-st
yle
5.t
ext
-decor
ati
on 5.r
ight
12.
bor
der
-l
eft
-wi
dth
6.t
ext
-i
ndent 6.t
op
13.
bor
der
-r
ight
7.t
ext
-shadow 7.ver
ti
cal
-al
ign
14.
bor
der
-r
ight
-col
or
8.t
ext
-t
ransf
orm 8.z-
index
15.
bor
der
-r
ight
-st
yle
9.uni
code-
bidi
16.
bor
der
-r
ight
-wi
dth
10.
whi
te-
space
17.
bor
der
-t
op
11.
wor
d-spaci
ng
18.
bor
der
-t
op-
col
or
19.
bor
der
-t
op-
styl
e
20.
bor
der
-t
op-
widt
h
 Mar
gin  Di
mensi
ons  Li
st
1.mar
gin 1.hei
ght 1.l
ist
-st
yle
2.mar
gin-
bot
tom 2.l
ine-
hei
ght 2.l
ist
-st
yle-
image
3.mar
gin-
lef
t 3.max-
hei
ght 3.l
ist
-styl
e-
posit
ion
4.mar
gin-
ri
ght 4.max-
widt
h
4.l
ist
-st
yle-
type
5.mar
gin-
top 5.mi
n-hei
ght
5.mar
ker
-of
fset
6.mi
n-wi
dth
7.wi
dth
 Paddi
ng
1.paddi
ng  Tabl
e
2.paddi
ng-
bot
tom 1.bor
der
-col
lapse
3.paddi
ng-
lef
t 2.bor
der
-spaci
ng
4.paddi
ng-
ri
ght 3.capt
ion-
side
5.paddi
ng-
top 4.empt
y-cel
ls
5.t
abl
e-l
ayout
SELECTORS
CSSrulesar enormal l
ywrit
tentoinf
luencethemannerinwhicht
hecontentofawebpageis
pr
esented.Thet ar
getelementi
sprovi
dedbymeansofaselect
orint
heCSSrule.
1.Uni versalSelect
or(*)
:usedtoselectallel
ement
sonthepage.Usef
ulwhenspeci
fyi
nga
generalfontforapage.
STYLE
*{
color
:bl
ue}
CONTENT
<h2>Header2</
h2>
<h3>Header3</
h3>
<h4>Header4</
h4>
2.TypeSel
ect
or:t
hisi
srepr
esent
edbyt
het
extusedi
nthet
agoft
heel
ement
.
STYLE
h2{
col
or:
blue}
CONTENT
<h2>Header2i
nred</
h2>
3.ClassSelect
or(.
):Thefor
mat.cl
assVal
ueisf
orsel
ectingall(
ir
respect
iveoft
ype)el
ements
withthespeci
fi
edclassname.Thefor
matsel
ect
or.
classValueisusedtosel
ectal
lel
ements
oft hegivensel
ectorwit
hthegivenclassval
ue.Thet ype-
select
oristhemostpopular
select
orusedthi
sway.
STYLE
.
blue{col
or:
blue}
p.
ital
ic{
font
-styl
e:i
tal
ic}
CONTENT
<h4cl
ass="bl
ueitali
c">Header4</
h4>
<pcl
ass="bl
ueital
ic">Paragr
aph1</p>
<pcl
ass="i
tal
ic"
>Paragraph2</p>
<pcl
ass="bl
ue">Paragraph3</p>
4.I
DSel
ect
or(
#):usedt
osel
ectanel
ementwi
tht
hespeci
fi
edi
dval
ue.For
mati
s#i
dVal
ue.
STYLE
#head{
text
-decor
ati
on:
under
li
ne}
CONTENT
<h4i
d="
head"
>Header4</
h4>
5.Chi
ld Sel
ect
or( >)
:used t o sel
ectt
he di
rectchi
ld ofan el
ement
.The f
ormati
s
par
entSel
ect
or>chi
ldSel
ect
or.
STYLE
di
v>ci
te{
col
or:
blue}
CONTENT
<div>
<cite>Cit
ati
onindi
v</
cit
e>
<p><cite>Ci
tat
ioni
np</ci
te></
p>
</div>
6.DescendantSelector(space)
:usedtoselectanelement(
descendant
)whichiscontai
ned
di
rectl
y orindirectl
yi n anotherel
ement( ancest
or)
.The formatis ancest
orSel
ect
or
descendant
Selector.
STYLE
di
vcit
e{col
or:
red}
CONTENT
<div>
<cite>Cit
ati
onindi
v</
cit
e>
<p><cite>Ci
tat
ioni
npwhichi
sindi
v</
cit
e></
p>
</div>
7.Adj
acentSibl
ingSelect
or(+)
:usedtoselectel
ementt hatist
henextsi
bli
ngt
oar
efer
ence
el
ement.Theformatfort
hisi
srefSel
ect
or+sibl
ingSel
ector
.
STYLE
h1+p{
col
or:
red}
CONTENT
<h1>Header
</h1>
<p>Fi
rstpar
agraph</
p>
<p>Secondparagr
aph</
p>
8.LowerSibl
ingSelector(
~):sel
ectsasetofel
ementsthataresi
bli
ngsofar
efer
enceel
ement
appear
ingafteri
t.Formatfort
hisisr
efEl
ement~si
bli
ngSelect
or.
STYLE
h2~p{
col
or:
blue}
CONTENT
<h1>Header1</h1>
<p>Paragraphaft
erh1</
p>
<h2>Header2</h2>
<p>Paragraphaft
erh2</
p>
<h3>Header3</h3>
<p>Paragraphaft
erh3</
p>
<div>
<p>Paragraphaft
erh3i
nadi
v</
p>
</div>
9.At
tri
buteSelect
ors([]
):Thisisusedt otargetel
ementswi
thcert
aint
ypesofatt
ri
butes.The
di
ff
erentcombinati
onsar epresentedbelow:
i. Exist
ence select
or– sel ect
or[at
tr
]e. g.p[i
d]ref
ersto al
lp element
s( par
agraph)
contai
ningtheidattr
ibute.
STYLE
p[i
d]{
color
:blue
}
CONTENT
<pid="i
">Firstparagr
aph</p>
<pid="i
i">Secondparagraph</p>
<p>Thirdpar agr
aph</p>
i
i. Equal
itysel
ect
or–select
or[
att
r=”val
ue”
]e.
g.p[i
d=”
summar
y”]r
efer
stopel
ement
s
cont
ainingi
datt
ri
but
eswit
htheval
uesummary.
STYLE
p[cl
ass=" bl
ue"]{
col
or:bl
ue
}
CONTENT
<pclass="bl
ue">Class=<q>bl
ue</
q></p>
<pclass="bl
uebol d"
>Cl
ass=<q>bluebold</
q></
p>
<pclass="bol
d">Class=<q>bol
d</q></
p>
i
ii
. Space sel
ect
or– selector
[at
tr~= ”val
ue”
]e.g.p[
class ~= ”HTML”]ref
erst
o al
lp
el
ementswhichcont
aintheclassval
ueHTML,amongot herval
uesornot
.
STYLE
p[cl
ass~=" HTML"]
{
col
or:bl
ue
}
CONTENT
<pclass="CSSHTML">Classvalues:CSSHTML</p>
<pclass="HTML"
>Classvalue:HTML</ p>
<pclass="CSSXHTML">Classvalues:CSXHTML</p>
i
v. Hyphen sel
ector– select
or[
attr|=“val
ue”
]e.g.p[l
anguage |
=“en”]ref
ersto allp
el
ementswi t
ht heattr
ibut
el anguageassi
gned en oravaluestar
ti
ng wit
h en and
i
mmediatelyfol
lowedby–.
STYLE
p[cl
ass|="en"
]{
col
or:bl
ue
}
CONTENT
<planguage="
en-us">Language=en-us</p>
<planguage="
en-us" >Language=en-us</ p>
<planguage="
len-
us" >Language=l
en-us</p>
<planguage="
en">Language=en</ p>
<planguage="
en_uk">Language=en_ uk</p>
<planguage="
enuk" >Language=enuk</ p>
<planguage="
us-en">Language=us-en</p>
<planguage="
en-">Language=en-</p>
v. Pr
efi
xselect
or–select
or[
att
r^=“val
ue”]e.g.p[
class^
=“b”
]ref
erst
oal
lpel
ement
swi
th
cl
assat
tr
ibuteassi
gnedavaluet
hatstart
swi t
htheval
ueb.
STYLE
p[cl
ass^=" pe"
]{
col
or:bl
ue
}
CONTENT
<pclass="pen">Class=<q>pen</q></p>
<pclass="panpen" >Class=<q>panpen</q></
p>
<pclass="penpan" >Class=<q>penpan</q></
p>
<pclass="spent">Class=<q>spent
</q></p>
vi
. Subst
ri
ngselector– sel
ector
[at
tr*
=“ value”
]e. g.p[
language*=“ en”]r
efer
stoal
lp
el
ementscont
ainingt
helanguageat
tr
ibuteassignedavaluethatcontai
nsen.
STYLE
p[l
anguage*=“en”]{
color
:bl
ue
}
CONTENT
<planguage="
en-us">Language=<q>en-
us</q></p>
<planguage="
French">Language=<q>French</q></p>
<planguage="
Chinese">Language=<q>Chinese</q></
q></
p>
vi
i. Suff
ixsel
ector–sel
ector
[at
tr$=“val
ue”
]e.g.p[
language$=“sh”
]ref
erst
oal
lpel
ement
s
wit
hthelanguageat
tr
ibut
eassignedavalueendingwithsh.
STYLE
p[l
anguage$=“sh”]{
color
:bl
ue
}
CONTENT
<planguage="
Engli
sh">Language=<q>English</q></p>
<planguage="
French">Language=<q>French</q></p>
<planguage="
Spanish">Language=<q>Spanish</q></q></
p>
MEASUREMENTOFLENGTH
Therear
et hreet ypesofuni tsusedf orthemeasur ementofl ength:
1.Relati
veUni ts:Thesear ebasedonar eference.I ncludedinthiscategoryar e:
i. pixel( px):Thisi sthesmal lestunitofr esolutiononascr een.Theyappearl ikesquar e
dot sandt her esol
utionofdevi cesisgi venbyt henumberoft hesedot sinani nchi.e.
dot speri nch( dpi
).Thisisthemostpopul aruni tofmeasur ementf orlength.
ii
.em:Thi sr ef
erst othesize( hei
ght)oft hef ontinuse.I tisasar esultusedf ortext
sand
text-spacing.Themeasur ementi sthoughtt obebasedont heheightoft hel
owercasem
oft hef ont.
ii
i.ex:I ti
ssi milartoem butbasedont hehei ghtoft helowercasexoft hef ont.
2.Absol uteUni ts:Thesei ncludeuni tsmeasur edi npoi nt(ptforfonts),inch( i
n),pica(pc),
centimet er(cm) ,andmi l
limeter(mm)
3.Percent age( %):thisismeasur ementgi venasaper centageofthecont ainingelement.
CONTROLLI
NGTEXT
Agr oupoff ontsshar i
ngsomecommonf eatur
esr esentat
epr ypef
acewhileagivenmemberof
thi
sgr oupisreferr
edt oasafont.
Therear edi
ffer
enttypesoffont.I
nbroadter
mshoweverwehave:
1.Ser i
fFont s:thesearefontswit
hlett
ershavi
ngdecorat
ions(ser
if
).Anexampleoft
hisis
Ti
mesNew Roman.Forthesakeofdecorations,somecharactersdisplayan
unevenleveloft
hicknessi
nt hest
roke.Ther
eisalsothemonospacedser
iffont
sinthis
cat
egory.Thesear
eal sowr
it
tenwit
hdecorati
onsbuttheyar
ecal
ledmonospacedbecause
al
lchar
act
ershavet
hesamewi
dth.Anexampl
eofsuchaf sC
onti our
ierNew
2.San-
Ser
ifFont
s:Thesear
efont
sinwhi
chchar
act
ersar
ewr
it
tenwi
thoutanydecor
ati
on.An
exampl
eoft
hi sAr
si ial
Seri
ff ontsar
enor mall
yusedwhendeal i
ngwithal ar
geamountofpr int
edt ext
.Butont
he
comput er(
web)t
heyarefoundtobedif
fi
cul
ttor
eadhencetheuseofsan-
seri
ffonts.
Typefacesnor
mallyhavegener
icnamesandsomeoftheseare:
Gener
icFontName TypeofFont Exampl
e
ser
if Font
swi
thser
if Ti
mesNewRoman
san-
ser
if Font
swi
thoutser
if Ar
ial
monospace Fi
xed-
widt
hfont
s Cour
ierNew
cur
sive Font
sthatemul
atehandwr
it
ing Comi
cSansMS
f
ant
asy Decor
ati
vef
ont
smaj
orl
yfort
it
les I
mpact
TheCSSattri
butesusedf ortextcont r
olar e:
1.font
-family:represent sat ypefaceconst i
tutedofsever alfontsindi fferentvari
ants.Thefir
st
ofthesef ont sinthef amilyfoundi nthecomput erisusedasf ont.Exampl esofvaluesfor
thefontfami lyproper tyinclude:
i. "
LucidaGrande","Luci
daSansUni code"
,"LucidaSans",
"Dej
aVuSans" ,
Verdana,sans-
ser
if
ii
. "
Gil
l Sans"
,"Gi
llSansMT" ,"
MyriadPro",
"DejaVuSansCondensed" ,
Helveti
ca,Ari
al,
sans-
seri
f
ii
i. Consol as,"Andale Mono","Lucida Console","
Lucida Sans Typewrit
er",Monaco,"Couri
erNew",
monospace
i
v. Cambr
ia,
"Hoef
lerText
","
Liber
ati
onSer
if
",Ti
mes,
"Ti
mesNewRoman"
,ser
if
STYLE
#seri
f{
f
ont-family:Cambr ia,"HoeflerText","Li
berati
onSeri
f"
, Ti
mes,"Ti
mesNew
Roman" ,serif
}
#san-serif
{
f
ont-family:"LucidaGr ande","LucidaSansUni code"
,"LucidaSans"
,"Dej
aVu
Sans",Verdana, sans- seri
f
}
#monospace{
f
ont-family:Consol as,"AndaleMono" ,"Luci
daConsole",
"Luci
daSans
Typewr i
ter"
, Monaco, "
Cour i
erNew" ,
monospace
}
#cursive{
f
ont-family:cursive
}
#fantasy{
f
ont-family:fantasy
}
CONTENT
<pid="seri
f">Typef ace:serif</p>
<pid="san-ser i
f"
>Typef ace:san- seri
f</p>
<pid="monospace" >Typef ace:monospace</ p>
<pid="cursive">Typef ace:cursive</p>
<pid="fantasy">Typef ace:fantasy</p>
2.font-
size:specif
iesthesizeofthefont
.Itisrecommendedt hattheunitem beusedwhen
specifyi
ngt hi
s.1em isequalt
ot hedef
aultfontsizeofthebrowserwhichis16px.Besides
valuesoflengthwhi chcanbeusedt ospecifyfont-si
zether
earewor dswhichdepictfont-
sizeaswel l
.Someoft heseare:xx-small
,x-small,small
,medium,large,x-
lar
ge,xx-
large,
smal l
er,l
argeretc.
STYLE
#em1{
font
-size:
1em
}
#em2{
font
-size:
2em
}
#em0_ 5{
font
-size:
0.5em
}
CONTENT
<p>Textindef aul
tbrowsersi ze</
p>
<pid="em1">Texti nfont-
sizeof1em</p>
<pid="em2">Texti nfont-
sizeof2em</p>
<pid="em0_ 5">Texti
nf ont-
sizeof0.
5em</p>
3.font-
weight
:pointstohowt hi
ckaf
ontshoul
dbe.Val
uesf
ort
hisat
tr
ibut
eincl
ude:nor
mal
,
bold,bol
der
,li
ghter,
100,200…900et
c.
STYLE&CONTENT
<pstyl
e="
font
-wei
ght
:normal ">Font
-weight :normal</p>
<pstyl
e="
font
-wei
ght
:bold">Font-wei
ght :bold</p>
<pstyl
e="
font
-wei
ght
:bolder">Font-
weight :bolder
</ p>
<pstyl
e="
font
-wei
ght
:l
ighter">Font-
weight :li
ghter
</ p>
<pstyl
e="
font
-wei
ght
:100">Font -
weight:100</ p>
<pstyl
e="
font
-wei
ght
:500">Font -
weight:500</ p>
<pstyl
e="
font
-wei
ght
:900">Font -
weight:900</ p>
4.f
ont
-st
yle:speci
fi
eswhet
heraf
ontshoul
dbenor
mal
,i
tal
icorobl
ique.
STYLE
p{
f
ont-size:2em
}
STYLE&CONTENT
<pstyle="font
-st
yle:
normal">Font-
style:normal</
p>
<pstyle="font
-st
yle:
it
ali
c">Font-
style:i
tali
c</p>
<pstyle="font
-st
yle:
obli
que">Font-styl
e:obli
que</p>
5.f
ont
-var
iant
:speci
fi
eswhet
hert
hef
ontshoul
dbenor
malorsmal
l-
caps.
STYLE&CONTENT
<pstyl
e="
font
-var
iant
:nor
mal "
>Font-
var
iant
:normal
</p>
<pstyl
e="
font
-var
iant
:small
-caps"
>Font
-var
iant
:small
-caps</
p>
6.font:i
susedtocombineseveralval
uesoftheaboveat t
ri
butes/propert
ies.Thecombi
nat
ion
takestheorder
:font-
styl
e,f
ont-var
iant
,font
-weight
,font-
size,andf ont-
famil
y.Theval
ues
arespaced,
anditisnotcompulsorytohaveall
specif
ied.
STYLE
#p1{
Font:nor
malsmall-
capslight
er1em monospace
}
#p2{
Font:nor
malbolder2em seri
f
}
STYLE&CONTENT
<pid="p1"
>Font
:normalsmal l
-capsl
ight
er1em monospace</
p>
<pid="p2"
>Font
:normalbolder2em seri
f</
p>
TEXTFORMATTI
NG
Pr
oper
ti
esinthiscategoryinclude:
1.color
:refer
st othecol orinwhichthefontwil
lber endered.I
tsvalueiseithert
henameof
thecolor,oritscodee. g.RGBcodewhi chi scomposedof3( onedi gi
tpercolor)or6
hexadecimal(2di gi
tspercol or
)precededby#.Thedi git
srepresenttheamountofeach
pri
mar ycolor(Red,GreenandBl ue)combinedtoformt hecolorwiththegivencode.Di
git
s
usedrunf r
om 0t oF.
STYLE
p{
font
-si
ze:1.
5em}
STYLE&CONTENT
<pstyl
e="
col
or:
red"
>Redtext-color:
red</p>
<pstyl
e="
col
or:
#0f0"
>Greentext-color:#0f
0</p>
<pstyl
e="
col
or:
#0000ff
">Bl
uet ext-color:
#0000f
f</
p>
2.t
ext
-al
ign:speci
fi
esthehori
zontalali
gnmentofthetextwi
thi
nit
scont
aini
ng el
ement
.
Val
uesfort
ext-
ali
gni
ncl
ude:l
eft
,right
,cent
erandj
ust
if
y.
STYLE
#l
{text-
ali
gn:l
eft
}
#r{
text-
ali
gn:r
ight}
#c{text
-al
ign:
center
}
#j
{text-
ali
gn:j
usti
fy}
STYLE&CONTENT
<pi d="
l"
>Textisalignedleft</
p>
<pi d="
r"
>Texti sal
ignedright</p>
<pi d="
c">Textiscenter
ed</ p>
<pi d="
j"
>
Her ei
ssomej usti
fi
edtext.Thisexampler
equi
resatl
east
threeli
nesoft extsothatitstrueeff
ecti
sobvi
ous
</p>
3.vert
ical-
ali
gn:usedwit
hinli
neelementsespecial
lywit
hi mageswi
tht
ext
s.Val
uesassi
gned
i
tinclude:
a.basel i
ne:al
ignst
hetextwit
ht hebasel
ineoftheparentel
ement
.
STYLE
.
basel
ine{
ver
ti
cal
-al
ign:
basel
ine}
STYLE&CONTENT
<pstyl
e="border:
soli
d1px;wi dth:
200px">
<spanclass="baseli
ne">basel
ine</span>
<imgclass="baseli
ne"src="l
ogo.png"hei
ght
="50px"
/>
<span>default
</span>
</p>
b.bot
tom:al
ignst
het
extwi
tht
hebot
tom oft
hel
owestel
ementi
nthel
ine.
STYLE
.
bott
om{ver
ti
cal
-al
ign:
bot
tom}
STYLE&CONTENT
<pstyl
e="border:
soli
d1px;width:
150px">
<spanclass="bott
om">bot
tom</ span>
<imgclass="bott
om"src="
logo.png"hei
ght
="50px"
/>
</p>
c.mi
ddl
e:al
ignst
het
extwi
tht
hemi
ddl
eoft
hepar
entel
ement
.
STYLE
.
middl
e{ver
ti
cal
-al
ign:
middl
e}
STYLE&CONTENT
<pstyl
e="border:
solid1px;widt h:150px"
>
<spanclass="middle">middle</span>
<imgclass="middle"src="l
ogo. png"hei
ght
="50px"
/>
</p>
d.t
op:al
i
gnst
het
opoft
het
ext(
andt
hei
mage)t
othet
opoft
het
all
estel
ementi
nthel
ine.
STYLE
.
top{
vert
ical
-al
ign:
top}
STYLE&CONTENT
<pstyl
e="border:
soli
d1px;widt
h:150px"
>
<spanclass="t
op">t
op</span>
<imgclass="t
op"src="
logo.
png"height
="50px"
/>
</p>
e.sub:makest
het
extasubscr
ipt
STYLE&CONTENT
<pstyl
e="
font-
size:
2em" >
l
og<spanstyl
e="vert
ical
-al
ign:
sub"
>10</
span>23.
45
</p>
f
. super
:makest
het
extasuper
scr
ipt
STYLE&CONTENT
<pstyl
e="f
ont-si
ze:
2em">
5<spanstyl
e="ver
ti
cal
-al
ign:
super
">3</
span>=125
</p>
4.t
ext
-decor
ati
on:speci
fi
eswhet
hert
het
extshoul
dbeunder
li
ned,
over
li
ned,
orst
ri
ket
hrough.
STYLE&CONTENT
<pstyl
e="text
-decor
ati
on:over
li
ne">
Textwit
hal i
neoverit
</p>
<pstyl
e="text
-decor
ati
on:l
ine-
through"
>
Textwit
hal i
net hr
oughit
</p>
<pstyl
e="text
-decor
ati
on:underl
ine"
>
Textshouldbeunderli
ned
</p>
5.t
ext
-i
ndent:speci
fiesanindent
ati
onf
ort
het
extf
rom t
hel
eftbor
der
.Itt
akesaval
uewhi
ch
r
epr
esentssomel ength.
STYLE&CONTENT
<pstyl
e="
text-i
ndent:
2em">
Thisi
sapar agraphwit
hthef
irstl
ineontexti
nthe
paragr
aphindented2em fr
om t
heleftbor
der
</p>
<pstyl
e="
text-i
ndent:
4em">
Thisi
sapar agraphwit
hthef
irstl
ineontexti
nthe
paragr
aphindented4em fr
om t
heleftbor
der
</p>
6.t
ext-
tr
ansf
orm:speci
fi
eswhetherthetextshoul
dbeupper
case,l
ower
case,orcapi
tal
ized
(
eachwordstar
ti
ngwithacapi
tal
lett
er)
STYLE&CONTENT
<p>
<spanst
yle="
text
-t
ransf
orm:
uppercase">lowert
oupper</span><br/>
<spanst
yle="
text
-t
ransf
orm:
lowercase">UPPERTOLOWER</ span><br
/>
<spanst
yle="
text
-t
ransf
orm:
capit
alize"
>texti
scapi
tal
ized</span>
</p>
7.text-
shadow:thisisusedspecifyi
fthetextshoul
dhaveadr opshadowandhowi tshould
ber ender
ed,ifitisthere.I
ttakesfourvalueswhichrepr
esent
:hori
zont
alof
fset
,verti
cal
offset
,sharpnessoft heshadow (t
hesmal l
erthi
svalue,t
hesharpert
hedropshadow is)
andf i
nall
ythecoloroftheshadow.
STYLE&CONTENT
<h1styl
e="
text
-shadow:
10px10px1pxbl
ue"
>
10px10px1pxblue
</h1>
<h1styl
e="
text
-shadow:
-10px-
10px5pxr
ed"
>
-
10px-10px1pxred
</h1>
8.l
ett
er-
spaci
ng:cont
rol
sthewi
dthoramountofspacebet
weenl
ett
ers.I
ttakesaval
ueof
l
engthornor
mal.
STYLE&CONTENT
<pstyle="
lett
er-spaci
ng:nor
mal
;"
>
normaltext-spaci
ng
</p>
<pstyle="
lett
er-spaci
ng:0.
5em;
">
text
-spacingof5px
</p>
9.word-
spaci
ng:cont
rol
stheamountofspacebet
weenwor
ds.I
tisgi
venaval
ueofl
engt
hor
nor
mal (
def
ault
).
STYLE&CONTENT
<pstyl
e="
word-
spaci
ng:normal;"
>
demonst
rat
esnormalwor dspacing
</p>
<pstyl
e="
word-
spaci
ng:0.5em;">
demonst
rat
ewordspacingof0.5em
</p>
<pstyl
e="
word-
spaci
ng:1em; "
>
demonst
rat
ewordspacingof1em
</p>
10.
white-
space:Specifi
eswhatshouldbedonewit
hmult
iplewhit
espacecharact
ers.Values
assignedthi
spr oper
tyincl
ude:
i. normal:whitespacescoll
apsei
ntoone,
andt
extwi
llwrapwhennecessar
y(defaul
t)not
onlinebreaks(ENTER).
STYLE&CONTENT
<pstyl
e="
whit
e-space:
normal
">
Allof t
hese aretext
sarecont
ainedi
napar
agraphel
ement
i
nwhichsequencesofwhite spaces ar
e t r
eatedi
nthedef
aul
tway.
</p>
<pstyl
e="
whit
e-space:
normal
">
Allof t
hese aretext
sarecont
ainedi
napar
agraphel
ement
i
e t r
eatedi
nthenor
malway.
</p>
i
i.pre-
wrap:si
mil
art
onor
mal(
spacescol
lapsedandwr
aps)exceptt
hati
tal
sowr
apsat
l
inebreaks.
STYLE&CONTENT
<pstyl
e="
whit
e-space:
pre-
li
ne"
>
Allof t
hese aretext
sarecont
ainedi
napar
agraphelement
i
e t r
eatedusingpr
e-l
ine.
</p>
i
ii
.nowr ap:sequenceofwhit
espaceswi
llcol
lapsebutt
extwontwr
ap even when i
t
encount
ersali
nebreak.
STYLE&CONTENT
<pstyl
e="whi
te-
space: nowrap"
>
All of these ar e t extsarecontai
ned
i
napar agr
aphelementi nwhi chsequencesofwhi
te
spaces are t reatedusingnowr ap.
</p>
i
v.pre:sequenceofwhi
tespaceswil
lbepr
eser
vedandt
extwi
llnotwr
ap.I
twr
apswheni
t
encountersali
nebr
eak,t
hough.
STYLE&CONTENT
<pstyl
e="whit
e-space:pre"
>
All of these ar e textsarecontai
ned
i
napar agraphelementinwhi chsequencesofwhi
te
spaces ar e t reatedusi
ngpr e.
</p>
v.pr
e-wr
ap:sequenceofwhitespacesar
eper
sever
edandt
extwr
apswhennecessar
yand
whenali
nebreakisencounter
ed.
STYLE&CONTENT
<pstyl
e="whit
e-space:pre-
wrap">
All of these ar e textsarecontai
ned
i
napar agraphelementinwhi chsequencesofwhi
te
spaces ar e t reatedusi
ngpr e-
wrap.
</p>
11.
dir
ecti
on:i
ndi
cat
esi
fat
extshoul
dber
ender
edf
rom t
hel
eftt
other
ightorf
rom t
her
ightt
o
thelef
t
TEXTPSEUDO-
CLASSES
Thesear especialselectorst iedtotextthatenablesomeextralevelofformatti
ngint ext
s.There
aretwopseudo- classesandt heseare:
1.fir
st-
letter:t
hisenabl esapplyingaspecialformat
ti
ngrulet
ot hefir
stlet
terofawor d
2.fir
st-
li
ne: thisenablessel ect
ingthefir
stli
neofaparagraphforspecialf
ormatting.
Inordertouseapseudo- class, anor malsel
ectormustfi
rstbeusedt ogettheelementcont ai
ning
thefir
stlet
terorl inetobef or mat
ted,beforechaini
ngthepseudo-classtothisselectorwiththe
coloni.
e.selector:
pseudo_ class.
STYLE
p:
fi
rst
-l
etter
{font-
size:
48px}
p:
fi
rst
-l
ine{f
ont-st
yle:i
tal
ic}
CONTENT
<p>
Ont hi
sfait
hfulday,ademonstrat
iononhowt ext
-pseudo
classesareusedhasbeencar r
iedout.I
tisexpect
edt hat
thisaspectofstyl
ingtext
shasbecomecr yst
al.
</p>
BOXMODEL
Thecontentofeveryelementi
nHTMLi sassumedt obeinaboxi nCSS.Theboxhasaborder
.
Thedist
ancebet weenthecontentandtheborderi
scal l
edPADDING.Thedist
ancebet
weenthe
bor
deroftheelementandtheboxoft henextel
ementiscal
ledMARGIN.
Thedi
agram belowgivesadescri
pti
onoftheboxmodel :
Pa
ddi
ng
Ma
rgi
n
CONT
ENT
Bor
der
-Wi
dth
BORDERPROPERTY
Thi
sisanembodi mentofsever alpropertiesandtheseincl
ude:
1.bor der
-wi
dt h:Thisisani ndicati
onofhow t hicktheboxbordersshoul
dbe.I tispopularl
y
measuredinpi xel
s.Thoughi talsohasabsolutevaluessuchasthi
n,medium andthick.
2.bor der
-st
yle:Thi scontrolshow t heborderlooks.Valuesfort
hispropert
yi ncl
ude:none,
sol
id,dot
ted,dashed,doubl e,grove,ri
dge,i
nset,outset
,andhi
dden.Bel
owi sani l
lustr
ati
on
ofsomeoft hementionedbor derstyl
es:
3.bor
der-
colorrefer
stot
hecol
orofthebor .
der
4.bor
derprovidesameansofprovi
dingval
uesfort
heabovepr
oper
ti
est
oget g.bor
here. der:
4pxsol
idr
ed;
.
Iti
sal sopossibletochoosewhi choft he4sides( t
op,r
ight,bot
tom,andl eft)t
otargetusingthe
fi
rstthreeproperti
es,i
nsteadofj ustborderwhichcombinespr opert
iesforthe4si destogether
.
Forexampl e,usingwidthwillgi
ve:border-t
op-
wi dt
h,bor
der-ri
ght-
width,border-
bot
tom-width,and
border-l
eft
-widt
h.Thisseparati
oni sappli
edwhent herei
st heneedt opresentagivenpar tofthe
borderdiff
erent
ly.
PADDI
NGPROPERTY
Paddingist hedi stancebet weent hecont entandt hebor deroft hebox.Thispropert
yiseit
her
provi
dedsepar atelyforeachoft hefoursidesoft hebox( padding-t
op,paddi
ng-bot
tom,paddi
ng-
l
eft,andpaddi ng- r
ight)ort heyar epr ovidedt ogetherusingt hepr oper
typadding.Thevalues
provi
dedar emost lygiveninpi xelsoranyot herunitoflength.Itcanalsobegivenasinheri
t.
Thenumberofval uespr ovidedf orpaddingvar y.
 1val ueforal l4sides
 2val ueswi tht hefir
stval ueforpaddi ng-t
opandpaddi ng-bott
om,andsecondf orpaddi
ng-
r
ightandpaddi ng-
lefti.
e.top-bott
om, andl eft-
ri
ght.
 4val uesfort op,ri
ght,bottom, andleft(i
nt hatorder
)
STYLE
div[
styl
e]{bor
der:
2pxsolidbl
ack;
}
.
format {
background-col
or:
black;
color:
white;
}
CONTENT&STYLE
<divstyle="
padding:
2px"
>
<divclass="f
ormat"
>paddi
ng:2px</
div>
</div>
<br/>
<divstyle="
padding:
1px8px"
>
<divclass="f
ormat"
>paddi
ng:1px8px</di
v>
</div>
<br/>
<divstyle="
padding:
1px4px10px18px">
<divclass="f
ormat"
>paddi
ng:1px4px10px18px</
div>
</div>
MARGI
NPROPERTY
Marginofanel ementr efer
stothedistanceofsepar
at i
onsetbetweenitsbor
derandthatofthe
nextelement.Themar ginproper
tyistr
eatedinasimilarmannertopadding.I
foneboxisnextto
another,t
hedistancebet weentheirbor
dersisthesum ofthei
rlef
tandrightmargi
ns.Whil
eifone
i
sabovet heother,thedi st
ancebetweent hebot
tom andtopborderisequaltothelar
gerofthe
margin-t
opandmar gin-bott
om.
STYLE
body,di
v,span{ bor
der:
sol
id1px}
.
r1,.
r3{margin:12px}
.
r2{margi
n:24px}
#one{margin:12px}
#two{margi
n:24px}
#thr
ee{margin:48px}
CONTENT&STYLE
<divid="
one">
<spanclass="
r1"
>It
em 1</
span><spancl
ass="
r1"
>It
em 2</
span>
</div>
<divid="
two">
<spanclass="
r2"
>It
em 3</
span><spancl
ass="
r2"
>It
em 3</
span>
</div>
<divid="
thr
ee">
<spanclass="
r3"
>It
em 4</
span><spancl
ass="
r3"
>It
em 5</
span>
</div>
24 48 24
48
48
DI
MENSI
ONSOFACONTENTBOX
Ther
eare7pr oper
tieswhi char eusedt opresentthedimensionsofacont entbox.Theseare:
widt
h,mi
n-widt
h,max-width,height
,mi n-
hei
ght,max-hei
ght,andli
ne-
height
.
widt
handheightar
egi venvaluesinuni t
soflength,
percentorauto(
default
,inwhichcasethebox
i
smadetof i
tit
scontent).Theyrepresenthowwi deandhighthecontentboxshouldbe.
STYLE
#fi
rst{
width:150px;
height:50px;
backgr ound-
col
or:cyan;
}
#second{
width:100px;
height:100px;
backgr ound-
col
or:green;
}
CONTENT
<di
vid="
fi
rst
">150x50</di
v>
<di
vid="
second">100x100</
div>
min-widt
handmi n-hei
ghtareusedt oprovi
deaf i
xedsi
zef orcontentbox,below whi
ch,thebox
cannotber educed.Crossi
ngthemi ni
mum bringsupascr oll
bar.Thisi
simpor t
antincaseswhere
thebrowserwi ndow isbeingresi
zedort hescreenonwhi chthepagei sbeenvi ewedissmall
er
thantheoneusedi nit
sdevelopment.Theseproperti
esar
ei rr
elevanti
fthewidthandheighthave
alr
eadyfixed.
STYLE
div{
min-hei
ght:100px;
background-col
or:
yel
low;
}
STYLE&CONTENT
<bodyst yl
e="
margin:0px"
>
<div>300x300</div>
</body>
max-widthandmax-hei
ghtareusedtosetasizeli
mitbeyondwhichthecont
entboxescannotbe
resi
zed.Intheexamplebelow,incr
easingthewidthoft hewindow doesthesamet othedi
v
element.Thei
ncr
easingoft
hedivwidthstops,
themomentt hemaximum wi
dthisexceeded.
STYLE
div{
max-widt
h:400px;
backgr
ound-col
or:
yel
low;
}
STYLE&CONTENT
<bodystyl
e="margi
n:0px"
>
<div>Won’
tfi
llt
hewindow</
div>
</body>
l
ine-
heighti
susedtosett
heli
nespaci
ngbet
weenl
inesoft
ext
.Iti
sadvi
sedt
hati
tsval
ueshoul
d
beinthesameunitast
hatoft
het
extsi
ze.
STYLE
div{
wi dt
h:120px}
#one{
l
ine-hei
ght:2em;
background-col
or:yel
low;
}
#two{
l
ine-hei
ght:4em;
background-col
or:cyan;
}
CONTENT
divid="one"
>Usingali
neheightof2em.</div>
<divid="t
wo">Usingal
ineheightof4em.</div>
OVERFLOW PROPERTY
Sometimescont entmaybebi ggert hantheboxsi zeprovided.Whent hishappens,t
hecont
ent
fl
owsoutoft heprovidedbox.Thisat tr
ibut
ei sprovidedtomanaget hi
ssituat
ion.Theval
uesgi
ven
tothi
spropertyare:
1.hidden:theoverfl
owingcont entishidden
2.visi
ble:theoverf
lowi
ngcont entisvisibleoutsidet
hebox
3.scroll
:scrol
lbarsareprovidedt oenablethevi ewi
ngoft heover
fl
owingcontent
4.auto:scroll
barsareprovidedwheni tbecomesnecessar y
5.inheri
t:t
heboxi nher
itsthevaluet hi
spr oper
tyi ni
tsparentel
ement.
STYLE
div{
width:100px;hei
ght
:50px;
border:sol
id1px;margi
n:30px
}
#hidden{
overfl
ow:visi
ble
}
#hidden{
overfl
ow:hidden
}
#scroll
{
overfl
ow:scroll
}
CONTENT
<di
vid="
visi
ble">Thisboxcontainshashi
ddenforoverf
low.
</div>
<di
vid="
hidden">Thisboxcontainshashi
ddenforoverfl
ow.</di
v>
<di
vid="
scroll
">Thisboxcontainshasscr
ollf
oroverf
low.</
div>
BOX-
SIZI
NGPROPERTY
Whent hewidthofanel ementi sgi
ven,it
sdepicti
oni nCSSst andardisdiff
erentfrom whatis
obtainabl
einInternetExpl or
er.InCSSspecifi
cat
ion,i
trepresentsthewi dt
hofthecont ent
,whil
ein
Int
ernetExploreritrepresentst hedi
stancefrom t
heleftbor derthroughthecontent,totheri
ght
border.Int
ernetExplorer6andabovei scapableofusi ngbot hmodel s(i
nstandardcompl i
ant
modeandqui rksmodewher ethereisno!DOCTYPEdecl arationint hedocument).Mostpersons
preferthei
nternetexplorerinter
pret
ati
onofcontentwidth.
S
tanda
rdWi
dth
Bor
der
CONT
ENT
E
xpl
ore
rWi
dth
Thebox- sizingpr opert

ypr ovidesameansbywhi chdeveloperscanchoosebet weent hetwo
i
nterpr
etationsofwi dt
h.Thepr oper t
yissupportedi nthemaj orbrowser
sandinIE8andabove.
Theimpor tantvaluesforthispr opertyare:
1.bor der -
box:widthisfrom l ef
tbordertor
ightbor der
.
2.cont ent-box:wi dthisj ustf orthe widt
h oft he content
.This appr
oach is becomes
probl emat i
cwi t
ht hebor derwi dthhasaval ue,nomat terhow small
.Thisi
sbecauset he
act ualwi dthoft heelementi sthesum oft het hewidthoft hecont
ent
,thelef
tandr i
ght
bor derwi dth,andt helef tandr i
ghtpadding( i
fsuppli
ed).Onaccountofthi
s,theel ement
appear sbigger.
STYLE
div{
width:150px;height:50px;
border:sol
id8px;mar gin:10px
}
#one{
box-si
zing:content
-box
}
#two{
/*r
egularmar gi
n(10)+bor derwidt
h(8)
*/
mar gi
n-l
eft:
18px;
box-si
zing:border-
box;
}
CONTENT
<di
vid="
one"
>Wi
dthf
orcontentalone</
div>
<di
vid="
two"
>Wi
dthf
rom border
s</div>
STYLI
NGLI
NKS(
HYPERLI
NK)
col
or,background-color,andt ext-
decor ati
onaretheproper
ti
escloselyr
elatedwithli
nks.Browser s
haveadef aultwayi nwhi chl i
nksar est yl
ed.Itisal
sopossibletochanget hi
s.Wr i
ti
ngasel ector
usi
ngt hepseudo-classesi nt hisinstancet akesthefor
mat:a:pseudo-
class.Thereare4pseudo-
cl
assesusedf orstyli
ngl inks, thesear e:
1.link:usedtosel ectl inksgener all
y.InFiref
oxandChr ome,itwor
ksonl yifthehref
-att
ribute
forthelinkhasaval uei.e.iti
snotempt y.
STYLE
a:
li
nk{
col
or:
red}
E
xpl
ore
r
CONTENT
<ahr
ef="
www. googl
e.com"
>Li
nk</
a>t
oGoogl
e.
<ahr
ef="
">Li
nk</a>t
oYahoo.
2.vi
sit
ed:usedtoselectli
nksthathavebeenvi
sit
ed.Thispr
oper
tyhastobepr
esent
edaf
ter
l
inkfori
ttobeeff
ective.Thi
spropert
yworksasdescr
ibedi
nexplor
er.
STYLE
a:
visi
ted{
col
or:whi
te;backgr
ound-
col
or:
black} Pa
gebe
for
evi
si
t
CONTENT Pa
gea
fte
rvi
si
t
<ahr
ef="
www.
yahoo.
com"
>Li
nk</
a>t
oYahoo.
3.hover
:usedt
ost
yleal
inkwi
tht
hecur
sorpoi
nti
ngt
oit
STYLE
a:
hover
{col
or:r
ed} Wi
thc
urs
oronl
i
nk
CONTENT
<ahr
ef="
www.
yahoo.
com"
>Li
nk</
a>t
oYahoo.
4.act
ive:usedforl
inks,
themomentthemouseispr
essedwitht
hecursorhover
ingovert
hem.
Thi
spr oper
tyhastobeplacedaf
terhoveri
nor
derfori
ttobeef
fect
ive.
STYLE
a:
hover{
color
:red} Withc
urs
oronl
ink
a:
acti
ve{t
ext-
decor
ati
on:none}
; andmous
epres
sed
CONTENT
<ahr
ef="
www.
yahoo.
com"
>Li
nk</
a>t
oYahoo.
BACKGROUND
Pr
oper
ti
esassoci
atedwi
thbackgr
oundi
ncl
ude:
1.backgr
ound-
col
or:speci
fi
esabackgr
oundcol
or.Val
uesf
ori
ttakeei
thert
hecol
ornameor
code.
STYLE
div{
border:sol
id4px;mar gin-bottom:5px
}
#a{background-color
:rgba(63,166,240,
0.50)
}
#b{background-color
:rgb(63,166,240)}
#c{background-color
:#18E31D}
#d{background-color
:yell
ow}
CONTENT
<di
vid="
a">rgba(63,
166,240,0.50)
</di
v>
<di
vid="
b">rgb(63,
166,240)</div>
<di
vid="
c">#18E31D</ div>
<di
vid="
d">yell
ow</div>
2.background-
image:usedt
ospeci
fyt
hei
maget
obeusedasbackgr
ound.Val
uef
ori
tis
presentedasur
l(
imagepat
h).
STYLE
di
v{
border
:sol
idthi
n;
backgr
ound-i
mage:ur
l(
bkgr
nd.
jpg)
}
CONTENT
<di
v>backgr
ound-
image:
url
(bkgr
nd.
jpg)
</di
v>
3.background-r
epeat:i
ndicateswhetherthebackgroundimageshouldberepeatedandhowi t
shouldber epeat
ed,ifitist ober epeated.Val
uesf ort
hisi
nclude:repeat(repeati
mage
hori
zontall
yandver t
icall
y–def ault)
,repeat-
x(r
epeatimagehorizont
all
y),r
epeat -
y(r
epeat
i
magever ti
call
y),
no-repeat.
STYLE
div{
border:sol
idthi
n;
width:220px;hei
ght:50px;
background-i
mage:url
(bkgrnd.j
pg)
}
#a{background-r
epeat:
repeat}
#b{background-r
epeat:
repeat-
x}
#c{background-r
epeat:
repeat-
y}
#d{background-r
epeat:
no-repeat
}
CONTENT
<di
vid="
a">backgr
ound-
repeat
:repeat</div>
<di
vid="
b">backgr
ound-
repeat
:repeat-x</di
v>
<di
vid="
c">backgr
ound-
repeat
:repeat-y</di
v>
<di
vid="
d">backgr
ound-
repeat
:no-repeat</di
v>
4.background-posit
ion:i
ndicat
est hepositi
onthebackgroundshouldstar
tfrom onthepage.
Valuesare:top-
leftoff
setposit
ionprovidedastwovalues(xy,orx%y%) ,l
eft
,ri
ght
,top,and
bottom allofwhi char ecentered,aswel lascenter.Thisproper
tydoesn’twor kifthe
backgroundisrepeatedinbothdi r
ecti
ons.
STYLE
div{
border:soli
dthin;
width:
100px;hei ght
:50px;
background-image:url(
bkgrnd.j
pg)
;
background-repeat:
no-repeat;
}
#a{background-positi
on:10px10px}
#b{background-positi
on:top}
#c{background-positi
on:bott
om}
#d{background-positi
on:center
}
#e{background-positi
on:l
eft}
#f{background-posit
ion:r
ight
}
CONTENT
<di
vid="
a">10px10px</ di
v>
<di
vid="
b">top</div>
<di
vid="
c">bottom</ div>
<di
vid="
d">center</div>
<di
vid="
e">l
eft</div>
<di
vid="
f"
>right</div>
5.background-
att
achment:usedt ospeci
fywhethert
hei mageshouldbefi
xedormoveal
ong
wit
ht hepagewheniti
sscr ol
led.Val
uesfori
tare:f
ixed,andscr
oll(
def
aul
t).
STYLE
p{
backgr
ound-
image:url(
bkgr nd.
jpg)
;
backgr
ound-
repeat:
repeat-x;
backgr
ound-
positi
on:center;
backgr
ound-
attachment:scroll
;
}
CONTENT
<p>
Fir
stli
neoftext<br/>
Secondlineoftext<br/>
Thir
dlineoftext<br/>
</p>
S
crol
l
ed
Wi
tht
hef
oll
owi
ngal
ter
ati
onbackgr
ound-
att
achment
:f
ixed;t
heout
putwi
llbeasshownbel
ow
S
crol
l
ed
6.backgr
ound:t
hisi
susedt
ocombi
neval
uesoft
heaboveat
tr
ibut
esi
nanyor
der
.
I
mpor
tantf actst onot eaboutbackgr oundi nclude:
 Oneoft hewaysi nwhi chcol ori srepresented,isbyusi ngt heRGBcodei nhexf or
m.Each
oft het hreepr imarycol ors(Red,Gr een,andBl ue)isr epresentedby2hexdi gi
tsmakinga
totalof6di gits.Colorscanber endereddi ff
erentlyfrom browsert obr owser
,hencer aisi
ng
theneedt ousecol orswi t
hr enditionindependentoft hebr owser s.Thesearecal l
edbrowser
-safecol ors.Thesecol orshavei denticaldigit
sr epresentingeachoft hepr imarycolor
component s.Forexampl eacol orlike#00f f00,#3399f farebr owser-saf
e,whi l
e#00ffcais
notbr owser -
safe.
 Itisal soi mpor tanttoensur et hatcont rastbetweenbackgr oundcol orandf ontcolori
sas
highaspossi bletoensur ethatt hetextsont hepagear evisible
 Iti
sadvisabletousebackground-colorwhenusi ngbackgr
ound-i
mage.Thi
sisbecausethe
backgr
oundi mageisnor mall
yloadedl ast,henceitwi
llbebet
terforacol
ortobeinplace
whil
ewai t
ingfort
heloadingofthebackgr oundimagetobecompl et
ed.
 Imageswi thlow cont
rast(few colorvariati
ons)arebestsuit
edf oruseasbackground
i
mage.
LI
STS
Pr
oper
ti
esusedf orstyli
nglist
si nclude:
1.li
st-
styl
e-type:cont r
olst het ypeofmarkerusedf
ortheli
st.Thevalueforanorder
edli
st
dif
ferfrom t hosef oranunor deredl
ist
.Foranunor
deredlist
,theval
uesare:none,di
sc
(fi
ll
edcircle,default
),ci
rcle,andsquar
e.
STYLE
#a{
li
st-st
yle:
cir
cle}
#b{l
ist
-st
yle:
square}
CONTENT
<ulid="
a">
<li
>Fir
st</
li
>
<li
>Second</l
i
>
</ul
>
<ulid="
b">
<li
>Fir
st</
li
>
<li
>Second</l
i
>
</ul
>
Someoft heval
uesavai
labl
efororder
edli
stincl
ude:deci
mal(1,2,3)–defaul
t,deci
mal -
l
eading-zero(
01,02,03)
,lower
-al
pha(a,b,c)
,upper-
alpha( ,l
A,B,C) ower
-r
oman( i,i
i,i
ii
),
upper-
roman( I
,II
,II
I)
.
CONTENT&STYLE
<olstyl
e="l
ist
-st
yle:
decimal-l
eadi
ng-zer
o">
<li
>Fir
st</
li>
<li
>Second</li
>
</ol
>
<olstyl
e="l
ist
-st
yle:
lower-
alpha">
<li
>Fir
st</
li>
<li
>Second</li
>
</ol
>
<olstyl
e="l
ist
-st
yle:
upper-
alpha">
<li
>Fir
st</
li>
<li
>Second</li
>
</ol
>
<olstyl
e="l
ist
-st
yle:
lower-
roman">
<li
>Fir
st</
li>
<li
>Second</li
>
</ol
>
<olstyl
e="l
ist
-st
yle:
upper-
roman" >
<li
>Fir
st</
li>
<li
>Second</li
>
</ol
>
2.l
ist
-st
yle-
posi
ti
on:usedtoindi
catewher
ethemarkershoul
dbeposit
ionedwhent
het
exti
s
l
ongerthanali
ne.Valuesf
orthi
sproper
tyar
e:i
nsi
de,andoutsi
de(
defaul
t)
.
CONTENT&STYLE
<ol>
<listyl
e="l
ist
-st
yle-posi
ti
on:
inside">
Firstl
ineoftextintheorderedlistusedint
heexample.
</li
>
<listyl
e="l
ist
-st
yle-posi
ti
on:
outside">
Secondl i
neoft extint
heorder edli
stusedint
he
exampl e.
</li
>
</ol>
<ul>
<listyl
e="l
ist
-st
yle-posi
ti
on:
inside">
Firstl
ineoftextintheunorderedl i
stusedi
ntheexample.
</li
>
<listyl
e="l
ist
-st
yle-posi
ti
on:
outside">
Secondl i
neoft extint
heorder edli
stusedint
he
exampl e.
</li
>
</ul>
3.l
ist
-styl
e-i
mage:usedt oprovideani
maget obeusedasmar
kerbot
hforor
der
edand
unorderedli
sts.Theval
uei
ttakesi
sur
l(
imagepat
h).
CONTENT&STYLE
<olstyl
e="l
ist
-st
yle-
image:
url
(i
mages/
logo.
png)
">
<li
>Fir
st</
li>
<li
>Second</li
>
</ol
>
<ulstyl
e="l
ist
-st
yle-
image:
url
(i
mages/
logo.
png)
">
<li
>Fir
st</
li>
<li
>Second</li
>
</ul
>
4.l
ist
-st
yle:i
susedt
ocombi
neval
uesoft
heabovepr
oper
ti
esi
nanygi
venor
der
.
TABLES
Proper
tiesforstyli
ngtablesi ncludesomepr opert
iesthathavealr
eadybeenl ookedatbefore.
Theseinclude:
1.border:usedtospecifyt heborderpropert
iesofthetabl
e.Whenspeci
fiedforthet
ablet
ag,it
surroundstheentir
et able.Ift
hecel l
softhetablearetohaveborder
s, t
henboththetdand
thtagsar etohavetheirownbor der
s.Thisatt
ribut
ehasnoeffectontr
.Followtheevol
uti
on
ofrulesbelowforil
lustrati
on:
CONTENT( NOSTYLEEFFECT)
<table>
<tr><th>EEE433</t
h><th>EEE439</
tr>
<tr><td>45</
td><t
d>54</td></
tr>
</table>
Fol
lowt
heef
fectoft
hest
yler
ulesast
heyar
eint
roduced.
STYLE
tabl
e{bor
der
:sol
idt
hin;
}
STYLE(noef f
ectontr
)
tabl
e,t
r{bor
der:sol
idt
hin;
}
STYLE
tabl
e,t
h{bor
der
:sol
idt
hin;
}
STYLE
tabl
e,t
h,t
d{bor
der
:sol
idt
hin;
}
2.padding:usedtospecifythedist
ancebet
weentheborderofatabl
ecel
landitscont
ent.
Thisattr
ibut
einf
luencesthesi
zeofthecel
lsi
ntabl
e.Bel
owisademonstr
ati
onoftheef
fect
oftheaboveproperty.
STYLE
tabl
e,th,t
d{border
:sol
idt
hin;
}
tabl
e{padding:
8px}
STYLE
tabl
e,t
h,td{
border:sol
idt
hin;
}
tabl
e,t
h{paddi
ng:8px}
STYLE
tabl
e,t
h,t
d{border:soli
dthi
n;}
tabl
e,t
h,t
d{padding:8px}
3.width:set
showwi dethetabl
eorit
scel l
sshouldbe.Allcell
sinthesamecolumnhavethe
samewi dth(
whendisplayed)
.Thewidthoft
hetableissharedequall
ybetweent
hecol
umns.
Thedemonst r
ati
onwillbedonebyfirstr
emovingthecontribut
ionofpaddi
ngstot
hewidth
ofthetabl
e.
STYLE
tabl
e,t
h,t
d{bor
der
:sol
idt
hin;
}
STYLE( widt
hviaacell
)
table,
th,t
d{bor
der:sol
idt
hin;
}
/*thwhichisnextsi
bli
ngtoath*
/
th+th{
width:
200px}
STYLE( widt
hvi at
able)
tabl
e,th,t
d{border
:soli
dthi
n;}
tabl
e{widt
h:300px}
4.text
-ali
gn:specif
iesthehori
zontalal
ignmentoft hetextwithi
nacel l
.Thevaluesforthi
s
attr
ibut
einclude:lef
t(def
aul
tfortd)
,cent
er(defaultf
orth)andright
.Thisat
tr
ibutewil
lnow
beusedt oaligntexti
ntdtot
hecenterhori
zontall
y.
STYLE
tabl
e,th,t
d{border:sol
idt
hin;
}
tabl
e{widt
h:300px}
td{t
ext
-ali
gn:center}
5.hei
ght
:set
sthehei
ghtofacel
l.Canappl
i
edt
otrt
ogi
veal
lrowssamehei
ght
.
STYLE( heightfort hal
one)
table,th,t
d{ border:sol
idt
hin;
}
table{width:300px}
td{text-
ali
gn: center}
th{height:
40px}
STYLE( heightforallrows)
table,t
h, t
d{ border:sol
idthi
n;}
table{
wi dth:300px}
td{t
ext-ali
gn: center}
tr{
height:40px}
6.ver
ti
cal-
ali
gn:usedt
osetthever
ti
calal
ignmentoft
het
exti
nacel
l.Val
uesf
ori
tincl
ude:t
op,
middl
e(defaul
t),
andbot
tom.
STYLE
table,t
h, t
d{border:sol
idt
hin;
}
table{
wi dth:
300px}
td{t
ext-ali
gn:center}
tr{
height:40px}
tr{
verti
cal-al
ign:bottom}
7.backgr
ound-
col
or:changebackgr
ound-
col
oroft
abl
eorcel
l
STYLE
table, t
h, t
d{border:soli
dthi
n;}
table{wi dth:
300px}
td{text-ali
gn:center}
tr{
hei ght:40px}
tr{
ver ti
cal-al
ign:bottom}
th{backgr ound-color:pi
nk}
8.backgr
ound-
image:usedt
osett
hebackgr
ound-
imageofat
abl
eorcel
l.
STYLE
table, t
h, t
d{border:solidthin;
}
table{wi dth:
300px}
td{text-ali
gn:center}
tr{
hei ght:40px}
tr{
ver ti
cal-al
ign:bottom}
th{backgr ound-color:pink}
td{backgr ound-image: url(
bkgrnd.
jpg)
}
Ot
herpr
opertiesspecifi
ct otabl
ear e:
1.border-spacing:I
sgi vent
ot ablet
ospeci f
yt hedi
stancebetweentheborder
sofneighbori
ng
cell
s.Ittakesoneort wovaluesoflength.Ifonl
yonei sprovi
ded,i
tref
erstobothhori
zontal
andver t
icalspacingwhi l
ei ftwovaluesar eprovided,i
trefer
st ohori
zontalandvert
ical
spacingr especti
vely.
STYLE
table, t
h, t
d{border:solidthin;
}
table{wi dth:
300px}
td{text-ali
gn:center}
tr{
hei ght:40px}
tr{
ver ti
cal-al
ign:bottom}
th{backgr ound-color:pink}
td{backgr ound-image: url(
bkgrnd.
jpg)
}
table{bor der-
spacing:5px}
2.empty-cel
ls:usedtospeci f
ywhet hert
hebordersofemptycell
sshoul
dbevi
sibl
eornot.
Thevaluesf ort
hispropert
yare:show(def
aul
t),hi
de,
andinher
it
.Anewrowwil
lbeaddedt
o
theabovet abl
etoil
lustr
atethi
s.
MODI FIEDCONTENTWI THABOVESTYLE
<table>
<tr><th>EEE433</t
h><th>EEE439</
tr>
<tr><td>45</
td><t
d>54</td></t
r>
<tr><td>70</
td><t
d></t
d></ t
r>
</table>
STYLE
table, t
h, t
d{ border:solidthin;
}
table{wi dth:300px}
td{text-ali
gn: center}
tr{
hei ght:40px}
tr{
ver ti
cal-align:bottom}
th{backgr ound- color:pink}
td{backgr ound- image: url(
bkgrnd.
jpg)
}
table{bor der-spacing:5px}
table{empt y-cel
ls:hi
de}
3.border-coll
apse:usedtospeci
fywhatshouldhappentothebordersofcell
s.Val
uesfort
his
are:collapse(oneborder)
,andsepar
ate(t
wobor ders–defaul
t).I
fcoll
apseisspeci
fi
edfor
thi
spr operty,
theborder-
spaci
ngandempty-cel
lsproper
ti
esbecomei nef
fecti
ve.
STYLE
table, t
h, t
}
table{wi dth:300px}
td{text-ali
gn: center}
tr{
hei ght:40px}
tr{
ver ti
cal-align:bottom}
th{backgr ound- color:pink}
bkgrnd.
jpg)
}
table{empt y-cel
ls:hi
de}
table{bor der-coll
apse: coll
apse}
4.capti
on-side:speci
fi
esthepartofthet
ablet
okeept
hecapt
ion.Val
uesf
ort
hepr
oper
ty
i
nclude:top(defaul
t)
,ri
ght
,bot
tom,andl
eft
.
NEW TABLEWI THCAPTI ON
<table>
<capt i
on>Experi
ment alTable</capt
ion>
<tr><th>EEE433</ t
h><th>EEE439</ tr
>
<tr><td>45</
td><td>54</td></t
r>
<tr><td>70</
td><td></td></t
r>
</table>
STYLE
table, t
h, t
}
table{wi dth:300px}
td{text-ali
gn: center}
tr{
hei ght:40px}
tr{
ver ti
cal-align:bot t
om}
th{backgr oundcol or:
pink}
bkgrnd.
jpg)
}
table{empt y-cel
ls:hide}
table{bor der-collapse:coll
apse}
table{capt ion-side:bottom}
5.t
abl
e-layout:usedtospecif
yift
hewidt
hofatablecel
lshoul
dbeautomaticall
yadjust
edto
f
iti
tscontent,ifthewidt
hprovi
dedi
snotenough.Theval
uefort
hispropertyi ude:aut
ncl o
(
default
),f
ixed,andinher
it
.
OUTLI
NE
Outlinesarel i
kebordersinthattheyar epresentedaroundelements.Thedifferencebetweent hem
andbor dersist hattheydon’teatupspacel ikebordersdo.Dur i
ngi mplement at
ion,valuesof
att
ributesspeci f
iedrefert
oal lfoursides,becausenosi decanbet reatedsepar at
ely,l
i
keisdone
wit
hbor derswher ethewordst op,lef
t,r
ight,andbott
om ar eusedtogivenpreferenti
altr
eatmentto
cert
ai npartsoftheboundar y.Attr
ibutesassociatedwiththeoutl
inepropert
yinclude:
1.out l
ine-
width
2.out
li
ne-style
3.out
li
ne-color
4.out
li
ne:thisisusedtocombi
neval
uesoft
heaboveproper
tiesi
nanyorder.
Thef
ir
stt
hreepr oper
ti
estaket
hesameval
uesasthei
requi
val
entsint
heborderproper
ty.
STYLE
#border{
bor
der:sol
id4pxbl
ue}
#out
line{
out
li
ne:sol
id4pxbl
ue}
CONTENT
<pi
d="bor
der"
>Par
agr
aphmar
kedwi
thabor
der s</
p>
<pi
d="out
li
ne"
>Par
agr
aphmar
kedwi
thanoutl
ine</p>
:
FOCUSPSEUDO-
CLASS
Thisisapseudo- classthatenablessetti
ngstylerulesforanelementwhi chhasr ecei
vedfocus.
Forexampl eani nputel ementinaf orm,canhaveast yl
edif
ferentfr
om ot her
soncei tr
eceives
focusandlosesi twheni tlosesfocus.
 Oneoft hewayst omaket hesi
zeofal abelexpr
essedwi t
hthewi dth-pr
opert
yandheight-
pr
operty,effecti
veisforittobefl
oated.
 Effecti
velysi zi
ngal abeli
simportantforthepurposeofproperali
gnmenti naform.
Thisisdemonst ratedintheexampl ebel
ow:
STYLE
/*i
fani nputelemetget sfocussetbackgr
oundt
oyel
low*
/
i
nput :
focus{
backgr ound-col
or:
yell
ow;
}
/*dimensi onforal
llabels*/
l
abel {
wi dt
h:100px;
padding:2px;
}
.
first{
fl
oat :
lef
t}
CONTENT
<for
m act i
on=""met
hod="post
">
<fi
eldset>
<l
egend>LABELSFLOATED</ l
egend>
<p><labelcl
ass="
fi
rst
">Cour
seCode: </
label><inputtype="
text"size="7"
/></
p>
<p><labelcl
ass="
fi
rst
">Cour
seTitl
e:</l
abel><inputtype="t
ext"size="40"/
></p>
</f
ieldset>
<fieldset>
<legend>LABELSNOTFLOATED</ l
egend>
<p><l abel>Cour
seCode:</
label><inputtype="
text"size="7"
/></
p>
<p><l abel>Cour
seTi
tl
e:</l
abel><inputtype="t
ext"size="40"/
></p>
</fieldset>
</form>
GENERATEDCONTENT
:
bef
ore&:
aft
erPseudo-
Classes
Theseclassesareusedt oaddext r
acontentbeforeandaft
ertheselectedel
ement
.Thecont ent
-
propert
yisgivenaval uewhichi saddedt otheselect
edelement
.Val uesgi
ventothi
sattri
bute
i
nclude:
1.stri
ngenclosedi ndoublequotes
2.URLusedt oaddandi mage, t
extorhtmldocument
3.counterusedf orautomati
call
ynumber ingel
ementsonapage
4.open-quote:addsopeningdoublequot es
5.close-
quote:addacl osi
ngquot e
Severaloft
hesecanbegi ventothecontentproper
ty,t
heyj
usthavetobeseparat
edwithspace.
STYLE
p.abstr
act:aft
er{
content:"Youneedt
oregi
stert
oreadf
ullar
ti
cle.
";
color:
blue;
}
CONTENT
<pclass="
abstr
act"
>Thisbookteacheshowtowri
teHTML,XHTMLand
CSSsot hatyoucanstartcr
eat
ingyourownwebsites.I
tal
sohel
psyouon
thewaywi t
hdesignadvice,
andabasictut
ori
alonJavaScr
ipt
.</
p>
Count
er
Thecount
er()functi
onisusedt ot akecount,wheneverthebr owsercomesacrossagivenHTML
el
ement.I
tisusefulforaut
omat icall
ynumberingsecti
onsofadocument .
1.Thecount er-
resetproper
tyi susedtocreat
eandsetcount er
sto0.
2.Theval uegiventothispropertyisli
keavari
abletocountt hespeci
fi
edel
ement.
3.counter-i
ncrementisusedt oi ncr
ementacountervariable
4.counter(var
iable_
name)ret urnsthecurr
entcountinthevar i
abl
e.
Theexamplebelowshowshowt hisisdone.
STYLE
/*Createcount er sinbody* /
body{
counter-reset:chapt er;
counter-reset:sect ion;
}
/*Onencount eringh1* /
h2{
counter-increment :chapt er;
counter-reset:sect ion;
}
/*Onencount eringh2* /
h3{count er-
increment :section}
/*Contentt oaddt oh1* /
h2:before{
content:"Chapt er"count er (chapt
er)":"
}
/*Contentt oaddt oh2* /
h3:before{
content:counter (chapt er)"."counter
(secti
on)""
}
CONTENT
<h2>IntroducingWebTechnologies</
h2>
<h3>Intr
oducingHTML</ h3>
<h3>Intr
oducingCSS</h3>
<h3>Intr
oducingXHTML</ h3>
<h2>St r
uctureofDocuments</h2>
<h3>Text</h3>
<h3>List
s</h3>
<h3>Tables</h3>
MI
SCELLANEOUSPROPERTI
ES
THEdi
spl
ayPROPERTY
Thispropert
ypr ovi
desameansoff orci
nganelementtoberender
edasabl ockel
ementifi
tisan
i
nline-
element,andinli
ne-
elementtobedispl
ayedasablockelement.Theatt
ri
but
esgivent
ot hi
s
propert
yare:
1.inli
ne:theaffect
edelementshoul
dbedispl
ayedasaninli
neelement.
CONTENT
<p>Fi
rstpar
agr
aph</p>
<p>Secondpar
agr
aph</p>
AFTERAPPLYI NGSTYLE
p{
displ
ay:
inl
ine}
2.bl
ock:t
heaf
fect
edel
ementshoul
dbedi
spl
ayedasabl
ockel
ement
CONTENTWI THOUTSTYLE
<span>I
nli
neexpr
essi
on1</span>
<span>I
nli
neexpr
essi
on2</
span>
AFTERAPPLYINGSTYLE
span{
displ
ay:
block}
3.none:t
heel
ementshoul
dnotbedi
spl
ayed,
wit
hit
sspacef
reedup.
STYLE
p{
border
:dot
ted2pxbl
ack}
CONTENT
<p>Par
agraph1</p>
<pid="
ii
">Par
agraph2</
p>
<p>Par
agraph3</p>
STYLE
p{
border
:dot
ted2pxbl
ack}
#i
i{
displ
ay:
none}
4.i
nli
ne-
block:usedt
omakeaninli
neel
ementbedi
spl
ayedasi
nli
ne,butpr
ovi
deamedium
vi
awhichsomebl ockel
ementpr
oper
ti
essuchaswidt
handheight
,canbeaddedt
ot he
el
ement.
STYLE
span{
border:
dotted1pxbl
ack;
width:80px;
}
CONTENT Wi
dthhasno
<span>Span1</
span>
<span>Span2</
span>
STYLE
span{
border:
dotted1pxbl
ack;
di
splay:i
nli
ne-bl
ock;
width:80px;
}
Wi
dthnowhasan
THEvi
sibi
li
tyPROPERTY
Thi
spr
oper
tyi
susedt
oei
thermakeaboxvi
sibl
eorhi
dden,
andasexpect
edi
tsval evi
uesar sibl
e
(
defaul)andhi
t dden.I
fabl
ocki
shi
ddenusi
ngt
hevi
sibi
li
typr
oper
ty,
itsspacei
nthel
ayouti
sst
il
l
r
eserved.
STYLE
span{
di
splay:i
nli
ne-bl
ock;
widt
h:80px;
}
span,p{border
:dot
ted1pxbl
ack}
.
ii
{vi
sibi
li
ty:
hidden}
CONTENT
<span>Span1</ span>
<spanclass="i
i"
>Span2</span>
<span>Span3</ span>
<p>Paragraph1</p>
<pclass="i
i"
>Paragraph2</
p>
<p>Paragraph2</p>
Bor
der
-Radi
us
I
tisusedtoprovi
deaboxar oundedcornerwi
ththespeci
fi
edval
ueasr
adi
us.Forexampl
ebor
der
-
radi
us:10px.Forbr
owserversi
onsthatdonotsuppor
tthi
satt
ri
but
e:
STYLE
div{
width:180px;height :50px;
border:sol
id;mar gin:4px;
text
-align:
center
}
div+div{bor
der-
r adius:20px}
CONTENT
<di
v>Boxwi
thr
egual
aredge</
div>
<di
v>Boxwi
thr
oundededge</
div>
Box-
Shadow
Thi
spr
oper t
yisusedt odi
spl
ayashadowaroundabox.I
ttakesval
uesf
or:
1.horizontaloffset
2.verti
caloffset
3.blurinpixelswi t
h0pxasdef
ault(
thel
owert
hisval
ue,theshar
per
)
4.color(defaultshadowcol
ori
sblack)
STYLE
div{
width:180px;hei
ght:50px;
border:soli
d;margi
n:15px;
text
-align:
center
;
box-shadow:10px10px;
}
div+div{
border-radi
us:
20px;
box-shadow:15px15px8pxgrey
}
CONTENT
<di
v>Boxwi
thr
egual
aredge</
div>
<di
v>Boxwi
thr
oundededge</
div>
MORESELECTORS
Theseselectorsar
efabri
catedfrom pseudo-cl
asses.Theyincl
ude:
1.NthChi ldSel
ect
or-p: nt
h-chi
ld(
4)referstoaparagraphthati
sthef
our
thchi
ldofi
tspar
ent
.
It
ssi bli
ngsmayincludeotherelements.
STYLE
p:
nth-
chi
ld(
4){
col
or:
blue}
CONTENT
<p>Par
agr
aph1</
p>
<p>Par
agr
aph2</
p>
<p>Par
agr
aph3</
p>
<p>Par
agr
aph4</
p>
2.Nthl
astchi
ldselect
or-p:nt
h-l
ast
-chi
ld(
4)ref
erst
oaparagrapht
hati
sthe4t
hchi
ldcount
ed
f
rom bot
tom.Otherelement
sarecounted,
itt
heyarepr
esent.
STYLE
p:
nth-
last
-chi
ld(
4){
col
or:
blue}
CONTENT
<p>Par
agr
aph1</
p>
<p>Par
agr
aph2</
p>
<p>Par
agr
aph3</
p>
<p>Par
agr
aph4</
p>
3.Nthoftypeselector-p:
nth-
of-
type(3)r
efer
stotheparagr
aphthati
sthe3rdparagr
aph(
chi
ld)
i
nt heparentelementcountedf r
om thetop.Otherel
ement
smaybei nt
ersper
sedbet
ween
t
heparagraphs, butonl
yparagraphsarecount
ed.
STYLE
p:
nth-
of-
type(
3){
col
or:
blue}
CONTENT
<p>Par
agraph1</p>
<h4>Header1</
h4>
<h4>Header2</
h4>
<p>Par
agraph3</p>
<p>Par
agraph4</p>
4.Nthlastoftypesel
ect
or-p:nt
h-l
ast-
of-
type(
3)i
ssi
mil
art
otheabovesel
ect
or,buti
nthi
s
casecount
ingisdonef
rom t
hebottom.
STYLE
p:
nth-
last
-of
-t
ype(
3){
col
or:
blue}
CONTENT
<p>Par
agraph1</p>
<h4>Header1</
h4>
<h4>Header2</
h4>
<p>Par
agraph3</p>
<p>Par
agraph4</p>
5.Lastchi
ldsel
ector–p:l
ast-
chi
ldr
efer
stot
hep-
elementt
hati
sthel
astchi
ldofi
tspar
ent(
it
mustbethelastchi
ldofi
tspar
ent
).
STYLE
p:
last
-chi
ld{
col
or:
blue}
CONTENT
<p>Par
agraph1</p>
<h4>Header1</
h4>
<h4>Header2</
h4>
<p>Par
agraph3</p>
<p>Par
agraph4</p>
6.Firstoftypesel
ect
or– p:f
ir
st-
of-
typer
efer
stot
hep-
elementt
hati
sthef
ir
stofi
tst
ype
(paragr
aph)int
heparent
.
STYLE
p:
last
-chi
ld{
col
or:
blue}
CONTENT
<h4>Header1</
h4>
<p>Par
agraph1</p>
<h4>Header2</
h4>
<p>Par
agraph3</p>
<p>Par
agraph4</p>
7.Lastoftypesel
ect
or–p:
last
-of
-t
yper
efer
stot
hep-
elementt
hati
sthel
astofi
tst
ypei
nthe
parent
.
STYLE
p:
last
-of
-t
ype{
col
or:
blue}
CONTENT
<h4>Header1</
h4>
<p>Par
agraph1</p>
<p>Par
agraph3</p>
<p>Par
agraph4</p>
<h4>Header2</
h4>
8.Onl
ychil
dsel
ect
or–p:
onl
y-chi
ldr
efer
stot
hep-
elementt
hati
stheonl
ypar
agr
aphi
nthi
s
par
ent
.
STYLE
p:
last
-of
-t
ype{
col
or:
blue}
CONTENT
<h4>Header1</h4>
<p>Paragraphwit
hsibl
ings</p>
<div>
<p>Paragraphwit
houtsibl
ings</
p>
</div>
<h4>Header2</h4>
9.Onl
yoft
ype–p:
onl
y-of
-t
yper
efer
stoap-
elementt
hati
stheonl
yp-
elementi
nthepar
ent
.
STYLE
p:
only-
chi
ld{
col
or:
blue}
CONTENT
<h4>Header1</h4>
<p>Paragraphwit
hsibl
ings</p>
<div>
<p>Paragraphwit
houtsibl
ings</
p>
</div>
<h4>Header2</h4>
10.
Empt
ysel
ect
or–p:
empt
yref
erst
oap-
elementt
hathasnochi
ld,
notevent
ext
.
STYLE
di
v{widt
h:100px;hei
ght
:20px;bor
der
:sol
id}
di
v:empty{backgr
ound:
blue}
CONTENT
Emptydi
v:<di
v></div>
di
voccupi
edbyempt yel
ement<div><p></
p></
div>
di
voccupi
edbyt ext<di
v>Cont
ent</div>
11.
Tar
getsel
ect
or– p:
tar
getr
efer
stoap-
elementt
hati
sthecur
rentact
ivet
argetofal
ink
(
cli
cked)f
rom t
hesamepage.
STYLE
p:
tar
get{
backgr
ound:
cyan}
CONTENT
<ahr
ef="
#one"
>Li
nk1</
a>t
opar
agr
aph1<br
/>
<ahr
ef="
#two"
>Li
nk2</
a>t
opar
agr
aph2 Bef
orecl
icki
ng
<pi
d="
one"
>Par
agr
aphoneandi
tscont
ent
</p>
<pi
d="
two"
>Par
agr
aphtwoandi
tscont
ent
</p>
Af
tercl
icki
ngLi
nk1 Af
tercl
icki
ngLi
nk2
12.
Enable/
Disabledsel
ect
or–input
:enabledrefer
stoani
nputel
ementt
hati
senabl
edwhi
le
input
:di
sabledref
erst
oonet
hatisdisabled.
STYLE
i
nput:
enabled{
background:
blue}
i
nput:
disabl
ed{backgr
ound:r
ed}
CONTENT
Enabledtextfi
eld<i
nputtype="t
ext"/><br
/><br
/>
Disabledtextf
iel
d<inputtype="
text"di
sabl
ed/>
13.
Checkedsel
ect
or–i
nput
:checkedr
efer
stoani
nputel
ement(
checkbox)whi
chi
schecked.
STYLE
i
nput:
checked{
mar
gin-
lef
t:
100px}
CONTENT&STYLE
<divstyl
e="
border
:sol
id"
>
<inputt
ype="
checkbox"checked/>CheckBox1<br
/>
<inputt
ype="
checkbox"/>CheckBox2
</div>
14.
Notsel
ector–p:not(
.speci
al)r
efer
stoap-el
ementthati
snotamemberoft
hecl
assspeci
al.
Thenot
-funct
iontakesaselect
orasargumentascanbeseen.
STYLE
p:
not(
.cut
e){
bor
der
:dot
ted}
CONTENT&STYLE
<pcl
ass="
cutefi
ne"
>Paragr
aph1</p>
<pcl
ass="
cute"
>Paragr
aph2</p>
<pcl
ass="
fi
ne">Par
agraph3</
p>
<pcl
ass="
cute"
>Paragr
aph4</p>
<pcl
ass="
fi
ne">Par
agraph4</
p>
Nt
hsel
ect
orscanal
sowor
kwi
thkeywor
dssuchasoddandeveni
npl
aceofnumber
s.
STYLE
td{
bor der:
solid1px;width:100px;
text-al
ign:center
}
table{border-coll
apse:
collapse}
tr:
nth-chil
d(odd) {
background:cyan}
tr:
nth-chil
d(even) {
background:orange}
CONTENT&STYLE
<table>
<tr><td>r
:1c:
1</
td><t
d>r
:1c:
2</
td></
tr>
<tr><td>r
:2c:
1</
td><t
d>r
:2c:
2</
td></
tr>
<tr><td>r
:3c:
1</
td><t
d>r
:3c:
2</
td></
tr>
<tr><td>r
:4c:
1</
td><t
d>r
:4c:
2</
td></
tr>
<tr><td>r
:5c:
1</
td><t
d>r
:5c:
2</
td></
tr>
<tr><td>r
:6c:
1</
td><t
d>r
:6c:
2</
td></
tr>
</table>
POSI
TIONI
NG
Nor
malorSt
ati
cFl
ow
Bydefault
,element sonawebpageappearoneaft
ertheother,andintheexactor
derthei
rcodes
appear.I
nli
neel ementsappearnextt
oeachot
herfr
om leftt
or ight
,whil
eblockel
ementsappear
undereachot her.Thi
smannerofposi
ti
oni
ngel
ementsiscall
edthenormalorstat
icfl
ow.
STYLE
div{
border:sol
id4pxblue;wi
dth:
204px}
p{
border:soli
d2pxblack;
width:200px
mar gi
n:0px;
}
CONTENT
<div>
<p>Herei
spar
agr
aphone.I
twil
lbepositionedontop</ p>
<p>Herei
spar
agr
aphtwo.I
t’
sposit
ionist hemiddl
e.</p>
<p>Herei
spar
agr
aphthr
ee.I
toccupiesthebottom.</p>
</div>
Therearetwoproper
ti
eswhichcanbeusedt
oposi
ti
onht
mlel
ement
sinamanner
,di
ff
erentf
rom
thenormalfl
ow.Thesepr
opert
iesar
e:
1.positi
on
2.float
Theposi
ti
onPr
oper
ty
Thisproper t yisusedtocont rolthepositi
onofacont entboxonapage.Thef ollowingpropert
ies
areusedwi t htheposit
ion-propertytoreposit
ionel ement s.Eachoft hem t akesval uerepresent
ing
adistance.Thesepr operti
esar e:top,l
eft
,bottom, andr ight.Thepositionpr opertytakesanyoft he
fourvaluesbel ow:
1.st atic:thisissameast henor malflowdi scussedabove.I tist hedef aultvalueandassuch
i
shar dlyusedasaval ueforthisproperty.
2.r elative:inthi
scaset heboxi sshi
fted(of f
set)from thepositi
oni twouldhaveoccupi edifi
t
wer epar tofanor malf l
ow.Theor iginalspacef ort heelementi nnor malf l
ow isst i
ll
mai nt ai
nedasar esulttheiniti
alsi
ze(hei ght)ofthecont ai
ningel ementi sunaffected.
Not e:anel ementthathasnobackgr oundcol or
,istransparent
.
STYLE
div{
border:sol
id4pxbl ue;
}
p{
border:soli
d2pxbl ack;
mar gi
n:0px;
background-color
:white
}
#move{
positi
on:r
elati
ve;
top:
15px;
l
eft:
-10px;
}
CONTENT
<div>
<p>Hereispar
agr
aphone.I
twi l
lbepositionedontop</p>
<pi d="
move"
>Her
eispar
agrapht wo.It
’spositi
onisthemiddl
e.</
p>
<p>Hereispar
agr
aphthr
ee.Itoccupiesthebottom.</p>
</div>
3.absolute:t
hereposi
ti
oningoftheelementi sdonei nsuchawayt hatthedist
ancesusedfor
offset
ti
ng/movingitar
emeasur edfrom thetop-leftcor
nerofit
spar entel
ement.Thespace
oft heelementremovedi snotreserved,hencet hesize(hei
ght)oft hepar
entelementis
reduced.Thewi dthofanabsol ut
elyposi t
ionedel ementhast obespeci fi
edexpli
cit
ly,
otherwiseitwi
ll
takeawi dt
hjustenought oaccommodat ei
tscontent.
STYLE
div{
border:sol
id4pxbl ue;wi
dth:204px}
p{
border:soli
d2pxbl ack;
width:200px;
mar gi
n:0px;
background-color:
white
}
#move{
positi
on:absolute;
top:
20px;
l
eft:
30px;
}
CONTENT
<div>
<p>Hereispar
agr
aphone.I
twi l
lbepositionedontop</p>
<pi d="
move"
>Her
eispar
agrapht wo.It
’spositi
onisthemiddl
e.</
p>
<p>Hereispar
agr
aphthr
ee.Itoccupiesthebottom.</p>
</div>
4.f
ixed:thi
sisusedtoposi
tionanelementatxandycoordinat
esfr
om t
het op-
lef
tcor
nerof
t
hebr owserandt
heposit
ionedel
ementdoesnotmoveiftheuseri
sscr
oll
ing.
STYLE
div.
header{
positi
on:fi
xed;
top:0px;
l
eft:0px;
padding:20px;
font-
size:28px;
color:#ff
ffff;
background-color:gr
ey;
border:solid2px#000000;
}
p{border:solidblack2px}
p.one{margin-top:100px}
CONTENT
<divcl ass="
header
" >
Begi nningWebPr ogramming
</div>
<pcl ass="one"
>
Thispagehast ocontainsever
alparagr
aphssoyoucanseetheeff
ectoff
ixedposi
ti
oni
ng.Fi
xedposi
ti
oni
ng
hasbeenusedont heheadersoitdoesnotmoveevenwhentherestoft
hepagescrol
ls.
</p>
<p>
alparagr
ectoff
ixedposi
ti
oni
ng.Fi
xedposi
ti
oni
ng
hepagescrol
ls.
</p>
<p>
alparagr
ectoff
ixedposi
ti
oni
ng.Fi
xedposi
ti
oni
ng
hepagescrol
ls.
</p>
TheZ-
IndexPr
oper
ty
Whenboxes( el
ements)ar emovedoutoft heirposi
ti
ons,theymayover l
apandt hebrowser
determineswhi chboxst aysont optheot her.Bydefaulttheyarear r
angedf rom bott
om up,
start
ingfrom thefir
stboxt ot
hel asti
.e.thelastboxisont opthestack.Thez-indexpropert
yis
usedt ocontroltheorderinwhichoverlappi
ngboxesst ackup.Theval uesgivent ot
hispropert
y
arenumber s.Boxeswi t
hthehigherz-i
ndexval ueareposit
ionedcl
osetot hetop,whil
ethosewi t
h
l
owerval uesaredeeperinthestack.
CONTENT
<pi
d="cyan">1.CYAN</p>
<pi
d="pink"
>2.PINK</p>
<pi
d="yell
ow">3.YELLOW</p>
<pi
d="grey"
>4.GREY</ p>
ORIGINALSTYLE
p{
border:soli
d;text-
ali
gn:r
ight
;
positi
on:absolute;
}
#cyan{
background-color:
cyan;
l
eft:0px;top:0px;
}
#pink{
background-color:
pink;
l
eft:60px;top:20px;
}
#yell
ow{
background-color:
yell
ow;
l
eft:100px;top:40px;
}
#grey{
background-color:
grey;
l
eft:140px;top:60px;
}
STYLEWI THZ- I
NDEX
p{
border:soli
d;text-
ali
gn:r
ight
;
positi
on:absolute;
}
#cyan{
background-color:
cyan;
l
eft:0px;top:0px;
z-
index:4
}
#pink{
background-color:
pink;
l
eft:60px;top:20px;
z-
index:3
}
#yell
ow{
background-color:
yell
ow;
l
eft:100px;top:40px;
z-
index:2
}
#grey{
background-color:
grey;
l
eft:140px;top:60px;
z-
index:1
}
Fl
oat
ingBoxes
Thefloatpropert
yallowsboxestof loatasf arl
eftorrightaspossibl
e.Thenextsi
bli
ngwil
lthen
fl
owar oundthefloat
edelement.Itisimportantt
oi ndi
cateawidthforanyfl
oat
edelement
.Values
fort
hef l
oatpropert
yincl
ude:l
eft,
right,none,andinher
it.
CONTENTWI THYETTOBEFLOATEDBOX
<p>
Thisisat extcomingbefor
et hefloat
edbox.I ti
snot
expectedtowr aparoundthefloatedboxbutr emainin
positi
on.
</p>
<div>
FloatedBox
</div>
<p>
Thisisat extcomingaft
erthef l
oatedbox.Itisexpect
ed
towr aparoundt hefl
oat
edboxbydef ault
.Thistextcan
bemadet ogoundercompl etelywiththeclearproper
ty
provided.
</p>
STYLE
div{
width:100px;hei
ght:50px;
background-col
or:
orange;
}
EFFECTOFFLOATI NGTHEBOXLEFT
div{
wi dt
h:100px;hei
ght:50px;
backgr ound-
col
or:
orange;
float
:left;
}
EFFECTOFFLOATI NGTHEBOXRI
GHT
div{
wi dt
h:100px;hei
ght:50px;
background-col
or:
orange;
float
:ri
ght;
}
TheCl
earPr
oper
ty
Bydefault,sur r
oundingel ementsf l
ow aroundaf loatedelement.Thecl ear-propert
yi susedt o
pr
eventthisdef aultbehaviorfr
om occurri
ng.Valuesgiventothi
spropertyinclude:
a.left:pr eventstheelementfrom wrappingaroundanel ementfl
oatedt othel ef
t.
b.r i
ght :preventstheelementf r
om wrappingaroundanel ementfl
oat edtot heri
ght.
c.bot h:pr eventstheel ementfrom wrappingir
respect
iveofthefloatdirectioni.
e.leftorr
ight
doesn’ tmat t
er.
d.none:def aul
tvalue.Iti
sgivenift
heel ementistowraparoundaf loatedone.
EFFECTOFCLEARI NGTHERI
GHTOF
THEWRAPPI NGPARAGRAPH
div{
wi dt
h:100px;hei
ght:50px;
background-col
or:
orange;
float
:ri
ght;
}
div+p{cl
ear:
ri
ght}
PAGELAYOUT
Bef
oreapagei screat
ed,itsstr
ucturemusthavebeenconcei
ved.Set
ti
ngupthepagei
nsucha
waythatit
slayoutmatchest hepreconcei
veddesi
gnwhetheri
nawifefr
ameormockup,r
equi
res
aknowledgeof :
1.t hemar ginpr
opertyofabox
2.posi t
ioning
3.f l
oati
ngel ement
s
Abasicpagelayoutswillnowbeexami ned.
B C
D
Therear
eseveralwaystogettheabovelayouti
mplement
ed.
1.Appr
oach1
i. KeepAi nnormalfl
ow
ii
. Fl
oatBt othelef
ttomakeCwr apt
oit
sright
ii
i. Gi veCal ef
tmarginequalt
ot hewi
dthofBtoexposet
hepor
ti
onbehi
ndB
STYLE
div{
bor der
:solid1px;
box- si
zing:border-
box;
text-al
ign:center;
}
#a, #d{width:100%}
#b{wi dt
h: 20%;float:
lef
t;height
:100px}
#c{wi dt
h:80%;mar gin-
left
:20%;height
:100px}
CONTENT
<di
vid="
a">A</
div>
<di
vid="
b">B</
div>
<di
vid="
c">C</
div>
<di
vid="
d">D</di
v>
2.Appr
oach2
i
. Keepal
lsegment
sinnor
malf
low
i
i. GiveCthef
oll
owi
ngmar
gins:l
eft=wi
dthofB,
top=-
vehei
ghtofB(
Dwi
llbesucked
upward)
STYLE
div{
bor der
:solid1px;
box- si
zing:border-box;
text-al
ign:center;
}
#a, #d{width:200px}
#b{wi dt
h: 50px;height :
100px}
#c{
widt h:
150px;mar gin-l
eft:
50px;
height:100px;mar gin-t
op:-
100px
}
CONTENT
<di
vid="
a">A</
div>
<di
vid="
b">B</
div>
<di
vid="
c">C</
div>
<di
vid="
d">D</di
v>
3.Appr
oach3( ensur
ethebodyhasamar gi
nof0al
lround,
forexpect
edr
esul
t)
i
. Gi
veallsegmentsabsolut
eposi
ti
oning
i
i. Of
fsetBby20pxt op
i
ii
. Of fsetCby20pxt op,and50pxl
eft
i
v. Of fsetDby120pxt op
STYLE
body{ mar gin:
0px}
div{
bor der:solid1px;
box- si
zi ng:border-
box;
text-ali
gn: center;
posi ti
on: absolute;
}
#a, #d{wi dth:200px}
#b{wi dth: 50px;height:
100px;top:20px}
#c{wi dth:150px;hei ght:
100px;top:20px;l
eft
:50px}
#d{top: 120px}
CONTENT
<di
vid="
a">A</
div>
<di
vid="
b">B</
div>
<di
vid="
c">C</
div>
<di
vid="
d">D</di
v>
Otherapproachescanalsobeappl
iedt
osetupt heabovelayout.Whatisusediscompl
etel
y
dependentonanunderst
andi
ngoft
hemeansavai
labl
eforreposi
ti
oningboxesonapage.
MULTI
-COLUMNWEBLAYOUT
Textwi thi
nasi ngleboxcanbepr esent
edi nmul t
ipl
ecol umns.Thi si susedmaj or l
yinwi de
screenst omaker eadingeasy.Itissimil
artothemet hodusedi nprintmedi a.Properti
esusedf or
thi
sar e:
1.col umn-count :t
henumberofcol umnsoft exti
spr ovidedasawhol enumber .Ifthisi
sused
inaf l
exiblebox,t henumberofcol umnsi smaintained,whi l
et heirwidthsgetadj ustedi n
responset ot heresi
zinggoingon.
2.col umn-wi dth:takesaval uethewi dt
hofeachcol umni npi xels.Itisthef avoredopt ion
whenwor kingwi thaboxt hathasaf l
exi
blewidth.Thi sisbecausei nt hecourseofr esizing
thebox,thenumberofcol umnsgetadj ustedautomat i
cal
ly,unli
ket heabovepr opert
yt hat
keepsthesamenumberofcol umns.
Inadditi
ontotheabovet wopr operti
es,t
heproper t
ycolumn-gapisusedt oprovideadi st
ancein
pixel
sbetweenthecolumns.
Itisi
mpor t
anttostatethat,l
ikemostCSS3pr oper t
ies,mostofwhichhaveal r
eadybeent r
eated,
supportfort
heseproperti
esisnotguar ant
eedint hemajorbrowsers.Gett
ingaroundt hi
srequi
res
theuseofcertai
nprefix.
 -moz-forunsupporti
vever si
onsofMozill
a
 -webkit
-forunsupporti
veversionsofChrome, OperaandSafari
Inordertoensureawi derangeofsuppor twhenusi ngthesepropert
ies,i
tisi
mpor tanttospecif
y
theversi
onwithoutprefi
xaswel lasthosewit
ht heprefi
xes.
STYLE
p{
width:100%;
-webkit-col
umn- count
:4;
-moz-col umn-count:
4;
column- count:4;
text-
align:j
usti
fy;
border:dotted;
}
CONTENT
<p>
Var i
abl esofnat ivedat at ypescont aint he
exactval ueassi gnedt othem, hencewhena
i
sassi gnedt heval uei nb, awi llcont aint he
previousval ueofb, eveni fbisal tered.Thi s
i
snott hecasewi thcl assesandt heir
objects.Ever ycl assi sal soat ypecal leda
referencedat at ype, whi let hevar iablest o
whi cht heirobj ectsofar eassi gned, ar e
calledr eferencevar iabl es.Ther easoni st hat,
thesevar iablesdonotcont aintheobj ect s
butar ef erenceorl inkt ot heseobj ect s.Ifone
referencevar iablei sassi gnedt oanot her ,
theybot henduppoi nt i
ngt othesameobj ect
,
andasar esultoft his, oner ef
er encevar iable
canbeusedt oal t
ert hest ateoft heobj ect,
whi l
et heot heronecanbeusedt odi spl ay
thenewst ate.
</p>
Not
icet
hatintheaboveexampl
e,t
hecol
umncountr emainedthesameonadjusti
ngthesizeof
t
hepage,whi
lethecol
umnwidt
handhei
ghtkeepschangi
nginresponset
othechangepagesize.
STYLE
p{
width:100%;
-webkit-col
umn- wi
th:150px;
-moz-col umn-widt
h:150px;
column- width:
150px;
text-
align:j
usti
fy;
border:dotted
}
CONTENT
<p>
Var iablesofnat i
vedat at ypescont ain
theexactval ueassi gnedt othem, hence
whenai sassi gnedt heval uei nb, awill
cont ainthepr eviousval ueofb, eveni fb
i
sal tered.Thi si snott hecasewi th
classesandt heirobj ects.Ever ycl assis
alsoat ypecal ledar efer encedat atype,
whi l
et hevar i
abl estowhi chthei robjects
ofar eassi gned, arecal ledr eference
variables.Ther easoni st hat,these
variablesdonotcont aint heobj ectsbuta
referenceorl inkt ot heseobj ects.Ifone
referencevar iabl eisassi gnedt oanot her,
theybot henduppoi ntingt othesame
object ,andasar esultoft hi
s,one
referencevar iabl ecanbeusedt oalterthe
stateoft heobj ect,whi l
et heot herone
canbeusedt odi splayt henewst ate.
</p>
Not
icet
hatmor
eimpor
tant
ly,
thenumberofcol
umnsi
schangi
ngwi
tht
her
esi
zingoft
hepage.
MEDI
AQUERI
ES
Responsi veWebDesi gnist hedesi gnappr oachusedt omakeasi nglewebpagebedi splayedi na
pleasantwayi ndifferentscr eensi zes.Medi aquer iesareusedt odeter
mi net hesi zeoft hecl i
ents
viewingdevi ce.Ther eturnedr esultisthenuseddet erminedt hestyli
ngtoappl y.Thequer yisused
toenvel opal lthestyler ul
est hatshoul dbeappl icabletopagewhenvi ewedont hisdevicesi ze.
Whenusedi nanembeddedst ylesheetmedi aqueryt akesthef or
m oftheexampl ebelow:
@medi ascr eenand( max- widt h:999px) {
//rulest ofollow
}
Theabovecanbei nterpretedas“ i
fthevi ewingdevi ceisascr eenwi t
hawi dthof999px, thestyle
rulesbel owshoul dbeappl ied. ”
Medi aquer i
escanonaccountoft heabovebeusedt oal t
erdisplayofapagewheni tist obe
printed.Anexampl eofanal ter ati
ont hatcanbedonei sther emovalofsidenavi gati
on,adver ts,so
thepagewi l
lbej ustaboutt hemai ncont entofthepage.
Theexampl ebel owdoest hisbyhi dingthenavi gationbef or
et hepagecont aininganavi gationand
apar agraphwassentt oapr inter.Inordert oreall
ypr ovet heeffectofthemedi aquery,t hepr i
nt
jobwi l
lbedonef ir
stwi thoutt hemedi aquer yandf i
nal l
ywi t
hi t
.
Wi thoutMedi aQuer y
STYLE
p,nav{
bor
der
:dot
ted}
CONTENT
<nav>PageNavi
gati
on</nav>
<p>Maincont
entforpr
int</
p> Pagebef
orePr
int
Pageaf
terPr
int
Wi
thMedi
aQuer
y
STYLE
p,nav{
bor
der
:dot
ted}
@medi apri
nt{
nav{
visi
bil
it
y:hi
dden}
}
Pagebef
oret
oPr
int
CONTENT
<nav>PageNavi
gati
on</nav>
<p>Maincont
entforpr
int</
p>
Pageaf
terPr
int
Iti
salsopossibl
et oputthestyl
erul
esthataret
obeoperati
onalbasedonther
esul
tofamedi
a
queryonanexternalst
ylesheetandgeti
tli
nkedt
othepage.Themediaquer
ywil
lbei
mplant
edi
n
thel
inktagused.Forexample:
<l
inkhr
ef=”
lar
ge.
css”r
el=”
styl
esheet
”medi
a=”
(max-
widt
h:789px)
”/>
Thequer
ycanal
sot
aket
hef
orm:
media=”
(min-
width:
481px)and(max-
widt
h:788px)”
Theexamplebel
owappli
estheconceptofmediaquerytoal
tert
hebackgroundandf
ontcol
orsof
thepar
agr
aph.Thecol
orsusedaredependentonthesi
zeofthebrowserwindow.
STYLE
p{
column-width:150px;
-moz-column-width:
150px;
-webkit
-col
umnwidt
h:150px
border:
dotted2px
}
@medi a(max-width:
500px){
P{
background-
color:
blue;
col
or:whit
e;
}
}
@medi a(max-width:
400px)
{
P{
background-
color:
yel
low;
col
or:bl
ack;
}
}
CONTENT
<p>
Var iablesofnat ivedat at ypescont aint he
exactval ueassi gnedt ot hem, hencewhen
aisassi gnedt heval uei nb, awi llcont ai
n
thepr evi
ousval ueofb, eveni fbi saltered.
Thisi snott hecasewi t
hcl assesandt hei r
object s.Ever yclassi salsoat ypecal leda
referencedat atype, whilet hevar iablest o
whi cht heirobject sofar eassi gned, are
calledr eferencevar iables.Ther easoni s
that, thesevar i
abl esdonotcont ainthe
object sbutar efer enceorl i
nkt ot hese
object s.Ifoner ef erencevar i
ablei s
assi gnedt oanot her, t
heybot hendup
point ingtot hesameobj ect,andasar esul t
ofthi s,oner eferencevar i
ablecanbeused
toal terthest ateoft heobj ect,whi lethe
otheronecanbeusedt odi splayt henew
state.
</p>
2DTRANSFORMS
Thetransform pr
opert
yi susedtomakegeomet ri
cal t
erati
onstoanelement
.Theval
uesgi
vent
o
thi
spropertyaremajor
lyinthefor
m offunct
ionsandt heyincl
ude.
1.translat
e:movesanel ementver
tical
lyand/orhor i
zont
all
ywit
houtaff
ecti
ngit
sposi
ti
oni
n
t
hedocumente. g.tr
ansf
orm:t
ranslat
e(10px,10px).
STYLE
div{
width:
150px;
height
:60px;
}
div:
nth-
chil
d(2)
{
-
webkit-t
ransf
orm:
tr
ansl
ate(
10px,
10px)
;
}
CONTENT
<di
vst
yle="
backgr
ound-
col
or:
red"></div>
<di
vst
yle="
backgr
ound-
col
or:
green"></ di
v>
<di
vst
yle="
backgr
ound-
col
or:
blue"></div>
2.t
ransl
ateX:causesamovementhor
izont
all
ye.
g.t
ransf
orm:t
ransl
ateX(
-20px)
STYLE
di
v{
widt
h:150px;hei
ght:
60px;
margin-
lef
t:
20px;
}
di
v:nt
h-chil
d(2){
t
ransform:t
ranslat
eX(-
20px)
;
}
CONTENT
<di
vst
yle="
backgr
ound-
col
or:
red"></div>
<di
vst
yle="
backgr
ound-
col
or:
green"></ di
v>
<di
vst
yle="
backgr
ound-
col
or:
blue"></div>
3.t
ransl
ateY:causest
hemovementver
ti
cal
lye.
g.t
ransf
orm:t
ransl
ate(
-20px)
STYLE
di
v{width:
150px;hei
ght
:60px}
di
v:nt
h-chil
d(2){
t
ransform:t
ranslat
eY(
-20px)
;
}
CONTENT
<di
vst
yle="
backgr
ound-
col
or:
red"></div>
<di
vst
yle="
backgr
ound-
col
or:
green"></ di
v>
<di
vst
yle="
backgr
ound-
col
or:
blue"></div>
4.rotate:r
otat
esanel ement.I
ttakesval
uesi
ndegreesdenot
edbydeg.Posi
tiveangl
esarefor
clockwiserotat
ion,whil
enegat i
veangl
esaref
orcountercl
ockwi
serotat
ions.Forexample
transfor
m:rotate(
60deg).
STYLE
di
v{width:
150px;height
:60px}
di
v:nt
h-chil
d(2)
{
t
ransform:r
otat
e(-45deg);
}
di
v:nt
h-chil
d(3)
{
t
ransform:r
otat
e(45deg);
}
CONTENT
<di
vst
yle="
backgr
ound-
col
or:
red"></div>
<di
vst
yle="
backgr
ound-
col
or:
green"></ di
v>
<di
vst
yle="
backgr
ound-
col
or:
blue"></div>
5.scal
e:reducesthewidthandhei
ghtofanel
ementbyt
henumberpr
ovi
ded.Forexampl
e
tr
ansfor
m:scale(0.
5).
STYLE
di
v{wi
dth:
150px;
hei
ght
:60px;mar
gin-
lef
t:
20px}
di
v:nt
h-chi
ld(
2){
transf
orm:
scal
e(0.
5)}
di
v:nt
h-chi
ld(
3){
transf
orm:
scal
e(1.
2)}
CONTENT
<di
vst
yle="
backgr
ound-
col
or:
red"></div>
<di
vst
yle="
backgr
ound-
col
or:
green"></ di
v>
<di
vst
yle="
backgr
ound-
col
or:
blue"></div>
6.scal
eX:i
ncr
easest
hewi
dthofanel
ementbyt
hef
act
orspeci
fi
ed.
STYLE
di
v{wi
dth:
150px;
hei
ght
:60px;mar
gin-
lef
t:
80px}
di
v:nt
h-chi
ld(
2){
transf
orm:
scal
eX(
0.5)
}
di
v:nt
h-chi
ld(
3){
transf
orm:
scal
eX(
2)}
CONTENT
<di
vst
yle="
backgr
ound-
col
or:
red"></div>
<di
vst
yle="
backgr
ound-
col
or:
green"></ di
v>
<di
vst
yle="
backgr
ound-
col
or:
blue"></div>
7.scal
eY:i
ncr
easest
hehei
ghtoft
heel
ementbyt
hef
act
orspeci
fi
ed.
STYLE
di
v{wi
dth:
150px;
hei
ght
:60px;mar
gin-
bot
tom:
40px}
di
v:nt
h-chi
ld(
2){
transf
orm:
scal
eY(
2)}
di
v:nt
h-chi
ld(
3){
transf
orm:
scal
eY(
0.5)
}
CONTENT
<di
vst
yle="
backgr
ound-
col
or:
red"></div>
<di
vst
yle="
backgr
ound-
col
or:
green"></ di
v>
<di
vst
yle="
backgr
ound-
col
or:
blue"></div>
8.skewX:skews(
ti
lt
s)anel
ementandi
tscont
entatagi
venangl
eindegr
eesal
ongt
hex-
axi
s
STYLE
di
v{wi
dth:200px;hei
ght:50px;margi
n:10px}
di
v+di
v{tr
ansform:skewX(30deg)
}
CONTENT
<divstyl
e="
backgr
ound-
col
or:
magent
a">
Nor malDi
v
</div>
<divstyl
e="
backgr
ound-
col
or:
magent
a">
DIVskewedalongx
</div>
9.skewY:al
sodoesskewi
ng,
butal
ongt
hey-
axi
s.
STYLE
di
v{wi
dth:200px;hei
ght:50px;margin:
10px}
di
v+di
v{tr
ansform:skew(30deg,30deg)
}
CONTENT
<divstyl
e="
backgr
ound-
col
or:
magent
a">
Nor malDi
v
</div>
<divstyl
e="
backgr
ound-
col
or:
magent
a">
DIVskewedalongxandy
</div>
10.skew:skewst heel ementalongbotht

hex-axisandt
hey-
axi
sbyt
hegi
venangl
es.
Asusualnon-suppor tivebrowserswillr
equi
repr
efixes.
1.–moz-f orFirefox
2.–ms-f orI nt
er netExplorer
3.–webki t-forChr ome,Safar
i,andOper
a(15.0)
4.–o-f orOper a( 10.5)
3DTRANSFORM
I
tissti
llt
hetransfor
m at t
ri
but
et hati
soper
ationalhere.Val
uesgivenalsocomei
nthef
orm of
f
unct
ionsandtheyinclude:
1.rotat
eX:rotat
eselementaroundit
sx-
axisusingtheprovi
dedangle.
STYLE
di
v{
wi
dth:200px;hei
ght:50px;
margi
n:10px;border:
soli
d
}
di
v:nt
h-chil
d(2)
{tr
ansform:r
otat
eX(
60deg)}
di
v:nt
h-chil
d(3)
{tr
ansform:r
otat
eX(
140deg)}
CONTENT
<di
v>NormalDiv</
div>
<di
v>r
otateX(
60deg)</di
v>
<di
v>r
otateX(
120deg)</di
v>
2.r
otat
eY:r
otat
est
heel
ementar
oundi
tsy-
axi
susi
ngt
hepr
ovi
dedangl
e.
STYLE
di
v{
wi
dth:200px;hei
ght:50px;
margi
n:10px;border:
soli
d
}
di
v:nt
h-chil
d(2)
{tr
ansform:r
otat
eY(
60deg)}
di
v:nt
h-chil
d(3)
{tr
ansform:r
otat
eY(
140deg)}
CONTENT
<di
v>NormalDiv</
div>
<di
v>r
otateY(
60deg)</di
v>
<di
v>r
otateY(
140deg)</di
v>
3.r
otat
eZ:r
otat
est
heel
ementar
oundi
tsz-
axi
susi
ngt
hepr
ovi
dedangl
e.
STYLE
di
v{
wi
dth:200px;hei
ght:50px;
margi
n:10px;border:
soli
d
}
di
v:nt
h-chil
d(2)
{tr
ansform:r
otat
eZ(
45deg)
}
di
v:nt
h-chil
d(3)
{tr
ansform:r
otat
eZ(
90deg)
}
CONTENT
<di
v>NormalDiv</
div>
<di
v>r
otateY(
60deg)</di
v>
<di
v>r
otateY(
140deg)</di
v>
perspecti
ve:providesaper specti
veviewofanel ementwithagiven3Dtransfor
m.Itismore
obviousiftheelementi sr
ot at
edwi thei
therrot
ateYorrotat
eX.Theperspecti
vefunct
ionhas
tobef oll
owedbyt hefunctionrotati
ngtheelement.Theperspecti
vefuncti
ontakesavalue
ofdistanceinpixels.Thelargerthisval
uesthesmallertheel
ementlooksinperspect
ive.
STYLE
di
v{width:
180px;hei
ght:80px;
margin:
40px;border
:sol
id}
di
v:nt
h-chil
d(1)
{
t
ransform:per
spect
ive(100px)r
otat
eX(
45deg)
}
di
v:nt
h-chil
d(2)
{
t
ransform:per
spect
ive(130px)r
otat
eX(
135deg)
}
CONTENT
<div>
tr
ansfor
m:per
spect
ive(
100px)r
otat
eX(
45deg)
</div>
<div>
tr
ansfor
m:per
spect
ive(
130px)r
otat
eX(
135deg)
</div>
CSSTRANSI
TIONS
Thesear eproperti
est hatmaket hepr opert
yofagi venel ementchangef rom oneval uetoanot her
,
smoothlyt hr
oughagi vendur at i
on.Thisisnor mallyusedwhenagi venpr oper t
yofanel ementis
tochangei nresponset oauseract i
one.g.mouseoveranel ement .
Thetransiti
onproper t
iesar ewr it
tenintheel ementwi t
ht hepr oper tyt hatistochange.
Properti
esusedf ortransiti
oni nclude(start
ingwi t
ht womosti mpor tant):
1.t r
ansiti
on-property:usedt ospeci f
ictheelement spr oper tythati stochange.
2.t r
ansiti
on-durati
on:usedt ospeci f
yhowt hetimei ntervali nwhi cht hegr adualchangei nthe
valueofthepr opertywi lloccur.Theexampl ebelowi llustratesachangeoft hewi dthofthe
divto200pxf rom 50pxwhent hecur sorisoveri t
.Thet ransiti
onpr operti
esar ethenusedt o
specif
y
i
. t
hepr opertythatwi llbechangi ngisthewi dthoft hedi v
i
i. t
hechangeshoul dbecompl etedinani ntervalof5seconds
Whent heuseract i
ont hati ni
ti
atedthet r
ansiti
oni snol ongert here,thepr opert
yisr et
urned
graduall
ytoi t
sor i
ginalval uewiththeef f
ectsoft het r
ansi ti
onst i
llinplay.
STYLE
div{ S
tat
ewit
hout
bor der
:soli
d2px; c
urs
orondi
v
wi dth:
50px;height:50px;
backgr ound-color
:blue;
transit
ion-propert
y:wi dt
h;
transit
ion-durati
on:5s;
}
div:hover{width:
200px}
CONTENT
<p>
Placethecursoront
hediv,and
removei taf
tert
hechangeiscompl
ete.
</p> Fi
nalst
ate
<div></
div> wi
thcursoron
di
v
3.transit
ion-delay:specif
iest hedelaybef orethet ransitioncommences.
4.transit
ion:ist hepr opertyusedt ocombi neval uesf ort heabovepr operti
est oget
herfor
exampl e.Usi ngthethreepr opertiesabove, t
hecombi nationwi l
ltakeeither
:
a.t ransit
ion:propertydur ati
on;
b.t ransit
ion:propertydur ati
ondel ay;
Itispossiblet ohavemul ti
pleproper ti
esvariedusi ngt hetransi
tionproperty.Thef or
matfor
twopr opertieswi t
houtthedel aywi l
lbeasgi venbel ow:
transit
ion:propertyduration, propertyduration;
.
Theexampl ebel owisamodi ficationtotheaboveexampl e,withchangesi ntroducedtoboth
thehei ght(50pxt o200pxi n4secs)andcol or( bluet ogr eenin4secs)oft hedi velement
.
STYLE
div{ S
tat
ewit
hout
border
:soli
d2px; c
urs
orondi
v
width:
50px;height
:50px;
background-col
or:
blue;
transit
ion:width4s,hei
ght4s,backgr
ound-
color4s;
}
div:hover{
wi dth:
200px;
hei ght
:200px;
backgr ound-col
or:gr
een; Fi
nalst
ate
} wit
hcursoron
CONTENT di
v
<p>
Placet hecursoronthediv,andremoveit
afterthechangei scomplete.
</p>
<div></div>
Iti
salsopossibl
etoaddatransfor
mati
ondur i
ngthet r
ansit
ion.Thi
si sdonebyspeci f
yingi
tas
oneoftheproper
ti
esoft
heelementtochange.Theexamplebelowwi l
lcauseatransit
ioniswi
dth,
hei
ght,col
or(whit
etomagenta)
,andalsotransf
ormt heelementbyr otat
ingi
tthroughanangle
180degrees.
STYLE
div{
border
:sol
id2px;mar gi
n-l
eft
:50px;
width:
50px;height:
50px;
text
-al
ign:
center;
transit
ion:width4s, hei
ght4s,backgr
ound-
color4s,
tr
ansfor
m 4s;
}
div:hover{
wi dth:
200px;
hei ght
:200px;
backgr ound-color:magenta;
transform:rot at
e(180deg);
}
CONTENT
<p>
Placet hecur soront hedi
v,andremoveitaf
terthechangeiscompl
ete.
</p>
<div>DIV</div>
Fi
nalst
ate
wi
thcursoron
di
v S
tat
ewit
hout
c
urs
orondi
v
CSSANI
MATI
ONS
Unl i
ke CSS t ransiti
ons thatar e started bya user ’s act ion on t he page,ani mati
ons do not
necessar i
lyneed auser ’sact i
on to star tup.Ani mat ionsar ecr eat ed using the@keyf rames
directi
ves.I tisf oll
owedbyanani mat i
onname.Encl osedwi t
hint he@keyf r
amesdi recti
vesar e
stylerul estobeef fectedint hecour seoft heanimat ion.Eachst yler ulei
scr eatedwi t
haspeci al
selector .Therear eseveraloft heseselect ors.Eachsel ectorr epresent sagi ventimeintervali
nt he
animat ion.Thef oll
owingar et heselectorsused:
1.f rom:repr esentsthebegi nni
ngoft heani mat ion.
2.t o:represent stheendoft heani mat ion
3.0% -100%:anyval uei nt hi
sr angei saccept able.0% cor respondst ot hebeginningoft he
animat i
on,whi l
e100% cor r
espondst ot heendoft heani mat ion.Thi sgroupofsel ectors
havet hebenef i
tofmaki ngaccessi bl eintervalsor dert hant hebegi nningandt heendoft he
animat i
on.Forexampl e:
@keyf rameani mation1{
from{ t
op:0px; }
fo{t
op:200px; }
}
Theaboveani mationst atesthatt hedi stanceofanel ementf r
om t het opshouldbechanged
from 0pxt o200pxi nthecauseoft heani mationcal ledani mat ion1.
@keyf rameani mat ion2{
0%{ top:0px; }
25%{ t
op:200px; }
50%{ t
op:100px; }
75%{ t
op:200px; }
100%{ top:0px; }
}
Theaboveani mat ional soal terst hedi stanceoft heel ementf r om t het op, butpr ovideswhat
thedi stanceshoul dbeatspeci fi
ci ntervalsoft heani mat i
on.Mul tiplepr opertiescanbe
providedi nt hest yler ul es.
Thespeci ficationsf ort heani mat i
onar epr ovidedi nt hest yler uleoft heelementt obe
animat ed.Thesespeci ficationsar epr ovidedwi tht hef ollowi ngat tri
but es:
1.ani mat i
onname:usedt opr ovi deaspeci alr efer encef ort heani mat ion.Thisr eferencei s
whati susedast henamei nt he@keyf ramesdi rective.
2.ani mat i
on- durat i
on:pr ovides t he dur ation of t he ani mat ion i n seconds ( s) or
mi l
liseconds( ms) .
3.ani mat i
on- i
terat i
on- count :tell
st henumberoft imest heani mat ionshoul dbepl ayed.The
keywor di nfi
nitei susedwhent heani mat ioni st or unnon- st op.
4.ani mat i
on- dir
ect ion:i ndicatest hedi rectioni nwhi cht heani mat ionshoul dr un.Val ues
fori ti
ncl ude:
i. nor mal( def aul t)
ii
. rever se:ani mat i
onshoul dbepl ayedi nr ever sedi r
ect i
on
ii
i. al ternat e:usedwhent heani mat i
oni swi l
lr unmor et hanones.Thedi r
ectioni s
nor malf orever yodd( 1,3, 5,etc.)countandi nr ever sef orever yeven( 2,4,6, etc.
)
count .
iv. al ternat e-rever se:int hisi nstancedi rect ioni snor malf oreventcount sandi n
rever sef oroddcount s.
Not e:rever seandal ternate-rever sear enotsuppor tedbySaf ari
5.ani mat i
on- delay:i tisusedt ospeci fyhowmanyseconds( s)ormi ll
iseconds( ms)t owai t
bef orecommenci ngani mat ion.
6.ani mat i
on:i susedt ocombi nesever alval uesoft heabovepr oper ty.Formatf ort his
animat i
on:namedur ationdel aycountdi rection;
Bel
owi
sanexampl et oillust ratet heconceptofani mat ion, buti sbestobser vedusi ngabr owser :
STYLE
body{margin:0px}
div{
posit
ion:absolut
e;
widt
h:100px;hei ght
:100px;
background-color:r
ed;
animati
on-name:exampl e;
animati
on-durati
on:10s;
animati
on-dir
ecti
on:normal;
animati
on-i
terati
on-count
:2
}
/*Standar dsyntax*/
@keyf ramesexampl e{
0%{ t
op:0px;transfor
m: r
otat
e(0deg) }
25%{ t
op:200px;t r
ansform:r
otate(90deg)}
50%{ t
op:100px;t r
ansform:r
otate(180deg)}
75%{ t
op:200px;t r
ansform:r
otate(270deg)}
100%{ top:0px;tr
ansform:r
otate(0deg)}
}
CONTENT
div></div>
HSLCOLORREPRESENTATI
ON
HSLst andsf orHue,Sat urati
onandLi ghtness.Thi sisanaddi ti
onalwayofr epresent
ingcolor.It
uses3val uesl iket heRGBcode.
 Hue⇒ 0t o360{ 0=Red, 120=Gr een,and240=Bl ue}
 Sat urat i
on⇒ 0%( TotalGray)to100%( Fullcolorsaturati
on.NoshadeofGr ay)
 Li ghtness⇒ 0%( Black)to50%( Nor mal)to100%( Whi t
e)
Whenspeci fyingacol orval ueusingHSLi ttakesthef orm ofaf uncti
onwith3-commasepar ated
valuesforexampl ehsl(0,100%, 50%)whi chr epr
esentspur er ed( i
thasnoshadeofgr aybecause
saturat
ionis100%, andhasnor mallightnessof50%.
Thef ol
lowingpoi ntsarewor thyofnot e:
1.Li ghtnesshast hehi ghestpr i
ority.Thei nfl
uenceoft heothervaluesbecomesvi si
blewhen
i
tsval uei sfarfrom theext r
emes( 0%and100%) ,prefer
ably50%.
2.Sat urat i
oni snexti nli
ne.Theef fectoft hefi
rstvalue( Hue)appear sunadult
erat
edwheni t
s
valuei s100%
Afour t
hvaluecanbeadded.Thi svaluei scalledtheAl phaval ue.Itrepr
esent
sthet r
ansparencyof
thecolor.It
sval uesr unf rom 0(compl etelytransparent)to1( compl etel
yopaque).

Css (Cascadedstylesheet) : I NLI Nemethod

Uploaded by

Copyright:

Available Formats

You might also like

Css (Cascadedstylesheet) : I NLI Nemethod

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css (Cascadedstylesheet) : I NLI Nemethod

Uploaded by

Copyright:

Available Formats

CSS(

Thebox- sizingpr opert

10.skew:skewst heel ementalongbotht

You might also like