HTMLdef

ined+i
tshi
stor
y

Br
iefHi
stor
yofHTML

• ARPANEToft
hel
ate1960s

• j
umpqui
ckl
ytot
hef
ir
stpubl
i
cspeci
fi
cat
ionoft
heHTMLbyTi
m Ber
ner
s-Leei
n1991

• HTML’scodi
fi
cat
ionbyt
heWor
ld-
WideWebConsor
ti
um (
bet
terknownast
heW3C)i
n
1997.

HTMLi
sdef
inedasamar
kupl
anguage.

• Amarkuplanguageissi
mplyawayofannot
ati
ngadocumenti
nsuchawayt
omaket
he
annot
ati
onsdist
inctf
rom t
het
extbei
ngannot
ated.

• Theterm comesf r
om t
hedaysofpr i
nt,whenedi
tor
swoul dwri
teinstr
uct
ionson
manuscr
iptpagest
hatmi
ghtber
evi
sioni
nstr
ucti
onst
otheaut
hororcopyedi
tor
.

Mar
kup

Ati
tssi
mpl
est
,mar
kupi
sawayt
oindi ei
cat nf
ormat
ionaboutt
hecont
ent

• Thi
s“i
nfor
mat
ionaboutcont
ent
”inHTMLi
simpl
ement
edv
iat
ags(
akael
ement
s).

• Themarkupintheprev
ioussli
deconsi
stsoftheredtextandt
hevar
iousci
rcl
esand
arr
owsontheonepage,andt
helit
tl
eyel
l
owstickynot
esontheot
her
.

• HTMLdoest
hesamet
hingbutusest
ext
ual
tags.

Whati
stheW3C?

TheW3Ci
sthemai
nst
andar
dsor
gani
zat
ionf
ort
heWor
ldWi
deWeb.

1
Topr
omot
escompat
ibi
l
ityt
heW3Cpr
oducesr
ecommendat
ions(
alsocal
l
edspeci
fi
cat
ions)
.

I
n1998,theW3Cturnedit
sat t
ent
iont
oanew specif
icat
ioncal
ledXHTML1. 0,whi
chwasa
v
ersi
onofHTMLthatusedstr
ict
erXML(Ext
ensi
bleMar
kupLanguage)sy
ntaxr
ules.

XHTML

Par
tyi
ngl
i
kei
t’
s1999

ThegoalofXHTMLwi t
hit
sst
ri
ctr
uleswastomakepager
ender
ingmor
epr
edi
ctabl
ebyf
orci
ng
webauthor
stocreat
ewebpageswi
thoutsy
ntaxer
ror
s.

TheXML-
basedsy
ntaxr
ulesf
orXHTMLar
epr
ett
yeasyt
ofol
l
ow.

Themai
nrul
esar
e:

• l
ower
caset
agnames,

• at
tri
but
esal
way
swi
thi
nquot
es,

• andal
lel
ement
smusthav
eacl
osi
ngel
ement(
orbesel
f-
closi
ng)
.

XHTML

Twov
ersi
ons

Tohel
pwebaut
hor
s,t
wov
ersi
onsofXHTMLwer
ecr
eat
ed:

XHTML1.
0St
ri
ctandXHTML1.
0Tr
ansi
ti
onal
.

• Thest
ri
ctver
sionwasmeantt ober
ender
edbyabrowserusi
ngthestr
ictsy
ntaxr
ules
andt
agsupportdescr
ibedbyt
heW3CXHTML1.0St
ri
ctspeci
fi
cat
ion.

• Thetransit
ional
recommendat
ioni
samoref
orgiv
ingfl
avorofXHTML,
andwasmeantt
o
actasat emporarytr
ansi
ti
ont
otheev
ent
ual
globaladopt
ionofXHTMLSt
ri
ct.

St
andar
dsMov
ement

Fol
l
owi
ngast
andar
disagoodt
hing

Duri
ngmuchofthe2000s,thefocusinthepr
ofessi
onalwebdev
elopmentcommuni
tywason
st
andar
ds:t
hati
s,onl
imit
ingoneselft
otheW3Cspecifi
cati
onf
orXHTML.

Val
i
dat
ors

Howt
oensur
eyourpagesf
oll
owast
andar
d

Akeypartoft
hestandardsmovementi
nthewebdevel
opmentcommuni
tyofthe2000swas
t
heuseofHTMLVal idat
orsasameansofv er
if
yingt
hatawebpage’
smar kupfol
l
owedthe
r
ulesf
orXHTMLtr
ansiti
onalorst
ri
ct.

2
Howaboutanexampl
e

Onl
yify
ouhav
eani
nter
netconnect
ion

Openawebbr
owsert
otheW3Cv
ali
dat
orandf
indaf
ewwebsi
test
otest
.

TypetheURLi ntothebar,andy
oucanchecki
fthehomepagei
sval
i
dagai
nstv
ari
ous
st
andards(
orauto-
detect
)

3
XHTML2.
0andWHATWG

Wher
edi
ditgo?

I
nthemi
d2000s,
XHTML2.
0pr
oposedar
evol
uti
onar
yandsubst
ant
ial
changet
oHTML.

• backwar
dscompat
ibi
l
itywi
thHTMLandXHTML1.
0wasdr
opped.

• Br
owser
swoul
dbecomesi
gni
fi
cant
lyl
essf
orgi
vi
ngofi
nval
i
dmar
kup.

Ataroundthesamet i
me,agr oupofdevel
oper
satOper aandMozil
laf
ormedt
heWHATWG
(WebHy per
textAppl
i
cationTechnol
ogyWorki
ngGroup)gr
oupwit
hint
heW3C.

Thisgroup wasnotconvinced t
hattheW3C’sembraceofXMLand i
tsabandonmentof
backwards-
compat
ibi
l
itywasthebestwayf
orwar
dfort
heweb.

HTML5

Thenewhot
ness

By2009,
theW3Cstoppedwor
konXHTML2.
0andi
nst
eadadopt
edt
hewor
kdonebyWHATWG
andnameditHTML5.

Thr
eemai
nai
ms

Ther
ear
ethr
eemai
nai
mst
oHTML5:

• Speci
fyunambi
guousl
yhowbr
owser
sshoul
ddeal
wit
hinv
ali
dmar
kup.

• Prov
ideanopen,non-pr
opr
iet
arypr
ogr
ammi
ngf
ramewor
k(v
iaJav
ascr
ipt
)forcr
eat
ing
ri
chwebappl
icat
ions.

• Bebackwar
dscompat
ibl
ewi
tht
heexi
sti
ngweb.

HTML5

I
tev
olv
es

Whil
epartsoftheHTML5aresti
l
lbei
ngf
inal
i
zed,al
loft
hemaj
orbr
owsermanuf
act
urer
shav
e
atl
eastpart
ial
l
yembracedHTML5.

Cer
tai
nlynotal
lbr
owser
sandal
lver
sionssuppor
tev
eryf
eat
ureofHTML5.

Thisisi
nfactbydesi
gn.HTMLinHTML5i
snowal
i
vingl
anguage:t
hati
s,i
tisal
anguaget
hat
evolv
esanddevel
opsovert
ime.

Assuch,
ever
ybr
owserwi
l
lsuppor
tagr
adual
l
yincr
easi
ngsubsetofHTML5capabi
l
iti
es

4
HTML5Suppor
tinBr
owser
s

HTMLSYNTAX

El
ement
sandAt
tri
but
es

Mor
esy
ntax

HTMLdocument
sar
ecomposedoft
ext
ual
cont
entandHTMLel
ement
s.

AnHTMLel ementcancont
aint
ext
,ot
herel
ement
s,orbeempt
y.I
tisi
dent
if
iedi
ntheHTML
documentbyt
ags.

HTMLelement
scanalsocontai
natt
ri
but
es.AnHTMLat
tri
but
eisaname=v
aluepai
rthat
pr
ovi
desmorei
nfor
mat
ionaboutt
heHTMLelement
.

I
nXHTML,
att
ri
but
eval
ueshadt
obeencl
osedi
nquot
es;
inHTML5,
thequot
esar
eopt
ional
.

5
WhatHTMLl
etsy
oudo

 I
nser
timagesusi
ngt
he<i
mg>t
ag

 Cr
eat
eli
nkswi
tht
he<a>t
ag

 Cr
eat
eli
stswi
tht
he<ul
>,<ol
>and<l
i
>tags

 Cr
eat
eheadi
ngswi
th<H1>,
<H2>,
…,<H6>

 Def
inemet
atdat
awi
th<met
a>t
ag

 Andmuchmor
e…

El
ement
sandAt
tri
but
es

Nest
ingHTMLel
ement
s

Of
tenanHTMLel
ementwi
l
lcont
ainot
herHTMLel
ement
s.

I
nsuchacase,
thecont
ainerel
ementi
ssai
dtobeapar
entoft
hecont
ained,
orchi
l
d,el
ement
.

Anyelementscont
ainedwit
hinthechi
l
daresaidtobedescendent
soft
hepar
entel
ement
;
l
ikewi
se,anygi
venchil
del
ement,
mayhaveavar
iet
yofancest
ors

6
Hi
erar
chyofel
ement
s

Nest
ingHTMLel
ement
s

Inordert
opr
operl
yconstructahi
erar
chyofel
ement
s,y
ourbr
owserexpect
seachHTMLnest
ed
elementt
obeproper
lynested.

Thati
s,achi
l
d’sendi
ngt
agmustoccurbef
orei
tspar
ent
’sendi
ngt
ag.

7
SEMANTI
CMARKUP

Whatdoesi
tmean?

Overthepastdecade,astrongandbr
oadconsensushasgrownar
oundt
hebel
i
eft
hatHTML
documentsshoul
donlyfocusonthest
ruct
ureoft
hedocument.

I
nfor
mationabouthowthecont
entshoul
dlookwheni
tisdi
spl
ayedi
nthebr
owseri
sbestl
eftt
o
CSS(Cascadi
ngStyl
eSheet
s).

Asaconsequence,begi
nni
ngHTMLaut
hor
sar
eof
tencounsel
edt
ocr
eat
esemant
icHTML
document
s.

Thatis,anHTMLdocumentshouldnotdescri
behow t
ovi
sual
l
ypr
esentcont
ent
,butonl
y
descr
ibeit
scont
ent
’sst
ruct
ural
semant
icsormeani
ng.

St
ruct
ure

St
ruct
urei
sav
ital
wayofcommuni
cat
ingi
nfor
mat
ioni
npaperandel
ect
roni
cdocument
s.

Allofthetagsthatwewillexami
neinthi
spresentat
ionareusedtodescri
bethebasicst
ruct
ural
i
nformat i
on in a document,such as ar
ti
cles,headings,li
sts,par
agraphs,l
inks,images,
navigati
on,f
ooters,
andsoon.

I
tsadv
ant
ages

El
imi
nat
ingpr
esentati
on-
ori
ent
edmar
kupandwr
it
ingsemant
icHTMLmar
kuphasav
ari
etyof
i
mport
antadv
antages:

Maint
ainabi
l
ity
.Semanticmar
kupiseasi
ert
oupdat
eandchanget
hanwebpagest
hatcont
aina
gr
eatdealofpresent
ati
onmarkup.

Fast
er.Semant
icwebpagesar
ety
pical
l
yqui
ckert
oaut
horandf
ast
ert
odownl
oad.

Accessi
bil
it
y.Visi
ti
ng aweb pageusing v
oicereadi
ng sof
twar
ecanbeav
eryf
rust
rat
ing
exper
ienceift
hesit
edoesnotusesemant
icmarkup.

8
Searchengineopt
imizat
ion.Semanti
cmarkuppr
ovi
desbet
teri
nst
ruct
ionsf
orsear
chengi
nes:i
t
tel
l
st hem whatt
hingsareimport
antcont
entont
hesit
e.

STRUCTUREOFHTML

Si
mpl
estHTMLdocument

The<ti
tle>el
ement(I
tem )i susedtopr
ovi
deabroaddescr
ipt
ionofthecont
ent
.Theti
tl
eis
notdi
splayedwi
thi
nthebrowserwi
ndow.I
nst
ead,t
heti
tl
eisty
pical
lydi
splay
edbythebr
owser
i
nitswindowand/ort
ab.

Amor
ecompl
etedocument

9
DOCTYPE

(
shor
tforDocumentTy
peDef
ini
ti
on)

Tel
lsthebrowser(
oranyot
hercl
ientsof
twar
ethati
sreadi
ngt
hisHTMLdocument
)whatt
ype
ofdocumentiti
saboutt
opr
ocess.

Noti
cethatitdoesnotindi
cat
ewhatv
ersi
onofHTMLi
scont
ainedwi
thi
nthedocument
:itonl
y
speci
fi
esthatitcont
ainsHTML.

HTML,
Head,
andBody

HTML5doesnotr
equi
ret
heuseoft
he<ht
ml>,
<head>,
and<body
>.

Howev
er,
inXHTMLt
heywer
erequi
red,
andmostwebaut
hor
scont
inuet
ouset
hem.

The<ht
ml>el
ementissomet
imescal
l
edt
her
ootel
ementasi
tcont
ainsal
ltheot
herHTML
el
ement
sint
hedocument

10
HeadandBody

HTMLpagesar ediv
idedintotwosect
ions:t
heheadandt
hebody
,whi
chcor
respondt
othe
<head>and<body
>elements.

Theheadcont
ainsdescr
ipt
iveel saboutt
ement hedocument

Thebodycont
ainscont
entt
hatwi
l
lbedi
spl
ayedbyt
hebr
owser
.

I
nsi
det
hehead

Youwi
l
lnot
icet
hatt
he<head>el
ementcont
ainsav
ari
etyofaddi
ti
onal
element
s.

Thefir
stofthesei
sthe<met
a>el
ement
.Ourexampl
edecl
arest
hatt
hechar
act
erencodi
ngf
or
thedocumentisUTF-
8

11
I
nsi
det
hehead

Nobr
ainsbutmet
as,
sty
lesandj
avascr
ipt
s

Ourexampl
especi
fi
esanext
ernal
CSSst
ylesheetf
il
ethati
susedwi
tht
hisdocument
.

I
tal
sor
efer
encesanext
ernal
Jav
ascr
iptf
il
e.

QUI
CKTOUROFHTML

Whyaqui
ckt
our
?

HTML5contai
nsmanyst
ruct
uralandpr
esent
ati
onel
ement
s–t
oomanyt
ocompl
etel
ycov
eri
n
t
hispr
esent
ati
on.

Ratherthancompr
ehensi
vel
ycoveral
ltheseel
ement
s,t
hispr
esent
ati
onwi
l
lpr
ovi
deaqui
ck
overvi
ewofthemostcommonelement
s.

Sampl
eDocument

12
Headi
ngs

<h1>,
<h2>,
<h3>,
etc

HTMLprovi
dessi
xlev
elsofheadi
ng(
h1,
h2,
h3,
…),
wit
hthehi
gherheadi
ngnumberi
ndi
cat
inga
headi
ngofl
essi
mportance.

Headi
ngsar
eanessent
ialwayf
ordocumentaut
hor
suset
oshowt
hei
rreader
sthest
ruct
ureof
t
hedocument.

13
Headi
ngs

Thebr
owserhasi
tsowndef
aul
tst
yli
ngf
oreachheadi
ngl
evel
.

Howev
er,
thesear
eeasi
l
ymodi
fi
edandcust
omi
zedv
iaCSS.

14
I
npr
act
ice,
speci
fyaheadi
ngl
evel
thati
ssemant
ical
l
yaccur
ate.

Donotchooseaheadi
ngl
evel
becauseofi
tsdef
aul
tpr
esent
ati
on

• e.
g.,
choosi
ng<h3>becausey
ouwanty
ourt
extt
obebol
dand16pt

Rat
her
,chooset
heheadi
ngl
evel
becausei
tisappr
opr
iat
e

• e.g.
,choosi
ng<h3>becausei
tisat
hir
dlev
elheadi
ngandnotapr
imar
yor
secondar
yheadi
ng

15
Par
agr
aphs

<p>

Par
agr
aphsar
ethemostbasi
cuni
toft
exti
nanHTMLdocument
.

Not
icet
hatt
he<p>t
agi
sacont
ainerandcancont
ainHTMLandot
heri
nli
neHTMLel
ement
s

i
nli
neHTMLelementsr
efer
st oHTMLel
ement
sthatdonotcauseapar
agr
aphbr
eakbutar
e
par
toft
her
egular“
fl
ow”ofthetext
.

Di
vi
sions

<di
v>

Thi
s<di
v>t
agi
sal
soacont
ainerel
ementandi
susedt
ocr
eat
eal
ogi
cal
groupi
ngofcont
ent

• The<di
v>el
ementhasnoi
ntr
insi
cpr
esent
ati
on.

• I
tisf
requent
lyusedi
ncont
empor
aryCSS-
basedl
ayout
stomar
koutsect
ions.

Usi
ngdi
vel
ement
s

Cany
ousay“
div
-tast
ic”

16
Li
nks

<a>

Li
nksar
ecr
eat
edusi
ngt
he<a>el
ement(
the“
a”st
andsf
oranchor
).

Al
i
nkhast
womai
npar
ts:
thedest
inat
ionandt
hel
abel
.

Ty
pesofLi
nks

Youcanuset
heanchorel
ementt
ocr
eat
eawi
der
angeofl
i
nks:

• Li
nkst oexternalsi
tes(
ort
oindi
vi
dualr
esour
cessuchasi
magesormov
iesonan
ext
ernalsi
te)
.

• Li
nkst
oot
herpagesorr
esour
ceswi
thi
nthecur
rentsi
te.

• Li
nkst
oot
herpl
aceswi
thi
nthecur
rentpage.

• Li
nkst
opar
ti
cul
arl
ocat
ionsonanot
herpage.

• Li
nkst
hatar
einst
ruct
ionst
othebr
owsert
ost
artt
heuser
’semai
lpr
ogr
am.

Li
nkst
hatar
einst
ruct
ionst
othebr
owsert
oexecut
eaJav
ascr
iptf
unct
ion.

Di
ff
erentl
i
nkdest
inat
ions

17
Li
nkText

Li
nkswi
tht
hel
abel
“Cl
i
ckHer
e”wer
eonceast
apl
eoft
heweb.

Today
,suchl
i
nksar
efr
ownedupon,
since:

• t
heydonott
ell
user
swher
ethel
i
nkwi
l
ltaket
hem

• asaver
b“cl
i
ck”isbecomingi
ncr
easi
ngl
yinaccur
atewhenonet
akesi
ntoaccountt
he
gr
owt
hofmobil
ebrowser
s.

I
nst
ead,
text
ual
li
nkl
abel
sshoul
dbedescr
ipt
ive.

“
Cli
ckher
etoseet
her
acer
esul
ts”

“
RaceResul
ts”or“
SeeRaceResul
ts”
.

URLAbsol
uteRef
erenci
ng

Forext
ernal
resour
ces

Whenr
efer
enci
ngapageorr
esour
ceonanext
ernalsi
te,af
ullabsol
uter
efer
encei
srequi
red:

18
t
hati
s,

• t
hepr
otocol
(ty
pical
l
y,ht
tp:
//)
,

• t
hedomai
nname,

• anypat
hs,
andt
henf
inal
l
y

• t
hef
il
enameoft
hedesi
redr
esour
ce.

URLRel
ati
veRef
erenci
ng

Weal
soneedt
obeabl
etosuccessf
ull
yref
erencef
il
eswi
thi
noursi
te.

Thi
srequi
resl
ear
ningt
hesy
ntaxf
orso-
cal
l
edr
elat
iver
efer
enci
ng.

Whenr eferencingar esourcethati

sonthesameserv
erasyourHTMLdocument
,thenyoucan
usebr i
eferrelativeref
erenci
ng.IftheURLdoesnoti
ncl
udethe“ht
tp:
//”t
hent
hebr owserwi
l
l
requestthecur rentser
verforthefi
l
e.

I
fal
ltheresour
cesforthesi
teresi
dewithi
nthesamedirect
ory(al
soref
err
edt
oasaf
older
),
t
henyoucanref
erencet
hoseotherr
esour
cessimpl
yvi
atheirf
il
ename.

Howev
er,
mostr
eal
-wor
ldsi
tescont
aint
oomanyf
il
est
oputt
hem al
lwi
thi
nasi
ngl
edi
rect
ory
.

Fort
hesesi
tuat
ions,
arel
ati
vepat
hnamei
srequi
redal
ongwi
tht
hef
il
ename.

Thepat
hnamet
ell
sthebr
owserwher
etol
ocat
ethef
il
eont
heser
ver
.

Pat
hnames

Pat
hnamesont
hewebf
oll
owUni
xconv
ent
ions.

• Forwar
dsl
ashes(
“/”
)ar
eusedt
osepar
atedi
rect
orynamesf
rom eachot
herandf
rom
fi
l
enames.

• Doubl
e-per
iods(
“.
.”
)ar
eusedt
oref
erenceadi
rect
ory“
abov
e”t
hecur
rentonei
nthe
di
rect
orytr
ee.

URLRel
ati
veRef
erenci
ng

19
Rel
ati
veLi
nkTy
pe Exampl
e

SameDi
rect
ory To li
nk to example.ht
ml from
about
.ht
ml(
inFi
gure2.18),
use:
Tolinktoaf i
l
ewithi
nthe
samefolder
,si
mpl
yusethe <ahr
ef="
exampl
e.ht
ml"
>
fi
lename.

Chi
l
dDi
rect
ory Toli
nkt
ologo.
giff
rom about
.ht
ml,
use:
To li
nk t
oaf i
l
e withi
na
subdi
rect
ory,usethename <ahr
ef="
images/
logo.
gif
">
ofthe subdir
ectoryand a
sl
ashbeforethefil
ename.

20
Gr
andchi
ld/
Descendant To li
nk to backgr
ound.
giff
rom
Di
rect
ory about
.ht
ml,use:

To li
nk t oaf il
et hati s <a
multi
ple subdirector
ies hr
ef="
css/
images/
backgr
ound.
gif
">
bel
ow t he cur r
ent one,
constr
uctt he f
ullpat h by
i
ncludi
ngeachsubdi rect
ory
name (
separated by
sl
ashes) before t he f il
e
name.

Par
ent
/Ancest
orDi
rect
ory To link to about.
html fr
om
i
ndex.
html
inmembers,use:
Use “ ..
/”t o ref erence a
f der abov
ol et he cur rent <ahref
=".
./
about.ht
ml "
>
one.Ift r
y i
ngt or eferencea
fi
lesev erallevel
sabov et he Toli
nktoabout.htmlfrom bi
o.ht
ml,
currentone,si mpl y string use:
togethermul t
ipl
e“ ..
/”. <ahref
=".
./
..
/about.ht
ml "
>

I
nli
neTextEl
ement
s

I
nli
neel
ement
sdonotdi
sruptt
hef
lowoft
ext(
i.
e.,
causeal
i
nebr
eak)
.

HTML5def
inesov
er30oft
heseel
ement
s.

e.
g.,
<a>,
<br
>,<em>,
<st
rong>

I
mages

Whi
l
ethe<i
mg>t
agi
stheol
destmet
hodf
ordi
spl
ayi
ngani
mage,
iti
snott
heonl
yway
.

Forpur
elydecorat
ivei
mages,suchasbackgr
oundgradi
entsandpat
terns,
logos,
bor
derar
t,and
soon,i
tmakessemant icsensetokeepsuchimagesoutofthemarkupandinCSSwherethey
moreri
ghtl
ybelong.

Butwhentheimagesarecontent
,suchasi
ntheimagesinagall
eryort
heimageofapr
oducti
n
aproductdet
ail
spage,
thenthe<img>tagi
sthesemanti
cal
lyappr
opri
ateappr
oach.

21
Li
sts

HTMLpr
ovi
dest
hreet
ypesofl
i
sts

Unor
der
edli
sts.Coll
ect
ionsofi
temsi
nnopar
ti
cul
aror
der
;thesear
ebydef
aul
trender
edbyt
he
br
owserasabull
etedli
st.

Or
der
edl i
sts.Col
l
ect
ionsofit
emst
hathav
easetor
der
;thesear
ebydef
aul
trender
edbyt
he
br
owserasanumberedli
st.

Def
ini
ti
onli
sts.Col
lect
ionofnameanddef
ini
ti
onpair
s.Theset
endt
obeusedi
nfr
equent
ly.
Per
hapsthemostcommonexamplewoul
dbeaFAQlist
.

22
Char
act
erEnt
it
ies

Thesearespeci
alchar
acter
sforsymbolsforwhi
chtherei
sei
thernowayeasywayt
oty
pei nvia
akeyboard(suchasthecopy r
ightsymboloraccent
edchar
acters)orwhi
chhaveareserv
ed
meaninginHTML( f
orinst
ancethe“<”or“
>”symbols)
.

Theycanbeusedi
nanHTMLdocumentbyusi
ngt
heent
it
ynameort
heent
it
ynumber
.

e.
g.,
&nbsp;
and&copy
;

HTMLSEMANTI
CELEMENTS

HTML5Semant
icEl
ement
s

Whyar
etheyneeded?

Onesubst
ant
ial
probl
em wi
thmoder
n,pr
e-HTML5semant
icmar
kup:

mostcompl
exwebsi
tesar
eabsol
utel
ypackedsol
i
dwi
th<di
v>el
ement
s.

Unf
ortunat
ely
,al
lthese<di
v>el
ement
scanmaket
her
esul
ti
ngmar
kupconf
usi
ngandhar
dto
modif
y .

Devel
opersty
pical
lyt
ryt
obringsomesenseandordert
othe<di
v>chaosbyusi
ngi
dorcl
ass
namesthatprovi
desomecl
ueastothei
rmeani
ng.

Whati
sCSS?

CSSi
saW3Cst
andar
dfordescr
ibi
ngt
hepr
esent
ati
on(
orappear
ance)ofHTML
el
ement
s.

Wi
thCSS,
wecanassi
gn

• f
ontpr
oper
ti
es,

• col
ors,

• si
zes,

• bor
der
s,

23
 • backgr
oundi
mages,

• ev
ent
heposi
ti
onofel
ement
s.

• CSSi
sal
anguagei
nthati
thasi
tsownsy
ntaxr
ules.

• CSScanbeaddeddirect
lyt
oanyHTMLelement(
viat
hest y
leatt
ri
bute)
,withi
n
the<head>el
ement
,or,mostcommonl
y,i
nasepar
atetextfi
let
hatcontai
nsonly
CSS.

Benef
it
sofCSS

Whyusi
ngCSSi
sabet
terwayofdescr
ibi
ngpr
esent
ati
ont
hanHTML

• Thedegr
eeoff
ormat
ti
ngcont
rol
inCSSi
ssi
gni
fi
cant
lybet
tert
hant
hatpr
ovi
ded
i
nHTML.

• Websitesbecomesigni
fi
cant
lymor emaintai
nabl
ebecauseal
lfor
mat
ti
ngcanbe
cent
ral
i
zedintoone,
orasmal lhandful
,ofCSSfil
es.

• CSS-
dri
vensi
tesar
emor
eaccessi
ble.

• Asit
ebuil
tusi
ngacentral
izedsetofCSSfi
l
esforal
lpresentat
ionwil
lalsobe
qui
ckert
odownloadbecauseeachindi
vi
dualHTMLfil
ewi l
lcontai
nlessmarkup.

• CSScanbeusedt
oadoptapagef
ordi
ff
erentout
putmedi
ums.

CSSVer
sions

Let
’sj
ustsayt
her
e’smor
ethan1

• W3Cpubl
i
shedt
heCSSLev
el1Recommendat
ioni
n1996.

24
 • Ayearl
ater
,theCSSLev
el2Recommendat
ion(
alsomor
esucci
nct
lyl
abel
ed
si
mplyasCSS2)waspubli
shed.

• Eventhoughworkbeganoveradecadeago,
anupdatedv
ersi
onoft
heLevel
2
Recommendation,
CSS2.1,
didnotbecomeanoff
ici
alW3CRecommendat
ion
unti
lJune2011.

• Andtocomplicatemattersevenmore,
all
throught
helastdecade(
andtothe
pr
esentdayaswel l
),duri
ngthesametimetheCSS2.1standar
dwasbeing
workedon,adiff
erentgroupattheW3Cwaswor ki
ngonaCSS3dr aft
.

Br
owserAdopt
ion

I
nser
tobl
i
gat
orysni
decommentaboutI
nter
netExpl
orer6her
e

Whil
eMi crosof
t’
sInter
netExplor
erwasanear
lychampi
onofCSS,it
slat
er
ver
sions(especi
all
yIE5,I
E6,andIE7)f
orWi
ndowshadunevensupportf
orcer
tai
n
par
tsofCSS2.

I
nfact
,all
browsershav
elef
tcer
tai
npar
tsoft
heCSS2Recommendat
ion
uni
mplemented.

CSShasar
eput
ati
onf
orbei
ngasomewhatf
rust
rat
ingl
anguage.

• t
hisr
eput
ati
oni
swel
ldeser
ved!

CSSSy
ntax

Rul
es,
proper
ti
es,
val
ues,
decl
arat
ions

ACSSdocumentconsi
stsofoneormor
est
yler
ules.

Aruleconsi
stsofaselect
ort
hati
dent
if
iestheHTMLelementorelement
sthat
wil
lbeaff
ect
ed,fol
lowedbyaseri
esofproper
tyandv
aluepai
rs(eachpai
risal
so
cal
ledadecl
arat
ion

25
 Decl
arat
ionBl
ocks

Theser
iesofdecl
arat
ionsi
sal
socal
l
edt
hedecl
arat
ionbl
ock.

Adeclar
ati
onbl
ockcanbet
oget
heronasi
ngl
eli
ne,
orspr
eadacr
ossmul
ti
ple
l
ines

• Thebr
owseri
gnor
eswhi
tespace

Eachdecl
arat
ioni
ster
minat
edwi
thasemi
col
on

26
 Sel
ect
ors

Whi
chel
ement
s

Ev
eryCSSr
ulebegi
nswi
thasel
ect
or.

Thesel
ect
orident
if
ieswhichel
ementorel
ement
sint
heHTMLdocumentwi
l
lbe
aff
ect
edbythedeclar
ati
onsinther
ule.

Anotherwayoft
hinkingofsel
ect
orsi
sthatt
heyar
eapat t
ernwhi
chisusedby
thebrowsert
oselecttheHTMLelement
sthatwi
ll
recei
vethest
yle.

27
 Pr
oper
ti
es

Whi
chst
ylepr
oper
ti
esoft
hesel
ect
edel
ement
s

Eachi
ndi
vi
dual
CSSdecl
arat
ionmustcont
ainapr
oper
ty.

Thesepr
oper
tynamesar
epr
edef
inedbyt
heCSSst
andar
d.

TheCSS2.
1Recommendat
iondef
inesov
erahundr
eddi
ff
erentpr
oper
tynames.

28
 Pr
oper
ti
es

CommonCSSpr
oper
ti
es

Pr
oper
tyTy
pe Pr
oper
ty

Font
s f
ont

f
ont
-f
ami
l
y

f
ont
-si
ze

f
ont
-st
yle

f
ont
-wei
ght

@f
ont
-f
ace

29
 Text l
ett
er-
spaci
ng

l
i
ne-
hei
ght

t
ext
-al
i
gn

t
ext
-decor
ati
on

t
ext
-i
ndent

Colorand backgr
ound
background

backgr
ound-
col
or

backgr
ound-
image

backgr
ound-
posi
ti
on

backgr
ound-
repeat

col
or

Bor
der
s bor
der

bor
der
-col
or

bor
der
-wi
dth

bor
der
-st
yle

bor
der
-t
op

30
 bor
der
-t
op-
col
or

bor
der
-t
op-
widt
h

et
c

Pr
oper
tyTy
pe Pr
oper
ty

Font
s f
ont

f
ont
-f
ami
l
y

f
ont
-si
ze

f
ont
-st
yle

f
ont
-wei
ght

@f
ont
-f
ace

Text l
ett
er-
spaci
ng

l
i
ne-
hei
ght

t
ext
-al
i
gn

t
ext
-decor
ati
on

t
ext
-i
ndent

31
 Colorand backgr
ound
background

backgr
ound-
col
or

backgr
ound-
image

backgr
ound-
posi
ti
on

backgr
ound-
repeat

col
or

Bor
der
s bor
der

bor
der
-col
or

bor
der
-wi
dth

bor
der
-st
yle

bor
der
-t
op

bor
der
-t
op-
col
or

bor
der
-t
op-
widt
h

et
c

Val
ues

Whatst
ylev
aluef
ort
hepr
oper
ti
es

EachCSSdecl
arat
ional
socont
ainsav
aluef
orapr
oper
ty.

32
 • Theuni
tofanygi
venv
aluei
sdependentupont
hepr
oper
ty.

• Somepr
oper
tyv
aluesar
efr
om apr
edef
inedl
i
stofkey
wor
ds.

Othersar
evaluessuchaslengt
hmeasur
ement
s,per
cent
ages,
number
swi
thout
unit
s,col
orv
alues,andURLs

Col
orVal
ues

CSSsuppor
tsav
ari
etyofdi
ff
erentway
sofdescr
ibi
ngcol
or

Met
hod Descr
ipt
ion Exampl
e

Name Useoneof17st
andar
dcol
ornames. col
or:
red;
CSS3has140st
andar
dnames.

col
or:
hot
pink;
/*CSS3onl
y*/

RGB Usest
hreedif
fer
entnumber sbet
ween col
or:
rgb(
255,
0,
0);
0and255todescribetheRed,Gr
een,
andBl
uevaluesforthecol
or.
col
or:
rgb(
255,
105,
180)
;

Hexadeci
mal Usesasix -
digi
thexadecimal number col
or:
#FF0000;
todescri
bet hered,green,andbl ue
val
ueoft hecolor;eachoft het hr
ee
RGBv al
uesi sbetween0andFF col
or:
#FF69B4;
(whi
chis255i ndeci mal).Not i
cethat
thehexadecimal numberi spreceded
byahashorpoundsy mbol (#).

RGBa Allowsyout oaddanal pha,or col

or:
rgb(
255,
0,
0,0.
5);
transpar
ency,value.Thisallowsa
backgroundcolorori maget o“show
through”thecolor.Transparencyisa
valuebetween0. 0(full
ytranspar
ent)

33
 and1.
0(f
ull
yopaque)
.

HSL Al
lowsyoutospeci
fyacolorusi
ng col
or:
hsl
(0,
100%,100%);
HueSatur
ati
onandLightval
ues.This
i
savail
abl
eonlyinCSS3.HSLAisalso
avai
l
ableaswell
. col
or:
hsl
(330,
59%,100%);

Uni
tsofMeasur
ement

Ther
ear
emul
ti
pleway
sofspeci
fyi
ngauni
tofmeasur
ementi
nCSS

Someofthesear
erel
ati
veuni
ts,
int
hatt
heyar
ebasedont
hev
alueofsomet
hingel
se,
suchast
hesizeofapar
entel
ement.

Ot
her
sar
eabsol
uteuni
ts,
int
hatt
heyhav
ear
eal
-wor
ldsi
ze.

Unlessyouaredef
ini
ngast
ylesheetf
orpr
int
ing,
iti
srecommendedt
oav
oidusi
ng
absolut
eunit
s.

Pi
xel
sareperhapst
heonepopularexcepti
on(thoughasweshal
lseel
atert
her
ear
e
al
sogoodreasonsf
oravoi
dingt
hepi xel
unit)
.

Rel
ati
veUni
ts

Uni
t Descr
ipt
ion Ty
pe

px Pi
xel
.InCSS2thi
sisarel
ati
vemeasure,
whi
l
ein Rel
ati
ve(
CSS2)
CSS3i
tisabsol
ute(1/
96ofaninch)
.

Absol
ute(
CSS3)

em Equaltot
hecomput edval
ueofthefont-
size Rel
ati
ve
proper
tyoftheelementonwhi
chiti
sused.When
usedforfontsi
zes,t
heem uni
tisi
nr el
ati
ontot
he
fontsi
zeoftheparent.

34
% Ameasur ethati
salwaysrelat
ivet
oanotherv
alue. Rel
ati
ve
Theprecisemeaningof%v ari
esdependi
ngupon
whichpropert
yiti
sbeingused.

ex Arar
elyusedrel
ati
vemeasuret
hatexpr
essessize Rel
ati
ve
i
nrel
ationtot
hex-hei
ghtofanel
ement’
sfont.

ch Anotherrarelyusedr
elati
vemeasure;t
hisone Rel
ati
ve
expressessizeinrel
ati
ontothewidthofthezer
o
("
0")characterofanelement
’sfont
.
(
CSS3onl
y)

r
em Standsforr
ootem, whi
chi
st hefontsi
zeofthe Relat
ive
rootel
ement.Unl
ikeem,whichmaybedi ff
erentf
or
eachelement,
therem i
sconstantthr
oughoutthe
document. (CSS3only
)

v
w,v
h Standsforvi
ewportwidthandviewporthei
ght.Bot
h Relat
ive
arepercent
agevalues(bet
ween0and100)oft he
vi
ewpor t(
browserwindow).Thi
sallowsanitem t
o
changesizewhent hevi
ewporti
sr esi
zed. (CSS3only
)

Absol
uteUni
ts

Uni
t Descr
ipt
ion Ty
pe

i
n I
nches Absol
ute

cm Cent
imet
ers Absol
ute

35
mm Mi
l
li
met
ers Absol
ute

pt Poi
nts(
equal
to1/
72ofani
nch) Absol
ute

pc Pi
ca(
equal
to1/
6ofani
nch) Absol
ute

Comment
sinCSS

I
tisof
tenhel
pful
toaddcomment
stoy
ourst
ylesheet
s.Comment
staket
hef
orm:

/
*commentgoesher
e*/

l
ocat
ionofst
yles

Act
ual
l
yther
ear
ethr
ee…

Di
ff
erentt
ypesofst
ylesheet

Aut
hor
-cr
eat
edst
ylesheet
s(whatwear
elear
ningi
nthi
spr
esent
ati
on)
.

Usersty
lesheet
sall
owtheindivi
dualusert
otell
thebrowsertodi
spl
aypagesusingthat
i
ndivi
dual’
sowncustom st
ylesheet
.Thisopti
onisavai
labl
einabrowserusual
l
yinit
s
accessi
bil
i
tyopt
ionsar
ea.

Thebr
owserst
ylesheetdef
inest
hedef
aul
tst
ylest
hebr
owserusesf
oreachHTML
el
ement.

St
yleLocat
ions

Aut
horCr
eat
edCSSst
yler
ulescanbel
ocat
edi
nthr
eedi
ff
erentl
ocat
ions

CSSst
yler
ulescanbel
ocat
edi
nthr
eedi
ff
erentl
ocat
ions.

36
 • I
nli
ne

• Embedded

• Ext
ernal

Youcancombi
neal
l3!

I
nli
neSt
yles

St
yler
ulespl
acedwi
thi
nanHTMLel
ementv
iat
hest
yleat
tr
ibut
e

Aninl
inestyl
eonl
yaff
ect
st heelementi
tisdef
inedwi
thinandwi
l
lov
err
ideanyot
her
st
yledefi
nit
ionsf
ort
hepropert
iesusedinthei
nli
nest
yle.

Usi
nginli
nestyl
esi
sgener
all
ydi
scour
agedsi
ncet
heyi
ncr
easebandwi
dthanddecr
ease
mai
ntainabi
l
ity
.

I
nli
nest
ylescanhowev
erbehandyf
orqui
ckl
ytest
ingoutast
ylechange.

EmbeddedSt
yleSheet

St
yler
ulespl
acedwi
thi
nthe<st
yle>el
ementi
nsi
det
he<head>el
ement

37
Whi
l
ebet
tert
hani
nli
nest
yles,
usi
ngembeddedst
ylesi
sal
sobyandl
argedi
scour
aged.

SinceeachHTMLdocumenthasitsown<sty
le>el
ement
,iti
smor edi
ff
icul
tto
consist
ent
lyst
ylemul
ti
pledocumentswhenusi
ngembeddedst
yles.

SELECTORS

Thi
ngst
hatmakey
ourl
i
feeasi
er

Whendefi
ningCSSrul
es,
youwil
lneedt
ofi
rstneedt
ouseasel
ect
ort
otel
lthebr
owser
whi
chelementswi
ll
beaffect
ed.

CSSsel
ect
orsal
l
owy
out
osel
ect

• i
ndi
vi
dualel
emenet
s

• mul
ti
pleHTMLel
ement
s,

• el
ement
sthatbel
ongt
oget
heri
nsomeway
,or

• el
ement
sthatar
eposi
ti
onedi
nspeci
fi
cway
sint
hedocumenthi
erar
chy
.

Ther
ear
eanumberofdi
ff
erentsel
ect
ort
ypes.

38
El
ementSel
ect
ors

Sel
ect
sal
li
nst
ancesofagi
venHTMLel
ement

Usest
heHTMLel
ementname.

Youcanselectal
lel
ement
sbyusi
ngt
heuni
ver
sal
elementsel
ect
or,
whi
chi
sthe*
(ast
eri
sk)char
acter
.

Gr
oupedSel
ect
ors

Sel
ect
ingmul
ti
plet
hings

39
Youcansel
ectagr
oupofel
ement
sbysepar
ati
ngt
hedi
ff
erentel
ementnameswi
th
commas.

Thi
sisasensiblewaytoreducethesi
zeandcompl
exi
tyofy
ourCSSf
il
es,
bycombi
ning
mult
ipl
eident
icalr
ulesi
ntoasingler
ule.

Reset

Gr
oupedsel
ect
orsar
eof
tenusedasawayt
oqui
ckl
yresetorr
emov
ebr
owserdef
aul
ts.

Thegoalofdoingsoistoreducebr
owseri
nconsi
stenci
eswi
tht
hingssuchasmar
gins,
l
inehei
ghts,andfontsi
zes.

40
Theser
esetst
ylescanbeplacedintheirowncssfi
le(perhapscal
l
edr
eset
.css)and
l
inkedt
othepagebeforeanyotherexternal
sty
lessheets.

Cl
assSel
ect
ors

Si
mul
taneousl
ytar
getdi
ff
erentHTMLel
ement
s

Acl
assselect
orall
owsyout
osimult
aneousl
ytar
getdi
ff
erentHTMLel
ement
s
r
egar
dlessofthei
rposi
ti
oni
nthedocumentt
ree.

I
faseri
esofHTMLel ementhavebeenlabel
edwiththesamecl
assatt
ri
buteval
ue,then
y
oucantargett
hem forst
yli
ngbyusingaclasssel
ector
,whi
chtakest
heform:per
iod(.)
f
oll
owedbytheclassname.

41
 • Youcanal sospeci
fyt
hatonl
yspeci
fi
cHTMLel ement
sshoul
dbeaffectedbya
cl
ass.Intheexamplebel
ow,onl
y<p>element
swi t
hcl
ass="
cent
er"wil
lbecent
er-
al
igned:

• HTMLelement
scanalsorefert
omorethanoneclass.I
ntheexampl
ebelow,t
he
<p>el
ementwi
llbest
yledaccor
dingt
oclass="
center
"andtocl
ass="
lar
ge":

I
dSel
ect
ors

42
 Tar
getaspeci
fi
cel
ementbyi
tsi
dat
tri
but
e

Anidselect
orall
owsy outot
argetaspeci
fi
cel
ementbyi
tsi
dat
tr
ibut
e
regar
dlessofi
tstypeorposi
ti
on.

I
fanHTMLel ementhasbeenlabel
edwit
hanidatt
ri
but
e,theny
oucantar
getit
forst
yli
ngbyusi
nganidselect
or,whi
cht
akesthef
orm:pound/
hash(
#)fol
lowed
bytheidname.

Not
e:Youshoul
donl
ybeusi
ngani
donceperpage

43
 I
dver
susCl
assSel
ect
ors

Howt
odeci
de

Idsel
ect
orsshoul
donlybeusedwhenref
erenci
ngasi
ngl
eHTMLel
ementsi
nce
anidatt
ri
but
ecanonlybeassignedt
oasingl
eHTMLelement
.

Cl
assselect
orsshoul
dbeusedwhen(
pot
ent
ial
l
y)r
efer
enci
ngsev
eral
rel
ated
el
ements.

At
tr
ibut
eSel
ect
ors

Sel
ect
ingv
iapr
esenceofel
ementat
tri
but
eorbyt
hev
alueofanat
tr
ibut
e

Anatt
ri
butesel
ectorpr
ovi
desawaytosel
ectHTMLelementsbyei
thert
he
pr
esenceofanelementat
tri
but
eorbyt
hevalueofanat
tr
ibut
e.
44
 Thi
scanbeav er
ypowerf
ult
echni
que,butbecauseofunev
ensuppor
tbysome
oft
hebrowser
s,notal
lwebaut
horshaveusedthem.

At
tr
ibut
esel
ect
orscanbeav
eryhel
pful
techni
quei
nthest
yli
ngofhy
per
li
nksand
i
mages.

45
 PseudoSel
ect
ors

Sel
ectsomet
hingt
hatdoesnotexi
stexpl
i
cit
lyasanel
ement

Apseudo- el
ementselect
orisawayt
oselectsomethi
ngthatdoesnotexi
st
expli
cit
lyasanelementintheHTMLdocumenttreebutwhichi
ssti
lla
recogni
zablesel
ectableobj
ect
.

Apseudo-
classsel
ectordoesappl
ytoanHTMLelement,butt
arget
sei
thera
par
ti
cul
arstateor,
inCSS3,avari
etyoff
ami
lyr
elat
ionshi
ps.

Themostcommonuseoft
hist
ypeofsel
ect
orsi
sfort
arget
ingl
i
nkst
ates.

46
 Cont
ext
ual
Sel
ect
ors

Sel
ectel
ement
sbasedont
hei
rancest
ors,
descendant
s,orsi
bli
ngs

Acont
extualsel
ect
or(i
nCSS3alsocal
ledcombinator
s)al
lowsy
out
osel
ect
el
ementsbasedonthei
rancest
ors,
descendant
s,orsi
bli
ngs.

Thati
s,i
tsel
ect
selement
sbasedont
hei
rcont
extort
hei
rrel
ati
ont
oot
her
el
ementsint
hedocumenttr
ee.

47
 Sel
ect
or Mat
ches Exampl
e

Descenda Aspecifi
ed di
vp
nt el
ementt hati
s
cont
ained
somewher ewit
hin Sel
ectsa<p>elementthatis
anot
herspecifi
ed contai
nedsomewherewi t
hina
el
ement <di
v>element
.Thatis,
the<p>
canbeanydescendant,notj
usta
chi
ld.

Chi
l
d Aspecifi
ed di
v>h2
el
ementt hatisa
dir
ectchi
ldoft he
speci
fi
edel ement Sel
ect
san<h2>elementt
hati
sa
chi
l
dofa<di
v>element.

Adj
acent Aspeci fi
ed h3+p
Si
bli
ng elementt hatis
thenextsi bl
ing
(i
.e.,comes Select
sthef
ir
st<p>af
terany
directl
yafter)of <h3>.
thespecified
element .

General Aspeci f
ied h3~p
Si
bli
ng el
ementt hat
sharesthesame
parentast he Select
sallt
he<p>element
sthat
specif
iedel ement
. sharethesameparentast
he
<h3>.

DescendantSel
ect
or

Sel
ect
sal
lel
ement
sthatar
econt
ainedwi
thi
nanot
herel
ement

48
 Whil
esomeofthesecont
ext
ualsel
ect
orsareusedrel
ati
vel
yinf
requent
ly,
almost
al
lwebaut
hor
sf i
ndthemsel
vesusi
ngdescendantsel
ect
ors.

Adescendantsel
ectormat chesal
lel
ement
st hatar
econtai
nedwit
hinanot
her
el
ement.Thecharacterusedtoindi
cat
edescendantsel
ecti
oni
sthespace
char
acter
.

Cont
ext
ual
Sel
ect
orsi
nAct
ion

49
 Thecascade:
howst
ylesi
nter
act

WhyConf
li
ctHappens

I
nCSSt
hati
s

Because

• t
her
earet
hreedif
fer
enttypesofst
ylesheet
s(aut
hor
-cr
eat
ed,
user
-def
ined,
and
t
hedef
aul
tbrowserst
ylesheet
),

• aut
hor
-cr
eat
edst
ylesheet
scandef
inemul
ti
pler
ulesf
ort
hesameHTMLel
ement
,

CSShasasy st
em tohel
pthebr
owserdet
ermi
nehowt
odi
spl
ayel
ement
swhen
di
ff
erentst
yler
ulesconf
li
ct.

50
 Cascade

Howconf
li
cti
ngr
ulesar
ehandl
edi
nCSS

The“
Cascade”i
nCSSr
efer
stohowconf
li
cti
ngr
ulesar
ehandl
ed.

Thevisualmetaphorbehi
ndtheterm cascadei
sthatofamount
ainst
ream
progr
essingdownstream ov
errocks.

Thedownwardmovementofwaterdownacascadeismeantt
obeanal
ogoust
o
howagivenst
yler
ulewi
ll
conti
nuetotakepr
ecedencewi
thchi
ldel
ements.

CascadePr
inci
ples

CSSusest
hef
oll
owi
ngcascadepr
inci
plest
ohel
pitdeal
wit
hconf
li
cts:

• i
nher
it
ance,

• speci
fi
cit
y,

• l
ocat
ion

I
nher
it
ance

CascadePr
inci
ple#1

Many(
butnotal
l
)CSSpr
oper
ti
esaf
fectnotonl
ythemsel
vesbutt
hei
rdescendant
s
aswel
l
.

Font
,col
or,
li
st,
andt
extpr
oper
ti
esar
einher
it
abl
e.

Lay
out
,si
zi
ng,
bor
der
,backgr
oundandspaci
ngpr
oper
ti
esar
enot
.

51
 Howt
ofor
cei
nher
it
ance

I
tispossi
blet
otel
lel
ement
stoi
nher
itpr
oper
ti
est
hatar
enor
mal
l
ynoti
nher
it
abl
e.

52
 Speci
fi
cit
y

CascadePr
inci
ple#2

Speci
fi
cit
yishowthebrowserdet
ermi
neswhichst
yler
ulet
akespr
ecedencewhen
morethanonesty
lerul
ecouldbeappl
i
edtothesameelement.

Themor especi
fict
hesel
ect
or,
themor
eitt
akespr
ecedence(
i.
e.,
over
ri
dest
he
prev
iousdefi
nit
ion)
.

Thewaythatspeci
fi
cit
ywor
ksi
nthebr
owseri
sthatt
hebr
owserassi
gnsawei
ghtt
o
eachst
yler
ule.

Whensev
eral
rul
esappl
y,t
heonewi
tht
hegr
eat
estwei
ghtt
akespr
ecedence.

Speci
fi
cit
yAl
gor
it
hm

Theal
gor
it
hm t
hati
susedt
odet
ermi
nespeci
fi
cit
yis:

53
 Fir
stcount1i
fthedecl
arat
ioni
sfr
om a'
sty
le'
att
ri
but
eint
heHTML,
0ot
her
wise(
let
thatv
alue=a)
.

Countt
henumberofI
Dat
tri
but
esi
nthesel
ect
or(
lett
hatv
alue=b)
.

Countt
henumberofot
herat
tri
but
esandpseudo-
classesi
nthesel
ect
or(
lett
hat
val
ue=c).

Countt
henumberofel
ementnamesandpseudo-
element
sint
hesel
ect
or(
lett
hat
val
ue=d).

Fi
nall
y,concat
enat
ethef
ournumber
sa+b+c+dt
oget
hert
ocal
cul
atet
hesel
ect
or’
s
speci
fi
cit
y.

54
 Locat
ion

CascadePr
inci
ple#3

Wheninher
it
anceandspeci
fi
cit
ycannotdet
ermi
nest
ylepr
ecedence,
thepr
inci
pleof
l
ocat
ionwil
lbeused.

Thepr
inci
pleofl
ocat
ioni
sthatwhenr
uleshav
ethesamespeci
fi
cit
y,t
hent
hel
atest

55
 ar
egi
venmor
ewei
ght
.

Whatcol
orwoul
dthesampl
etextbei
fther
ewasn’
tani
nli
nest
yledef
ini
ti
on?

56
 Ther
e’sal
way
sanexcept
ion

Ther
eisoneexcept
iont
othepr
inci
pleofl
ocat
ion.

I
faproper
tyi
smarkedwi
th!i
mportanti
nanauthor
-cr
eat
edstyl
erul
e,t
heni
twi
l
l
over
ri
deanyot
heraut
hor
-cr
eatedsty
ler
egar
dlessofi
tsl
ocat
ion.

Theonl
yexcepti
onisasty
lemar
kedwi
th!
impor
tanti
nanuserst
ylesheet
;sucha
rul
ewil
lov
erri
deall
other
s.

TheBOXMODEL

57
 TheBoxModel

Ti
met
othi
nki
nsi
det
hebox

I
nCSS,
all
HTMLel
ement
sexi
stwi
thi
nanel
ementbox.

I
tisabsolutel
yessent
ial
thaty
oufamil
iar
izeyoursel
fwit
hthet
ermi
nol
ogyand
r
elat
ionshipoftheCSSproper
ti
eswit
hintheelementbox.

Backgr
ound

58
 BoxModel
Proper
ty#1

Thebackgroundcol
orori
mageofanel
ementf
il
lsanel
ementoutt
oit
sbor
der(
ifi
t
hasonethatis)
.

I
ncont emporarywebdesi gn,ithasbecomeextr
emelycommont oouseCSSto
di
splaypurelypresentat
ionalimages(suchasbackgr
oundgradi
ent
sandpatt
erns,
decorati
veimages, et
c)ratherthanusi
ngthe<i
mg>el ement

Backgr
oundPr
oper
ti
es

Pr
oper
ty Descr
ipt
ion

backgr
ound Acombi nedshor t
-handpropert
ythatallowsy outosett
he
backgroundv al
uesinonepr oper
ty.Whi l
ey oucanomit
propert
ieswiththeshort-
hand,dor emembert hatany
omittedpropert
ieswill
besett otheirdefaultv
alue.

backgr
ound-
att
achment Speci
fi
eswhetherthebackgroundimagescroll
swiththe
document(def
aul
t)orremainsfixed.Possi
blev
aluesare:
fi
xed,
scrol
l
.

backgr
ound-
col
or Set
sthebackgr
oundcol
oroft
heel
ement
.

backgr
ound-
image Speci
fiesthebackgroundimage( whichi
sgener
all
yaj peg,
gif
,orpngf il
e)f
ortheelement.Notethatt
heURLis
rel
ati
vetot heCSSfil
eandnott heHTML.CSS3introduced
theabil
it
ytospecif
ymul ti
plebackgroundi
mages.

backgr
ound-
posi
ti
on Speci fi
eswher eontheelementt hebackgr oundimagewi ll
bepl aced.Somepossi blevaluesincl
ude: bottom,center
,
l
ef t
, andr i
ght
.Youcanal sosupplyapi xelorpercentage
numer i
cpositi
onv al
ueaswel l
.Whensuppl yinganumer ic
value, youmustsupplyahor izont
al/v
er t
icalpair
;thi
sv al
ue
i
ndi catesitsdi
stancefrom thetopleftcornerofthe
element .

59
backgr
ound-
repeat Determineswhet herthebackgroundimagewi l
lbe
repeated.Thisisacommont echniqueforcr
eati
ngat i
led
background( i
tisinfactt
hedef aul
tbehavior
).Possi
ble
valuesare:repeat,
repeat
-x,r
epeat-y,andno-
repeat.

backgr
ound-
size Newt oCSS3,thi
spr
oper
tyl
etsy
oumodi
fyt
hesi
zeoft
he
backgroundi
mage.

Backgr
oundRepeat

Backgr
oundPosi
ti
on

60
 Bor
der
s

BoxModel
Proper
ty#2

Bor
der
spr
ovi
deawayt
ovi
sual
l
ysepar
ateel
ement
s.

Youcanputbor
der
sar
oundal
lfoursi
desofanel
ement
,orj
ustone,
two,
ort
hreeof
thesi
des.

Pr
oper
t Descr
ipt
ion
y

bor
der Acombinedshor
t-handproper
tythatal
lowsyoutosett
hestyl
e,wi
dth,
andcol
orofaborderinonepropert
y.Theorderi
simpor
tantandmust
be:

bor
der
-st
ylebor
der
-wi
dthbor
der
-col
or

61
 border
- Specif
iesthel
inet
ypeoftheborder
.Possi
blev
aluesar
e:sol
i
d,dot
ted,
sty
le dashed,doubl
e,gr
oove,
ridge,
inset
,andout
set
.

border- Thewi
dthoft
heborderi
naunit(butnotper
cents)
.Av
ari
etyof
width key
wor
ds(thi
n,medi
um,etc)ar
ealsosupported.

bor
der- Thecol
oroft
hebor
deri
nacol
oruni
t.
col
or

border
- Ther
adi
usofar
oundedcor
ner
.
radi
us

bor
der
- TheURLofani
maget
ouseasabor
der
.
i
mage

Shor
tcutnot
ati
on

TRBL

Wi
thbor
der,mar
gin,
andpaddi
ngpr
oper
ti
es,
ther
ear
elong-
for
m andshor
tcut
met
hodstosett
he4sides

62
 Mar
ginsandPaddi
ng

BoxModel
Proper
ti
es#3and#4

63
64