Chapt

er1

I
ntr
oduc
tiont
oCSSandBas
icDes
ignPr
inc
ipl
es
CSSi
sas
tyl
esheetl
anguageus
edt
ocont
rolt
hepr
esent
ati
onandl
ayoutofHTMLor
XML doc
ument
s.I
tal
lowsf
ort
he s
epar
ati
on ofc
ont
entand des
ign,enabl
ing
c
ons
ist
entandvi
sual
lyappeal
ingwebpages
.Bas
icdes
ignpr
inc
ipl
esenc
ompas
s
s
tyl
ingel
ement
s,l
ayouts
truc
tur
ing,andmai
ntai
ningac
ohes
ivevi
sualaes
thet
ic.
Thi
sfoundat
ionalknowl
edge i
ses
sent
ialf
orc
reat
ing wel
l-des
igned and us
er-
f
ri
endl
ywebs
ites
.

 Advant
agesandar
easofappl
icat
ionofCSS

CSS (
Cas
cadi
ng St
yle Sheet
s)of
fer
s advant
ages s
uch as enhanc
ed webs
ite
c
ons
ist
enc
y,eas
iermai
ntenanc
e,andi
mpr
ovedpagel
oadi
ngs
peed.I
tpr
ovi
desa
s
epar
ati
onofc
ont
entanddes
ign,maki
ngs
tyl
ingef
fi
ci
ent
.CSSi
swi
del
yappl
iedi
n
webdevel
opmentf
orc
reat
ingr
espons
ivel
ayout
s,c
ust
omi
zi
ngvi
sualel
ement
s,and
ens
uri
ngas
eaml
essus
erexper
ienc
eac
ros
svar
iousdevi
ces
.It
sver
sat
il
it
yand
adapt
abi
li
tymakei
tac
orner
stonet
echnol
ogyf
ormoder
nwebdes
ign.

1.
2.USERREQUI
REMENTSFORCSSSTYLE
Us
err
equi
rement
sar
ethes
pec
ifi
cneedsandwant
sofaus
ert
hatmus
tbet
akeni
nto
ac
countdur
ingt
hewebdes
ignqual
it
yas
sur
anc
epr
oces
s.Theus
err
equi
rement
s
gat
her
ingpr
oces
sinc
ludess
urveys
,int
ervi
ews
,foc
usgr
oups
,andmor
e.Onc
eyou
det
ermi
neus
err
equi
rement
sands
etanac
cept
anc
ecr
iter
iac
hec
kli
stf
oreac
h,you
s
houl
dputt
hem i
nawebs
iter
equi
rement
sdoc
ument
.Thos
ewi
llhel
pyouwi
tht
he
UXdes
ignpr
oces
sbys
pec
ifyi
ngwhatt
hevi
si
tors
houl
dseeont
hewebs
ite,howi
t
s
houl
dwor
k,andanys
pec
ialc
ons
ider
ati
onst
hatneedt
obet
akeni
ntoac
count
.

 Ac
ces
sibi
li
tygui
del
inesf
orUXdes
ignpr
oces
s

Webs
iteac
ces
sibi
li
tygui
del
inesWCAGar
eas
etofbes
tpr
act
icest
hathel
ppeopl
e
wi
thdi
sabi
li
ti
esus
ethei
nter
net
.Thes
egui
del
ineshel
pwebdes
igner
stomake
webs
iteseas
iert
ous
e,byens
uri
ngt
heyar
eac
ces
sibl
etoever
yone.
Thos
egui
del
ines

1
ar
esor
tedi
ntot
hef
oll
owi
ngc
ategor
ies
:

 Oper
abl
e

Youneedt
omakes
uret
hatever
ytas
kisper
for
mabl
eonbot
hkeyboar
dandmous
e,
t
hatus
ershaveenought
imet
ocompl
eteat
ask.

 Per
cei
vabl
e

Youneedt
oens
uret
hatal
lus
ersc
aneas
ilyper
cei
veyourc
ont
ent
.Pr
ovi
det
ext
al
ter
nat
ivesf
orvi
deosandi
mages
,pl
anoni
mpl
ement
ingaudi
oal
ter
nat
ivesf
or
t
ext
ualc
ont
ent
,andens
urei
tcanbec
ons
umedbyvi
si
tor
swhous
esc
reenr
eader
s.

 Under
standabl
e

Maxi
miz
ingt
hec
hanc
est
hatvi
si
tor
swi
llbeabl
etomakes
ens
eofyourc
ont
enti
s
vi
tali
nwebdes
ign.Youc
andoi
tbyavoi
dingc
ompl
exwor
dsandi
nst
ruc
tions
,
expl
aini
nger
rormes
sagesandi
nter
act
ivewebs
itedes
ignel
ement
sindet
ail
..

 Robus
t

Thr
oughqual
it
yas
sur
anc
e,youneedt
oens
uret
hatyourwebs
itei
sac
ces
sibl
efr
om
al
lthedi
ff
erentbr
ows
ersanddevi
cespeopl
eus
etoexpl
oret
hei
nter
net

1.
3.DEVELOPMENTOFCSSTOMATCHUSERREQUI
REMENTS

Bef
oreyous
tar
twr
iti
ngus
err
equi
rement
sforawebs
itedes
ignyouneedt
odeepl
y
under
standyourt
argetaudi
enc
e.

 Bui
ldt
rus
twi
thc
ust
omer
s

Aspeopl
emos
tlybuypr
oduc
tsands
ervi
cesf
rom bus
ines
sest
heyt
rus
t,t
hee-
Commer
cedevel
opmentpr
oces
sneedst
obef
ocus
edonbui
ldi
ngawebs
itet
hat
i
nvokest
rus
twor
thi
nes
s.

Fi
rsti
mpr
ess
ionsar
elas
tingi
mpr
ess
ions
,andt
her
ear
esever
alwaysi
nwhi
chweb
s
trat
egi
stsc
ans
ecur
epos
iti
veones
:

2
  Mi
rrort
hewor
dsofyourt
argetaudi
enc
e

I
mit
ati
ngt
het
oneofyourt
argetaudi
enc
ecanenor
mous
lyi
ncr
eas
eawebs
ite’
s
c
onver
sionr
ates
.

 Evokeemot
ionswi
thvi
sual
s

Power
fulwayt
oconnec
twi
tht
het
argetaudi
enc
eisbyi
ncl
udi
ngphot
osandvi
deos
t
hatevoket
rus
tac
ros
syourl
andi
ngpages
.

 Us
efulandc
reat
ivec
ont
ent

Mos
tus
erswi
llc
omet
oyourwebs
itewi
thonegoal–t
ofi
ndus
efuli
nfor
mat
ion.To
i
mpr
ovec
ust
omerr
etent
ionf
oryourbus
ines
s,youneedt
oens
uret
hatonl
yhi
gh-
qual
it
ycont
entendsuponyourwebs
ite.

 Makei
teas
ytonavi
gat
e

Bef
ores
tar
tingaus
erexper
ienc
edes
ignpr
oces
s,i
tisc
ruc
ialt
oputyour
sel
fint
he
webs
itevi
si
tor
’ss
hoes
.

Youneedt
oens
uret
hatt
henavi
gat
ionmenui
ssi
mpl
etounder
standandpl
aced
exac
tlywher
eus
ersexpec
titt
obe.

 Hor
izont
alnavi
gat
ionbar

Pr
obabl
ythemos
tpopul
arnavi
gat
ionmenut
ype,
thati
sus
ual
lyl
ocat
edatt
het
opof
t
hepage,j
ustbel
ow t
heheader
.Thehor
izont
alnavi
gat
ionbargoesi
nthel
eft
-to-
r
ightdi
rec
tion.

 Ver
tic
als
idebarnavi
gat
ionmenu

Thi
stypeofmenuappear
sont
her
ightorl
efts
ideandus
ual
lys
tret
chesf
romt
het
op
t
othebot
tomoft
hepage

 Dr
opdownnavi
gat
ionmenu

Adr
opdownnavi
gat
ionmenui
sac
ommonus
eri
nter
fac
eel
ementus
edi
n

3
 webs
itesand appl
icat
ionst
oor
gani
zeand di
spl
ayal
istofopt
ionsi
na
hi
erar
chi
calmanner
.

 Hambur
gernavi
gat
ionmenu

Thi
sisat
ypeofnavi
gat
ionmenut
hatappear
swhenyouhoveryourmous
eorc
lic
k
overa“
hambur
ger
”but
ton.I
tist
hemos
tpopul
armenut
ypef
ormobi
lewebs
ite
des
ignbec
aus
eitoc
cupi
est
hel
eas
tspac
eunt
ilt
heus
erc
lic
ksoni
t.

 Foot
ernavi
gat
ionmenu

Oneoft
hewebs
itedes
ignel
ement
sthatyous
houl
dn’
tover
lookwhenc
reat
inga
webdevel
opmentc
hec
kli
sti
sthef
oot
ernavi
gat
ionmenu.Asi
tsnames
ugges
ts,i
t
appear
satt
hebot
tomofyourwebpages
.

Uni
tTwoWebpagec
reat
ionsus
ingCSSandHTML

2.
1.STYLEELEMENTSOFAWEBPAGE
 CSSSynt
ax

ACSSc
ompr
isesofs
tyl
erul
est
hatar
eint
erpr
etedbyt
hebr
ows
erandt
henappl
ied
t
othec
orr
espondi
ngel
ement
sinyourdoc
ument
.As
tyl
erul
eismadeoft
hreepar
ts
–

Thes
elec
torpoi
ntst
otheHTMLel
ementyouwantt
ost
yle.Exampl
e:<
h1>or
<
tabl
e>et
c.

The dec
lar
ati
on bl
ockc
ont
ainsone ormor
e dec
lar
ati
onss
epar
ated by
s
emi
col
ons
.

4
 Eac
hdec
lar
ati
oni
ncl
udesaCSSpr
oper
tynameandaval
ue,s
epar
atedbya
c
olon.

Pr
oper
ty−Apr
oper
tyi
sat
ypeofat
tri
but
eofHTMLt
ag.
Puts
impl
y,al
l
t
heHTMLat
tri
but
esar
econver
tedi
ntoCSSpr
oper
ties
.Theyc
oul
dbe
c
olor
,bor
deret
c.

Val
ue−Val
uesar
eas
signedt
opr
oper
ties
.Forexampl
e,c
olorpr
oper
ty
c
anhaveval
ueei
therr
edor#F1F1F1et
c.

Fi
g:2.
1.SomeCSSs
tyl
es

 TheTypeSel
ect
ors

 TheUni
ver
salSel
ect
ors

I
sus
edt
osel
ectandappl
yst
ylest
oal
lel
ement
sonawebpage.

*{c
olor
:#000000;}

 TheDes
cendantSel
ect
ors

Suppos
eyouwantt
oappl
yas
tyl
erul
etoapar
tic
ularel
ementonl
ywheni
tli
es
i
nsi
deapar
tic
ularel
ement
.

ulem{
col
or:#000000;
}
 TheCl
assSel
ect
ors

5
Youc
andef
ines
tyl
erul
esbas
edont
hec
las
sat
tri
but
eoft
heel
ement
s.Al
lthe
el
ement
shavi
ngt
hatc
las
swi
llbef
ormat
tedac
cor
dingt
othedef
inedr
ule.

.
blac
k{c
olor
:#000000;}
 TheI
DSel
ect
ors

Youc
andef
ines
tyl
erul
esbas
edont
hei
dat
tri
but
eoft
heel
ement
s.Al
ltheel
ement
s
havi
ngt
hati
dwi
llbef
ormat
tedac
cor
dingt
othedef
inedr
ule.

#bl
ack{
col
or:#000000;}
h1#bl
ack{c
olor
:#000000;}
 TheChi
ldSel
ect
ors
(>)

Youhaves
eent
hedes
cendants
elec
tor
s.Ther
eisonemor
etypeofs
elec
tor
,whi
chi
s
ver
ysi
mil
art
odes
cendant
sbuthavedi
ff
erentf
unc
tional
it
y.Cons
idert
hef
oll
owi
ng
exampl
e−

body>p{
col
or:#000000;}
 Adj
acentSi
bli
ngSel
ect
or(
+)

Theadj
acents
ibl
ings
elec
tori
sus
edt
osel
ectanel
ementt
hati
sdi
rec
tlyaf
ter
anot
hers
pec
ifi
cel
ement
.

 Gener
alSi
bli
ngSel
ect
or(
~)

Thegener
als
ibl
ings
elec
tors
elec
tsal
lel
ement
sthatar
enexts
ibl
ingsofas
pec
ifi
ed
el
ement
.

 TheAt
tri
but
eSel
ect
ors

Youc
anal
soappl
yst
ylest
oHTMLel
ement
swi
thpar
tic
ularat
tri
but
es.

i
nput
[type="
text
"]{
col
or:#000000;}
 Gr
oupi
ngSel
ect
ors

6
Thegr
oupi
ngs
elec
tors
elec
tsal
ltheHTMLel
ement
swi
tht
hes
ames
tyl
edef
ini
ti
ons
.

 Mul
ti
pleSt
yleRul
es

Youmayneedt
odef
inemul
ti
ples
tyl
erul
esf
oras
ingl
eel
ement
.Youc
andef
ine
t
hes
erul
est
ocombi
nemul
ti
plepr
oper
tiesandc
orr
espondi
ngval
uesi
ntoas
ingl
e
bl
ockasdef
inedi
nthef
gexampl
e:

h1{
col
or:#36C;f
ont
-wei
ght
:nor
mal
;text
-tr
ans
for
m:l
ower
cas
e;}

 AddCSSt
oaWebpage

Ther
ear
efourwayst
oas
soc
iat
est
yleswi
thyourHTMLdoc
ument
.Mos
tcommonl
y
us
edmet
hodsar
einl
ineCSSandExt
ernalCSS.

A)EmbeddedCSS-The<
styl
e>El
ement
Youc
anputyourCSSr
ulesi
ntoanHTMLdoc
umentus
ingt
he<
styl
e>el
ement
.Thi
s
t
agi
spl
acedi
nsi
det
he<
head>
..
.<
/head>t
ags
.

<
html
>
<
head>
<
styl
etype="
text
/cs
s"medi
a="
all
">
body{bac
kgr
ound-
col
or:l
inen;
}
<
/st
yle>
<
/head>
<
body>
<
/body>
<
/ht
ml>

B)I
nli
neCSS-Thes
tyl
eAt
tri
but
e
Youc
anus
est
yleat
tri
but
eofanyHTMLel
ementt
odef
ines
tyl
erul
es.Thes
erul
es
wi
llbeappl
iedt
othatel
ementonl
y.

<
elements
tyl
e="
..
.s
tyl
erul
es.
.
..
">
<
html
>

7
<
head>
<
/head>
<
body>
<
h1s
tyl
e="
col
or:
#36C;
">
Thi
sisi
nli
neCSS
<
/h1>
<
/body>
<
/ht
ml>

C)Ext
ernalCSS-The<
li
nk>El
ement
Anext
ernals
tyl
esheeti
sas
epar
atet
extf
il
ewi
th.
cssext
ens
ion.Youdef
ineal
lthe
St
yler
uleswi
thi
nthi
stextf
il
eandt
henyouc
ani
ncl
udet
hisf
il
einanyHTML
doc
umentus
ing<
li
nk>el
ement
.

<
head>
<
li
nkt
ype="
text
/cs
s"hr
ef="
..
."medi
a="
..
."/
>
<
/head>

D)I
mpor
tedCSS-@i
mpor
tRul
e
@i
mpor
tisus
edt
oimpor
tanext
ernals
tyl
esheeti
namanners
imi
lart
othe<
li
nk>
el
ement
.Her
eist
hegener
ics
ynt
axof@i
mpor
trul
e.

<
head>
@i
mpor
t"URL"
;
@i
mpor
tur
l("
URL"
);
<
/head>
 CSSRul
esOver
ridi
ng

Wehavedi
scus
sedf
ourwayst
oinc
ludes
tyl
esheetr
ulesi
nanHTMLdoc
ument
.Her
e
i
sther
ulet
oover
rideanySt
yleSheetRul
e.

Anyi
nli
nes
tyl
esheett
akeshi
ghes
tpr
ior
ity.So,i
twi
llover
rideanyr
uledef
inedi
n
<
styl
e>.
.
.</
styl
e>t
agsorr
ulesdef
inedi
nanyext
ernals
tyl
esheetf
il
e.

8
Anyr
uledef
inedi
n<s
tyl
e>.
.
.</
styl
e>t
agswi
llover
rider
ulesdef
inedi
nanyext
ernal
s
tyl
esheetf
il
e.

Anyr
uledef
inedi
next
ernals
tyl
esheetf
il
etakesl
owes
tpr
ior
ity,andr
ulesdef
ined
i
nthi
sfi
lewi
llbeappl
iedonl
ywhenabovet
wor
ulesar
enotappl
icabl
e.

Fi
g:2.
2.Cas
cadi
ngOr
der(
Prec
edenc
e)

 CSSComment
s

Manyt
imes
,youmayneedt
oputaddi
ti
onalc
omment
sinyours
tyl
esheetbl
ocks
.So,
i
tisver
yeas
ytoc
ommentanypar
tins
tyl
esheet
.Youc
ans
impl
eputyourc
omment
s
i
nsi
de/
*..
.
..
thi
sisac
ommenti
nst
yles
heet
..
..
.
*/.

/
*Thi
sisas
ingl
e-l
inec
omment*/
/
*Thi
sisa
mul
ti
-l
ine
c
omment*/

 CSS–Uni
ts

9
Val
uesanduni
ts,i
nCSS,ar
esi
gni
fi
cantast
heydet
ermi
net
hes
ize,pr
opor
tions
,and
pos
iti
oni
ng

A)Abs
olut
eLengt
hUni
ts

Thes
e uni
tsar
ecat
egor
ized asf
ixed-
lengt
h uni
ts,whi
ch meanst
hatl
engt
hs
s
pec
ifi
edwi
thabs
olut
euni
tsmai
ntai
nanexac
t,unc
hangeds
izeont
hes
creen.

Exampl
e:

Uni
t Des
cri
pti
on Equi
val
entval
ue Ex
ampl
e

px Pi
xel
s 1px=1/
96t
hof1i
n f
ont
-si
ze:15px;

B)Rel
ati
veLengt
hUni
ts

Ar
erel
ati
vet
osomet
hingel
se,per
hapst
hes
izeoft
hepar
entel
ement
'sf
ont
,ort
he
s
izeoft
hevi
ewpor
t.

Tabl
e:2.
1.Rel
ati
veLengt
hUni
ts

Uni
t Des
cri
pti
on Ex
ampl
e

Rem Rel
ati
vet
ofont
-si
zeoft
her
ootel
ement
. f
ont
-si
ze:
2r
em;

Vh I
tisr
elat
ivet
othehei
ghtoft
hevi
ewpor
t.1vh=1% f
ont
-si
ze:
or1/
100oft
hehei
ghtoft
hevi
ewpor
t. 4vh;

Vw I
tisr
elat
ivet
othewi
dthoft
hevi
ewpor
t.1vw=1% wi
dth:4vw;
or1/
100oft
hewi
dthofvi
ewpor
t.

vmi
n I
tisr
elat
ive t
othe s
mal
ler di
mens
ion oft
he wi
dth:
vi
ewpor
t.1vmi
n=1% or1/
100oft
hevi
ewpor
t'
s 4vmi
n;
s
mal
lerdi
mens
ion.

10
 CSS–Col
ors

CSSus
esc
olorval
uest
ospec
ifyac
olor
.Typi
cal
ly,
thes
ear
eus
edt
osetac
olorei
ther
f
ort
hef
oregr
oundofanel
ement(
i.
e.i
tst
ext
)orel
sef
ort
hebac
kgr
oundoft
he
el
ement
.Theyc
anal
sobeus
edt
oaf
fec
tthec
olorofbor
der
sandot
herdec
orat
ive
ef
fec
ts.

 NamedCol
ors

ACSSnamedc
olori
sthenameofac
olor
,suc
hasr
ed,
blue,
blac
k,orl
ight
-gr
een.

 RGBHexadec
imalCol
ors

A hexadec
imali
sa6di
gitr
epr
esent
ati
on ofac
olor
.Thef
irs
ttwodi
git
s(RR)
r
epr
esentar
edval
ue,t
henextt
woar
eagr
eenval
ue(
GG)
,andt
hel
astar
ethebl
ue
val
ue(
BB)
.

Eac
hhexadec
imalc
odewi
llbepr
ecededbyapoundorhas
hsi
gn'
#'.Fol
lowi
ngar
e
t
heexampl
esofhexadec
imalnot
ati
on.

bor
der
:1pxs
oli
d#f
f0099;

 RGBVal
ues

Thi
scol
orval
uei
sspec
ifi
edus
ingt
her
gb()pr
oper
ty.

I
ttakest
hreeval
ues
,oneeac
hforr
ed,
green,
andbl
ue.

Theval
uec
anbeani
ntegerbet
ween0and255oraper
cent
age.

Col
or:
RGB(
20,
50,
255)

 HSLVal
ues

Thi
scol
orval
uei
sspec
ifi
edus
ingt
hehs
l()f
unc
tion.

HSLs
tandsf
orhue,
sat
urat
ionandl
ight
nes
s.

Hue i
srepr
esent
ed i
n degr
ees (
0-360)
,sat
urat
ion and l
ight
nes
s ar
e
r
epr
esent
edasper
cent
ages(
0% -100%)
.

11
Col
or:
hsl
(0,
0%,
50%)

 c
urr
ent
col
orkeywor
d

Thec
urr
ent
col
orkeywor
dtakest
heval
ueoft
hec
olorpr
oper
tyofanel
ement
.Itc
an
bepas
sedt
oanyot
hers
tyl
ingpr
oper
tyus
ingt
hekeywor
dcur
rent
col
or.

di
v{c
olor
:red;bor
der
:5pxs
oli
dcur
rent
col
or;}

 CSS–Bac
kgr
ounds

Thi
ssec
tiont
eac
hesyouhowt
osetbac
kgr
oundsofvar
iousHTMLel
ement
s.Youc
an
s
ett
hef
oll
owi
ngbac
kgr
oundpr
oper
tiesofanel
ement

Thebac
kgr
ound-
col
orpr
oper
tyi
sus
edt
osett
hebac
kgr
oundc
olorofanel
ement
.

Thebac
kgr
ound-
imagepr
oper
tyi
sus
edt
osett
hebac
kgr
oundi
mageofanel
ement
.

Thebac
kgr
ound-
repeatpr
oper
tyi
sus
edt
ocont
rolt
her
epet
iti
onofani
magei
nthe
bac
kgr
ound.

Thebac
kgr
ound-
pos
iti
onpr
oper
tyi
sus
edt
ocont
rolt
hepos
iti
onofani
magei
nthe
bac
kgr
ound.

Thebac
kgr
ound-
att
achmentpr
oper
tyi
sus
edt
ocont
rolt
hes
crol
li
ngofani
magei
n
t
hebac
kgr
ound.

Thebac
kgr
oundpr
oper
tyi
sus
ed asas
hor
thand t
ospec
ifyanumberofot
her
bac
kgr
oundpr
oper
ties
.

 CSS–Font
s

Thef
ont
-fami
lypr
oper
tyi
sus
edt
ochanget
hef
aceofaf
ont
.

Thef
ont
-st
ylepr
oper
tyi
sus
edt
omakeaf
onti
tal
icorobl
ique.

Thef
ont
-var
iantpr
oper
tyi
sus
edt
ocr
eat
eas
mal
l-c
apsef
fec
t.

Thef
ont
-wei
ghtpr
oper
tyi
sus
edt
oinc
reas
eordec
reas
ehow bol
dorl
ightaf
ont
appear
s.

12
Thef
ont
-si
zepr
oper
tyi
sus
edt
oinc
reas
eordec
reas
ethes
izeofaf
ont
.

Thef
ontpr
oper
tyi
sus
edass
hor
thandt
ospec
ifyanumberofot
herf
ontpr
oper
ties
.

 HTMLFor
ms

AnHTMLf
ormi
sus
edt
ocol
lec
tus
eri
nput
.Theus
eri
nputi
smos
tof
tens
entt
oa
s
erverf
orpr
oces
singThe

<
for
m>El
ement

TheHTML<
for
m>el
ementi
sus
edt
ocr
eat
eanHTMLf
ormf
orus
eri
nput
:

<
for
m>

/
*

f
ormel
ement
s

*/

<
/for
m>

The<
for
m>el
ementi
sac
ont
ainerf
ordi
ff
erentt
ypesofi
nputel
ement
s,s
uchas
:text
f
iel
ds,
chec
kboxes
,radi
obut
tons
,submi
tbut
tons
,et
c.

The<
input
>El
ement

TheHTML<
input
>el
ementi
sthemos
tus
edf
ormel
ement
.

An<
input
>el
ementc
anbedi
spl
ayedi
nmanyway
s,dependi
ngont
het
ypeat
tri
but
e.

Exampl
es:

Type Des
cri
pti
on

<
inputt
ype="
text
"> Di
spl
aysas
ingl
e-l
inet
exti
nputf
iel
d

<
inputt
ype="
radi
o"> Di
spl
aysar
adi
obut
ton(
fors
elec
tingoneofmanyc
hoi
ces
)

<
inputt
ype="
chec
kbox"
> Di
spl
aysac
hec
kbox(
fors
elec
tingz
eroormor
eofmanyc
hoi
ces
)

13
<
inputt
ype="
submi
t"> Di
spl
aysas
ubmi
tbut
ton(
fors
ubmi
tti
ngt
hef
orm)

<
inputt
ype="
but
ton"
> Di
spl
aysac
lic
kabl
ebut
ton

 TextFi
elds

The<
inputt
ype="
text
">def
inesas
ingl
e-l
inei
nputf
iel
dfort
exti
nput
.

Exampl
e

Af
ormwi
thi
nputf
iel
dsf
ort
ext
:

<
html
>

<
body>

<
h2>
Texti
nputf
iel
ds<
/h2>

<
for
m>

<
labelf
or="
fname"
>Fi
rstname:
</l
abel
><br
>

<
inputt
ype="
text
"id="
fname"name="
fname"val
ue="
John"
><br
>

<
labelf
or="
lname"
>Las
tname:
</l
abel
><br
>

<
inputt
ype="
text
"id="
lname"name="
lname"val
ue="
Doe"
>

<
/for
m>

<
/body>

<
/ht
ml>

 The<
label
>El
ement

Not
icet
heus
eoft
he<
label
>el
ementi
ntheexampl
eabove.

The<
label
>tagdef
inesal
abelf
ormanyf
ormel
ement
s.

14
The<
label
>el
ementi
sus
efulf
ors
creen-
readerus
ers
,bec
aus
ethes
creen-
reader
wi
llr
eadoutl
oudt
hel
abelwhent
heus
erf
ocus
esont
hei
nputel
ement
.

 Radi
oBut
tons

The<
inputt
ype="
radi
o">def
inesar
adi
obut
ton.

Radi
obut
tonsl
etaus
ers
elec
tONEofal
imi
tednumberofc
hoi
ces
.

Exampl
e

Af
ormwi
thr
adi
obut
tons
:

<
!DOCTYPEht
ml>

<
html
>

<
body>

<
h2>
Radi
oBut
tons
</h2>

<
p>Choos
eyourf
avor
iteWebl
anguage:
</p>

<
for
m>

<
inputt
ype="
radi
o"i
d="
html
"name="
fav_l
anguage"val
ue="
HTML"
>

<
labelf
or="
html
">HTML<
/label
><br
>

<
inputt
ype="
radi
o"i
d="
css
"name="
fav_l
anguage"val
ue="
CSS"
>

<
labelf
or="
css
">CSS<
/label
><br
>

<
inputt
ype="
radi
o"i
d="
javas
cri
pt"name="
fav_l
anguage"val
ue="
JavaSc
ript
">

<
labelf
or="
javas
cri
pt"
>JavaSc
ript
</l
abel
>

<
/for
m>

<
/body>

15
<
/ht
ml>

 Chec
kboxes

The<
inputt
ype="
chec
kbox"
>def
inesac
hec
kbox.

Chec
kboxesl
etaus
ers
elec
tZEROorMOREopt
ionsofal
imi
tednumberof
c
hoi
ces
.

Exampl
e

Af
ormwi
thc
hec
kboxes
:

<
!DOCTYPEht
ml>

<
html
>

<
body>

<
h2>
Chec
kboxes
</h2>

<
p>The<
str
ong>
inputt
ype="
chec
kbox"
</s
trong>def
inesac
hec
kbox:
</p>

<
for
mac
tion="
/ac
tion_page.
php"
>

<
inputt
ype="
chec
kbox"i
d="
vehi
cle1"name="
vehi
cle1"val
ue="
Bike"
>

<
labelf
or="
vehi
cle1"
>Ihaveabi
ke<
/label
><br
>

<
inputt
ype="
chec
kbox"i
d="
vehi
cle2"name="
vehi
cle2"val
ue="
Car
">

<
labelf
or="
vehi
cle2"
>Ihaveac
ar<
/label
><br
>

<
inputt
ype="
chec
kbox"i
d="
vehi
cle3"name="
vehi
cle3"val
ue="
Boat
">

<
labelf
or="
vehi
cle3"
>Ihaveaboat
</l
abel
><br
><br
>

<
inputt
ype="
submi
t"val
ue="
Submi
t">

<
/for
m>

16
<
/body
>

<
/ht
ml>

 Submi
tBut
ton

The<
inputt
ype="
submi
t">def
inesabut
tonf
ors
ubmi
tti
ngt
hef
orm dat
atoa
f
orm-
handl
er.

Thef
orm-
handl
eri
stypi
cal
lyaf
il
eont
hes
erverwi
thas
cri
ptf
orpr
oces
sing
i
nputdat
a.

Thef
orm-
handl
eri
sspec
ifi
edi
nthef
orm'
sac
tionat
tri
but
e.

Exampl
e

Af
ormwi
thas
ubmi
tbut
ton:

<
!DOCTYPEht
ml>

<
html
>

<
body>

<
h2>
HTMLFor
ms<
/h2>

<
for
mac
tion="
/ac
tion_page.
php"
>

<
labelf
or="
fname"
>Fi
rstname:
</l
abel
><br
>

<
inputt
ype="
tex
t"i
d="
fname"name="
fname"val
ue="
John"
><br
>

<
labelf
or="
lname"
>Las
tname:
</l
abel
><br
>

<
inputt
ype="
tex
t"i
d="
lname"name="
lname"val
ue="
Doe"
><br
><br
>

<
inputt
ype="
submi
t"val
ue="
Submi
t">

<
/for
m>

<
p>I
fyouc
lic
kthe"
Submi
t"but
ton,
thef
orm-
dat
awi
llbes
entt
oapagec
all
ed
"
/ac
tion_page.
php"
.</
p>

17
 <
/body
>

<
/ht
ml>

 HTMLDi
vEl
ement

The<
div>el
ementi
sus
edasac
ont
ainerf
orot
herHTMLel
ement
s.

The<
div>el
ementi
sbydef
aul
tabl
ockel
ement
,meani
ngt
hati
ttakesal
l
avai
labl
ewi
dth,
andc
omeswi
thl
inebr
eaksbef
oreandaf
ter
.

Exampl
e

A<
div>el
ementt
akesupal
lavai
labl
ewi
dth:

<
!DOCTYPEht
ml>

<
html
>

<
styl
e>

di
v{bac
kgr
ound-
col
or:#FFF4A3;
}

<
/st
yle>

<
body>

<
h1>
HTMLDI
VExampl
e</
h1>

Lor
emI
psum<
div>
Iamadi
v</
div>dol
ors
itamet
.

<
p>The yel
low bac
kgr
ound i
sadded t
o demons
trat
ethe f
oot
pri
ntoft
he DI
V
el
ement
.</
p>

<
/body>

<
/ht
ml>

Ex
ampl
e2

18
<
!DOCTYPEht
ml>

<
html
>

<
styl
e>

di
v{bac
kgr
ound-
col
or:#FFF4A3;
}

<
/st
yle>

<
body>

<
h1>
HTMLDI
VExampl
e</
h1>

<
div>

<
h2>
London<
/h2>

<
p>Londoni
sthec
api
talc
ityofEngl
and.
</p>

<
p>Londonhasover13mi
ll
ioni
nhabi
tant
s.<
/p>

<
/di
v>

<
p>The yel
low bac
kgr
ound i
sadded t
o demons
trat
ethe f
oot
pri
ntoft
he DI
V
el
ement
.</
p>

<
/body>

<
/ht
ml>

 Cent
eral
igna<
div>el
ement

I
fyouhavea<
div>el
ementt
hati
snot100% wi
de,andyouwantt
ocent
er-
al
igni
t,s
ett
heCSSmar
ginpr
oper
tyt
oaut
o.

<
styl
e>
di
v{wi
dth:
300px;mar
gin:
aut
o;}
<
/st
yle>

 Mul
ti
ple<
div>el
ement
s

19
 Youc
anhavemany<
div>c
ont
ainer
sont
hes
amepage.

 Al
igni
ng<
div>el
ement
ssi
debys
ide

Whenbui
ldi
ngwebpages
,youof
tenwantt
ohavet
woormor
e<di
v>el
ement
s
s
idebys
ide,
liket
his
:

Ther
ear
edi
ff
erentmet
hodsf
oral
igni
ngel
ement
ssi
debys
ide,al
linc
lude
s
omeCSSs
tyl
ing.
Wewi
lll
ookatt
hemos
tcommonmet
hods
:

Fl
oat
:TheCSSf
loatpr
oper
tyi
sus
edf
orpos
iti
oni
ngandf
ormat
tingc
ont
ent
andal
lowel
ement
sfl
oatnextt
oeac
hot
heri
nst
eadofont
opofeac
hot
her
.

I
nli
ne-
bloc
k:I
fyouc
hanget
he<
div>el
ement
'sdi
spl
aypr
oper
tyf
rom bl
ockt
o
i
nli
ne-
bloc
k,t
he<
div>el
ement
swi
llnol
ongeraddal
inebr
eakbef
oreand
af
ter
,andwi
llbedi
spl
ayeds
idebys
idei
nst
eadofont
opofeac
hot
her
.

Fl
ex:TheCSSFl
exboxLayoutModul
ewasi
ntr
oduc
edt
omakei
teas
iert
o
des
ignf
lexi
bler
espons
ivel
ayouts
truc
tur
ewi
thoutus
ingf
loatorpos
iti
oni
ng.

To make t
he CSS f
lex met
hod wor
k,s
urr
ound t
he<
div>el
ement
s wi
th
anot
her<
div>el
ementandgi
vei
tthes
tat
usasaf
lexc
ont
ainer
.

Gr
id:TheCSSGr
idLay
outModul
eof
fer
sagr
id-
bas
edl
ayouts
yst
em,wi
th
r
owsandc
olumns
,maki
ngi
teas
iert
odes
ignwebpageswi
thouthavi
ngt
ous
e
f
loat
sandpos
iti
oni
ng.

Soundsal
mos
tthes
ameasf
lex,buthast
heabi
li
tyt
odef
inemor
ethanone
r
owandpos
iti
oneac
hrowi
ndi
vidual
ly.

TheCSSgr
idmet
hodr
equi
rest
hatyous
urr
oundt
he<
div>el
ement
swi
th
anot
her<
div>el
ementandgi
vet
hes
tat
usasagr
idc
ont
ainer
,andyoumus
t
s
pec
ifyt
hewi
dthofeac
hcol
umn.

 HTML<
fiel
dset
>and<
legend>
Tag

The<
fiel
dset
>tagi
sus
edt
ogr
oupr
elat
edel
ement
sinaf
orm.

20
 The<
fiel
dset
>tagdr
awsaboxar
oundt
her
elat
edel
ement
s.

Exampl
e

Us
eCSSt
ost
yle<
fiel
dset
>and<
legend>
:

<
!DOCTYPEht
ml>

<
html
>

<
head>

<
styl
e>

f
iel
dset{bac
kgr
ound-
col
or:#eeeeee;
}

l
egend{bac
kgr
ound-
col
or:gr
ay;c
olor
:whi
te;paddi
ng:5px10px;
}

i
nput{mar
gin:5px;
}

<
/st
yle>

<
/head>

<
body>

<
h1>
Thef
iel
dsetel
ement+CSS<
/h1>

<
for
mac
tion="
/ac
tion_page.
php"
>

<
fiel
dset
>

<
legend>
Per
sonal
-i
nfo:
</l
egend>

<
labelf
or="
fname"
>Fi
rstname:
</l
abel
>

<
inputt
ype="
text
"id="
fname"name="
fname"
><br
><br
>

<
labelf
or="
lname"
>Las
tname:
</l
abel
>

<
inputt
ype="
text
"id="
lname"name="
lname"
><br
><br
>

<
labelf
or="
emai
l"
>Emai
l:
</l
abel
>

21
<
inputt
ype="
emai
l"i
d="
emai
l"name="
emai
l"
><br
><br
>

<
labelf
or="
bir
thday"
>Bi
rthday:
</l
abel
>

<
inputt
ype="
dat
e"i
d="
bir
thday"name="
bir
thday"
><br
><br
>

<
inputt
ype="
submi
t"val
ue="
Submi
t">

<
/fi
elds
et>

<
/for
m>

<
/body>

<
/ht
ml>

Out
put
:

 CSS–Text

At
extr
efer
stoapi
eceofwr
itt
enorpr
int
edi
nfor
mat
ioni
nthef
orm ofwor
dsor
c
har
act
erst
hatc
anber
eadandunder
stood.
Text
scani
ncl
udec
ont
ents
uchasbooks
,

22
ar
tic
les
,emai
ls,
mes
sages
,webpages
,et
c.

 TextCol
or

Al
ter
ingt
hec
oloroft
het
extc
anaddvi
suali
nter
estoral
ignwi
thas
pec
ifi
cdes
ign
s
cheme.

TheCSSc
olorpr
oper
tyi
sus
edt
osett
hec
oloroft
het
ext
.Thepos
sibl
eval
uesf
ort
his
pr
oper
tyar
easf
oll
ows
:

 TextAl
ignment

Thepos
iti
onorpl
acementoft
extonapagei
scal
ledi
tsal
ignment
.Thet
exti
s
al
ignedbas
edont
hel
eftandr
ightmar
ginsoft
hepage.

 l
eft
:Al
ignedwi
tht
hel
eft
-mar
gin.

 r
ight
:Al
ignedwi
tht
her
ight
-mar
gin.

 c
ent
er:Al
ignedatt
hec
ent
eroft
hepage.

 j
ust
if
y:Al
ignedwi
thbot
hthemar
gins
.

 j
ust
if
y-al
l:Sameasj
ust
if
y,maki
ngt
hel
astl
inej
ust
if
iedaswel
l.

 TextDi
rec
tion

Tex
tdi
rec
tionr
efer
stot
heor
ient
ati
onoft
extc
har
act
erswi
thi
nadoc
umentor
el
ement
.Itdet
ermi
neswhet
hert
exts
houl
dbedi
spl
ayedf
rom l
eftt
ori
ght(
LTR)or
r
ightt
olef
t(RTL)bas
edont
hewr
iti
ngs
yst
emus
ed.

 TextDec
orat
ion

TheCSSt
ext
-dec
orat
ionpr
oper
tyhel
psi
naddi
ngext
radec
orat
iont
othet
ext
,suc
h
as
,addi
ngal
ine(
under
li
ne,
str
iket
hrough,
over
li
ne)andc
olor
,st
yleandt
hic
knes
sto
t
hel
ine.

 t
ext
-dec
orat
ion-
li
ne: Set
s t
he t
ype of dec
orat
ion l
ine (
under
li
ne,
s
tri
ket
hroughorover
li
ne)
.

23
  t
ext
-dec
orat
ion-
col
or:Set
sthec
olort
othet
extdec
orat
ion.

 t
ext
-dec
orat
ion-
styl
e:Set
sthes
tyl
etot
het
extdec
orat
ion(
dot
ted,das
hed,
s
oli
d,wavy,
doubl
e,et
c.)

 t
ext
-dec
orat
ion-
thi
cknes
s:Set
sthet
hic
knes
stot
het
extdec
orat
ion.

 TextEmphas
is

CSSpr
ovi
desapr
oper
tyt
oappl
yemphas
ismar
ksonabl
ockoft
extus
ingt
he
pr
oper
tyt
ext
-emphas
is.Thes
emar
ksar
etypi
cal
lyus
edt
ohi
ghl
ights
pec
ifi
ccont
ent
ort
oindi
cat
epr
onunc
iat
ionors
tres
sinc
ert
ainl
anguages
.

I
tal
lowst
hedes
ignert
oappl
yemphas
ist
oindi
vidualc
har
act
ersorphr
asewi
thi
na
bl
ockoft
ext
.

I
tisas
hor
thandf
ort
ext
-emphas
is-
styl
eandt
ext
-emphas
is-
col
or.

 TextI
ndent
ati
on

I
ndent
ati
oni
sthes
pac
ebet
weent
hemar
ginandt
hef
irs
tli
neoft
ext
.Pr
oper
i
ndent
ati
onenhanc
est
her
eadabi
li
tyandc
lar
ityoft
extonapage.

CSSal
sopr
ovi
desapr
oper
tyt
osett
het
exti
ndent
ati
onandt
hati
stext
-indent
.The
f
oll
owi
ngval
uesc
anbepas
sedt
othi
spr
oper
ty:

 l
engt
h:Anys
pec
ifi
clengt
h{pi
xel
s(px)
,poi
nts(
pt)
,ems(
em)
,et
c}.Def
aul
t
val
uei
s0.

 per
cent
age(
%):Theval
uepas
sedi
sinr
elat
iont
otheper
cent
ageoft
he
wi
dthoft
hepar
entel
ement
.

 eac
h-l
ine:Af
fec
tst
hef
ir
stl
ineofabl
ockoft
extal
ongwi
theac
hli
neaf
tera
f
orc
edl
inebr
eak.

 hangi
ng:I
ndent
ati
oni
sinver
ted,
exc
eptf
ort
hef
irs
tli
ne.

 i
nit
ial
:Set
sthet
ext
-indentt
oit
sdef
aul
tval
ue.

24
  i
nher
it:Al
lowst
oinher
itt
het
ext
-indentval
uef
romi
tspar
entel
ement
.

 TextLet
terSpac
ing

TheCSSpr
oper
tyl
ett
er-
spac
ingi
sus
edt
oadj
ustt
hes
pac
ebet
weent
hel
ett
ersofa
t
ext
.

Fol
lowi
ngar
ethepos
sibl
eval
uest
hatt
hispr
oper
tyc
anhave:

 nor
mal
:Def
aul
tval
ue and r
epr
esent
sthe nor
malamountofs
pac
e
bet
weenl
ett
ers
.

 l
engt
h:Any s
pec
ifi
clengt
h{pi
xel
s(px)
,poi
nts(
pt)
,ems (
em)
,or
per
cent
ages(
%)}
.

 i
nit
ial
:Set
sthel
ett
er-
spac
ingt
oit
sdef
aul
tval
ue.

 i
nher
it:Al
lowst
oinher
itt
hel
ett
er-
spac
ingval
uef
romi
tspar
entel
ement
.

 TextWor
dSpac
ing

CSSpr
ovi
despr
oper
tyt
oadj
ustt
hes
pac
ingbet
weent
hewor
dsi
napi
eceoft
ext
,jus
t
l
ikel
ett
ers
pac
ing.
Thepr
oper
tyt
oadj
ustt
hes
pac
ebet
weenwor
dsi
swor
d-s
pac
ing.

Thi
spr
oper
tyc
ant
akeanyoft
hef
oll
owi
ngval
ues
:

 nor
mal
:Def
aul
tval
ueandr
epr
esent
sthenor
malamountofs
pac
ebet
ween
wor
ds.

 l
engt
h:Anys
pec
ifi
clengt
h{pi
xel
s(px)
,poi
nts(
pt)
,ems(
em)
,orper
cent
ages
(
%)}
.

 i
nit
ial
:Set
sthewor
d-s
pac
ingt
oit
sdef
aul
tval
ue.

 i
nher
it:Al
lowst
oinher
itt
hewor
d-s
pac
ingval
uef
romi
tspar
entel
ement
.

 TextShadow

Thet
ext
-shadow pr
oper
tyi
sus
edt
oaddas
hadow ef
fec
ttot
ext
.Ital
lowsyout
o
s
pec
ifyt
hec
olor
,of
fset
,bl
ur-
radi
us,ands
pread-
radi
usoft
hes
hadow.Fol
lowi
ngi
s

25
t
hes
ynt
axoft
ext
-shadow:

/
*of
fset
-x|
off
set
-y|
blur
-radi
us|
col
or*/

t
ext
-shadow:1px1px2pxbl
ack;

 TextLi
neBr
eak

CSSpr
ovi
despr
oper
tyl
ine-
breakt
hati
sus
efuli
ndet
ermi
ninghowt
obr
eakl
inesi
na
bl
ockoft
ext
.

 TextWor
dBr
eak

TheCSSwor
d-br
eakpr
oper
tyi
nCSSi
sus
edt
ospec
ifyhowwor
dss
houl
dbebr
oken
orwr
appedi
ncas
etheyexc
eedt
heavai
labl
ewi
dthofanel
ement
.

 I
mages

I
magespl
ayani
mpor
tantr
olei
nanywebpage.Thoughi
tisnotr
ecommendedt
o
i
ncl
udeal
otofi
mages
,buti
tiss
til
limpor
tantt
ous
egoodi
mageswher
everr
equi
red.

CSSpl
aysagoodr
olet
ocont
roli
magedi
spl
ay.Youc
ans
ett
hef
oll
owi
ngi
mage
pr
oper
tiesus
ingCSS.

Thebor
derpr
oper
tyi
sus
edt
osett
hewi
dthofani
magebor
der
.

Thehei
ghtpr
oper
tyi
sus
edt
osett
hehei
ghtofani
mage.

Thewi
dthpr
oper
tyi
sus
edt
osett
hewi
dthofani
mage.

The-
moz
-opac
itypr
oper
tyi
sus
edt
osett
heopac
ityofani
mage.

 Li
nks

I
nwebdevel
opment
,a"
li
nk"gener
all
yref
erst
oanHTMLel
ementt
hatal
lowst
he
us
ert
onavi
gat
efr
om onewebpaget
oanot
herort
oanot
herr
esour
ce,s
uchasa
s
tyl
esheet
,ani
mage,oras
cri
pt.TheHTML<
a>(
anc
hor
)el
ementi
sthemos
t
c
ommonwayt
ocr
eat
eli
nks
.

The:
li
nks
igni
fi
esunvi
si
tedhyper
li
nks
.

26
The:
vis
iteds
igni
fi
esvi
si
tedhy
per
li
nks
.

The:
hovers
igni
fi
esanel
ementt
hatc
urr
ent
lyhast
heus
er'
smous
epoi
nterhover
ing
overi
t.

The:
act
ives
igni
fi
esanel
ementonwhi
cht
heus
eri
scur
rent
lyc
lic
king.

Us
ual
ly,
allt
hes
epr
oper
tiesar
ekepti
ntheheaderpar
toft
heHTMLdoc
ument
.

Remembera:
hoverMUSTc
omeaf
tera:
li
nkanda:
vis
itedi
ntheCSSdef
ini
ti
oni
n
or
dert
obeef
fec
tive.
Als
o,a:
act
iveMUSTc
omeaf
tera:
hover

 Tabl
es

At
abl
eisanHTMLel
ementus
edt
odi
spl
aydat
ainas
truc
tur
edf
ormatwi
thr
owsand
c
olumns
.Iti
scr
eat
edus
ingt
he<
tabl
e>t
agi
nHTMLandc
anbes
tyl
edus
ingCSS
pr
oper
ties
.

Fol
lowi
ngi
sas
impl
eHTMLt
abl
ewhi
chhasbeens
tyl
edus
ingCSS:

<
html
>
<
head>
<
styl
e>
t
abl
e{f
ont
-fami
ly:Ar
ial
,Hel
vet
ica,s
ans
-ser
if;
bor
der
-col
laps
e:c
oll
aps
e;wi
dth:
100%;
}
t
d,t
h{bor
der
:1pxs
oli
d#ddd;paddi
ng:8px;
}
t
r:nt
h-c
hil
d(even)
{bac
kgr
ound-
col
or:#f
2f2f
2;}
t
r:hover{
bac
kgr
ound-
col
or:#ddd;
}
t
h{paddi
ng-
top:12px;paddi
ng-
bot
tom:12px
;text
-al
ign:l
eft
;bac
kgr
ound-
col
or:
#40a944;c
olor
:whi
te;
<
/st
yle>
<
/head>
<
body>
<
h1>
CSSSt
yledTabl
e</
h1>
<
tabl
e>

27
<
tr>
<
th>
Name<
/th>
<
th>
Addr
ess
</t
h>
<
th>
Count
ry<
/th>
<
/tr
>
<
tr>
<
td>
NuhaAl
i<
/td>
<
td>
MyHomeBhooj
a</
td>
<
td>
Indi
a</
td>
<
/tr
>
<
tr>
<
td>
Zar
aAl
i<
/td>
<
td>
Student
sRoos
ter
s</
td>
<
td>
Engl
and<
/td>
<
/tr
>
<
/tabl
e>
<
/body>
<
/ht
ml>

 Pr
oper
tiesofaTabl
e

Youc
ans
ett
hef
oll
owi
ngCSSpr
oper
tiesofat
abl
e

Thebor
der
-col
laps
espec
ifi
es whet
her t
he br
ows
er s
houl
d c
ont
rol t
he
appear
anc
eoft
headj
acentbor
der
sthatt
ouc
heac
hot
herorwhet
hereac
hcel
l
s
houl
dmai
ntai
nit
sst
yle.

Thebor
der
-spac
ings
pec
ifi
est
hewi
dtht
hats
houl
dappearbet
weent
abl
ecel
ls.

Thec
apt
ion-
sides
pec
ifi
eswher
ethet
abl
ecapt
ions
houl
dbedi
spl
ayed(
topor
bot
tom)
.

Theempt
y-c
ell
sspec
ifi
eswhet
hert
hebor
ders
houl
dbes
howni
fac
elli
sempt
y.

28
 Thet
abl
e-l
ayoutal
lowsbr
ows
erst
ospeedupl
ayoutofat
abl
ebyus
ingt
hef
irs
t
wi
dthpr
oper
tiesi
tcomesac
ros
sfort
her
estofac
olumnr
athert
hanhavi
ngt
o
l
oadt
hewhol
etabl
ebef
orer
ender
ingi
t.

Thewi
dthandhei
ghtpr
oper
tiess
ett
hehei
ghtandwi
dthofat
abl
e.

Thet
ext
-al
ignpr
oper
tys
etst
hehor
izont
alal
ignmentoft
het
extc
ont
entwi
thi
n
t
abl
ecel
ls.

Thebor
derpr
oper
tyc
anbeus
edt
osetbor
dert
otabl
eandi
tsc
ell
s.

Thebac
kgr
ound-
col
orpr
oper
tyc
anbeappl
iedt
othet
abl
eit
sel
f,t
het
abl
ecel
ls,
ort
abl
erows
.

Thef
ont
-si
ze,
font
-fami
ly,
font
-wei
ght
,font
-col
oret
cst
ylet
het
abl
efont
.

Col
laps
eTabl
eBor
derus
ingCSS

Thepr
oper
tybor
der
-col
laps
eens
urest
hatbor
der
sbet
weent
abl
ecel
lsc
oll
aps
eint
o
as
ingl
e bor
der
,cr
eat
ing a c
leaner l
ook.Pr
oper
tybor
der
-col
laps
ecan have
val
uesc
oll
aps
eors
epar
ate(
def
aul
t).

 Bor
der
s

Thebor
derofanHTMLel
ementi
ssi
mpl
yoneormor
eli
nest
hats
urr
oundt
he
c
ont
entandpaddi
ngofanel
ement
.Ever
ybor
derhast
hreeas
pec
ts:i
tswi
dth,or
t
hic
knes
s;i
tss
tyl
e,orappear
anc
e;andi
tsc
olor
.

The CSSbor
derpr
oper
ties al
low you t
ospec
ify how t
he bor
der oft
he box
r
epr
esent
inganel
ements
houl
dlook.
Ther
ear
ethr
eepr
oper
tiesofabor
der

bor
der
-st
yle-Spec
ifi
eswhet
herabor
ders
houl
dbes
oli
d,das
hedl
ine,
doubl
eli
ne,
or
oneoft
heot
herpos
sibl
eval
ues
.

bor
der
-col
or-Spec
ifi
est
hec
olorofabor
der
.Thedef
aul
tval
uei
sthef
oregr
ound
c
oloroft
heel
ementandi
fel
ementi
sbl
ank,
thenc
oloroft
hepar
entel
ement

bor
der
-wi
dth-Spec
ifi
est
hewi
dthofabor
der
.Thedef
aul
tval
uei
smedi
um.

29
Exampl
e:

<
pst
yle="
bor
der
-st
yle:none;
">Nobor
der
.</
p>

<
pst
yle="
bor
der
-st
yle:hi
dden;
">Hi
ddenbor
der
.</
p>

<
pst
yle="
bor
der
-st
yle:dot
ted;
">Dot
tedbor
der
.</
p>

 RoundedBor
der
s

Wec
anus
ebor
der
-radi
uspr
oper
tyt
oaddr
oundedbor
der
stoanel
ement
.

Synt
ax

P{ bor
der
:2pxs
oli
d#40a944;bor
der
-radi
us:5px;
}

 Mar
gins

Themar
ginpr
oper
tyi
sus
edt
osett
hemar
gins
pac
ear
oundanel
ement
.Mar
ginsar
e
t
hes
pac
eout
sidet
hebor
derofanel
ement
.Themar
ginpr
oper
tyc
anbes
etf
or
i
ndi
viduals
ides(
top,r
ight
,bot
tom,l
eft
)orasas
hor
thandpr
oper
tyf
oral
lsi
desat
onc
e.

 Mar
gins-Si
ngl
e-Si
dePr
oper
ties

CSSpr
ovi
desf
ours
epar
atepr
oper
tiest
osetmar
ginsf
orl
eft
,ri
ght
,topandbot
tom
f
oranel
ement
.

mar
gin-
bot
tom,
mar
gin-
top,
mar
gin-
lef
tandmar
gin-
right

Fol
lowi
ngexampl
edemons
trat
eshow wec
an s
etdi
ff
erentmar
ginsar
oundh1
el
ement
s:

h1 {
mar
gin-
top:20px;mar
gin-
right
:40px;mar
gin-
bot
tom:
10px;
mar
gin-
lef
t:0px;
bac
kgr
ound-
col
or:#eee;
}

 Mar
gins-SetThr
eeVal
ues

Wec
ans
etmar
ginatt
hreeval
uesasmar
gin:20px40px10px,
int
hisc
aset
opmar
gin
wi
llbe20px,r
ightandl
eftmar
ginswi
llbe40pxandbot
tom mar
ginwi
llbe10px.

30
Fol
lowi
ngi
stheexampl
e.Yous
houl
dtr
ytoc
ompar
etheout
putwi
thpr
evi
ous
exampl
e:

h1{
mar
gin:20px40px10px;bac
kgr
ound-
col
or:#eee;
}

 Mar
gins-SetTwoVal
ues
:

Wec
ans
etmar
ginatt
woval
uesasmar
gin:20px40px,i
nthi
scas
etopandbot
tom
mar
ginswi
llbe20px,
rightandl
eftmar
ginswi
llbe40px.

h1{
mar
gin:20px40px;bac
kgr
ound-
col
or:#eee;
}

Wehaves
eent
hats
ett
ingas
ingl
eval
uef
ormar
gin,
appl
iesmar
ginequal
lyt
oal
lthe
s
ides-t
op,r
ight
,bot
tom andl
eft
.Youc
anc
hec
kver
yfi
rstexampl
etounder
stand
t
hisc
ase.

 Mar
gins-Mi
xupUni
ts

CSSal
lowst
omi
xupt
het
ypesofl
engt
hval
ueyouus
ewhi
les
pec
ifyi
ngdi
ff
erent
mar
ginsi
nas
hor
thandpr
oper
ty.

 CSSNegat
iveMar
gins

CSSal
lowst
ospec
ifynegat
ivemar
ginsf
oranel
ement
.Thi
swi
llc
aus
etheel
ement
’s
boxt
ost
ickoutofi
tspar
entort
oover
lapot
herel
ement
s.

 Mar
gins-Per
cent
ages

I
tisver
ymuc
hpos
sibl
etos
etper
cent
ageval
uesf
ort
hemar
ginsofanel
ement
.
Per
cent
agemar
ginsval
uesar
ecomput
edi
nrel
ati
ont
othewi
dthoft
hepar
ent
el
ement
’sc
ont
entar
ea,
sot
heyc
anc
hangei
fthepar
entel
ement
’swi
dthc
hanges
.

 Mar
gins-I
nli
neEl
ement
s

Mar
ginsc
anal
sobeappl
iedt
oinl
ineel
ement
sbutt
opandbot
tommar
ginsdo
nothaveanyef
fec
tont
hel
inehei
ghtoft
hes
enonr
epl
acedel
ement
sand
t
hes
emar
ginsar
eal
way
str
ans
par
ent
.

 Mar
gins-Aut
oVal
ue

31
I
nor
dert
ocent
eranel
ementi
nsi
dei
tspar
ent
,us
emar
gin:0aut
oass
howni
nthe
f
oll
owi
ngexampl
e:

<
styl
e>

di
v{wi
dth:
600px;bor
der
:1pxdot
ted;
}

h1{
mar
gin:
0aut
o;}

<
/st
yle>

 Li
sts

Li
stsar
eus
efulast
heypr
esentt
hei
nfor
mat
ioni
nas
truc
tur
edandor
gani
zed
manner
.Li
stsi
mpr
ovet
her
eadabi
li
tyandc
ompr
ehens
ionofc
ont
entonawebpage.
So,
ift
hec
ont
enti
sli
sted,
iti
seas
ytof
oll
ow.

Li
stsar
ecommonl
yus
edt
odi
spl
ayi
tems
,st
eps
,opt
ions
,oranyot
hert
ypeofr
elat
ed
i
nfor
mat
iont
hats
houl
dbepr
esent
eds
equent
ial
lyori
nagr
oup.

 Or
der
edLi
st

Or
der
edl
ist
sar
eus
edwhent
hei
temsneedt
obepr
esent
edi
nas
pec
ifi
cor
der
mar
kedwi
thnumber
sorl
ett
ers
.Fol
lowi
ngi
sthes
ynt
axt
ocr
eat
eHTMLor
der
edl
ist
s:

<
ol>

<
li
>Fi
rst
</l
i>

<
li
>Sec
ond<
/li
>

<
li
>Thi
rd<
/li
>

<
/ol
>

 Unor
der
edLi
st

Unor
der
edl
ist
sar
eus
edwhent
hei
temsneedt
obepr
esent
edi
nas
pec
ifi
cor
der
mar
kedwi
ths
impl
ebul
let
s.

32
  CSSLi
sts-Pr
oper
ties

CSSpr
ovi
desas
etofpr
oper
tiest
hatc
anbeappl
iedt
oanyl
ist
,whi
char
easf
oll
ows
:

Thel
ist
-st
yle-
typeal
lowsyout
ocont
rolt
hes
hapeorappear
anc
eoft
hel
istmar
ker
s
(
bul
letpoi
nts
).

Thel
ist
-st
yle-
pos
iti
onal
lowst
ospec
ifyt
hepos
iti
onoft
hel
ist
-it
emmar
ker
s.

Thel
ist
-st
yle-
images
pec
ifi
esani
magef
ort
hemar
kerr
athert
hanabul
letpoi
ntor
number
.

Thel
ist
-st
yles
ervesass
hor
thandpr
oper
tyf
ort
omanaget
hemar
ker
s.

CSSLi
sts-Mar
kerTypes

CSSal
lowsyout
ocont
rolt
hes
hapeoft
hel
istmar
ker
s(bul
letpoi
nts
).Thef
oll
owi
ng
exampl
eshowshow CSS pr
oper
tyl
ist
-st
yle-
types
etsdi
ff
erentmar
ker
sfort
he
or
der
edandunor
der
edl
ist
s.Thes
amepr
oper
tyc
anbeus
edf
orbot
hor
der
edand
unor
der
edl
ist
s.

Youc
anc
hec
kCSSpr
oper
tyl
ist
-st
yle-
typedet
ailt
ochec
kal
lthepos
sibl
emar
ker
's
t
ypesf
ort
hel
ist
s.

 CSSLi
sts-I
mageMar
ker

You mi
ghtpr
efert
o us
ean i
mageasan i
tem l
istmar
ker
.TheCSSl
ist
-st
yle-
i
magepr
oper
tyc
anbeus
edt
otos
pec
ifyani
mageasani
teml
istmar
ker
.

Youc
anus
eyourownbul
lets
tyl
e.I
fnoi
magei
sfound,t
hendef
aul
tbul
let
sar
e
pr
int
ed.
Fol
lowi
ngi
sanexampl
etos
howt
heus
ageofl
ist
-st
yle-
imagepr
oper
ty.

ul{
li
st-
styl
e-i
mage:ur
l('
/i
mages
/ic
on-
bul
let
.png'
);
}

 CSSLi
sts-Mar
kerPos
iti
on

TheCSSl
ist
-st
yle-
pos
iti
onpr
oper
tyi
ndi
cat
eswhet
hert
hemar
kers
houl
dappear
i
nsi
deorout
sideoft
heboxc
ont
aini
ngt
hebul
letpoi
nts
.Itc
anhaveoneoft
he
f
oll
owi
ngval
ues−

33
none-Nomar
keri
sdi
spl
ayed,andt
hel
isti
temsar
ewi
thoutanybul
letpoi
ntsor
number
s.

I
nsi
de-Themar
keri
spos
iti
onedi
nsi
det
hec
ont
entf
low,meani
ngi
tappear
swi
thi
n
t
hec
ont
entboxoft
hel
isti
tem.

Out
side-Thedef
aul
tval
ue.Themar
keri
spos
iti
onedout
sidet
hec
ont
entf
low,
appear
ingt
othel
eftoft
hec
ont
entboxoft
hel
isti
tem.

I
nher
it-i
sus
edt
oinher
itt
hel
ist
-st
yle-
pos
iti
onval
uef
romi
tspar
entel
ement
.

Fol
lowi
ngi
sanexampl
etos
howt
heus
ageofl
ist
-st
yle-
pos
iti
onpr
oper
ty.

<
styl
e>

ul
.a{
li
st-
styl
e-pos
iti
on:out
side;
}

ul
.b{
li
st-
styl
e-pos
iti
on:i
nsi
de;
}

<
/st
yle>

 Li
sts-Cont
rol
ledCount
ing

Somet
imewemi
ghtwantt
ocountdi
ff
erent
lyonanor
der
edl
ist— e.
g.,s
tar
ting
f
rom anumberot
hert
han1,orc
ount
ingbac
kwar
ds,orc
ount
ingi
nst
epsofmor
e
t
han1.

Ther
e ar
efol
lowi
ng t
hree CSS at
tri
but
es whi
ch hel
ps i
ncont
rol
li
ng t
he l
ist
number
ing.

<
star
t>-al
lowsyout
ost
artt
hel
istc
ount
ingf
romanumberot
hert
han1.

<
rever
sed>-s
tar
tst
hel
istc
ount
ingr
ever
seordowni
nst
eadofup.

Ex
ampl
e:

<
html
>
<
body>
<
h2>
CSSLi
sts-Cont
rol
ledCount
ing<
/h2>

34
<
h3>
star
tat
tri
but
e</
h3>
<
ols
tar
t="
4">
<
li
>Java.
</l
i>
<
li
>HTML.
</l
i>
<
li
>CSS.
</l
i>
<
li
>Reac
t.<
/li
>
<
/ol
>
<
h3>
rever
seat
tri
but
e</
h3>
<
olr
ever
sed>
<
li
>Java.
</l
i>
<
li
>HTML.
</l
i>
<
li
>CSS.
</l
i>
<
li
>Reac
t.<
/li
>
<
/ol
>
<
/body>
<
/ht
ml>

 Li
sts-Col
ors

Wec
anmakel
ist
slookmor
est
yli
shandc
olor
fulus
ingCSSs
tyl
ingasdemons
trat
ed
i
nthef
oll
owi
ngexampl
e.Aswes
eeanys
tyl
ingaddedt
othe<
ul>or<
ol>t
agwi
ll
af
fec
ttheent
irel
ist
,wher
east
headdi
ti
ont
othei
ndi
vidual<
li
>tagwi
llaf
fec
tonl
y
t
hei
temsoft
hec
orr
espondi
ngl
ist
.

Ex
ampl
e:

ull
i{bac
kgr
ound:ol
ive;c
olor
:whi
te;paddi
ng:
10px;f
ont
-si
ze:
20px;mar
gin:
10px
;}

 Paddi
ngs

35
TheCSSpaddi
ngpr
oper
tyi
sus
edt
ospec
ifyt
hes
pac
ebet
weent
hec
ont
entofan
el
ementandi
tsbor
der
s.Thi
sar
tic
lewi
llt
eac
hyouCSSpaddi
ngpr
oper
tyandi
ts
c
ons
tit
uentpr
oper
ties
.

Theval
ueofCSSpaddi
ngs
houl
dbeei
theral
engt
h,aper
cent
age,
ort
hewor
dinher
it.
Apaddi
ngpr
oper
tydoesnotal
lownegat
iveval
ues
.Ift
heval
uei
sinher
it,
itwi
llhave
t
hes
amepaddi
ngasi
tspar
entel
ement
.

Ex
ampl
e:h2{
paddi
ng:5px;bac
kgr
ound-
col
or:#eee;
}

 CSSPaddi
ngs-Si
ngl
e-s
idePr
oper
ties

CSSpr
ovi
desf
ours
epar
atepr
oper
tiest
osetpaddi
ngf
ort
op,r
ight
,bot
tom,andl
eft
f
oranel
ement
.Thes
epr
oper
tiesar
e:

paddi
ng-
top,
paddi
ng-
right
,paddi
ng-
bot
tomandpaddi
ng-
lef
t

Fol
lowi
ngexampl
eshowshowdi
ff
erentpaddi
ngpr
oper
tiesc
anbes
etar
oundanh2
el
ement
.

h2{
paddi
ng-
top:20px;paddi
ng-
right
:40px;
paddi
ng-
bot
tom:
10px;paddi
ng-
lef
t:0px;

bac
kgr
ound-
col
or:#eee;

 Cur
sor

TheCSSc
urs
orpr
oper
tydet
ermi
nest
heappear
anc
eoft
hemous
ecur
sorwhen
hover
ingoveranel
ementt
owhi
cht
hispr
oper
tyi
sappl
ied.Thi
spr
oper
tyi
sonl
y
appl
icabl
einenvi
ronment
swi
thmous
eandc
urs
orf
unc
tional
it
y.I
t'
smai
npur
pos
eis
t
oimpr
oveus
abi
li
tybyvi
sual
lyr
epr
esent
ingc
ert
ainf
unc
tions
.

 Pos
sibl
eCur
sorVal
ues

Thec
urs
orpr
oper
tyc
anhavef
oll
owi
ngval
ues
:

<
url
>:(
opt
ional
)Youhavet
hef
lexi
bil
it
ytous
eas
eri
esofur
l()val
uess
epar
atedby
c
ommas
,wi
theac
hur
l()poi
nti
ngt
oani
magef
il
e.

<
x><
y>:(
opt
ional
)Youhavet
heopt
iont
ospec
ifyxandyc
oor
dinat
est
hatdef
inet
he

36
hot
spotoft
hec
urs
orands
pec
ifyt
heexac
tpos
iti
onwi
thi
nthec
urs
ori
maget
hatt
he
c
urs
orpoi
ntst
o.

<
Keywor
d>:
Akeywor
dval
uei
srequi
redt
hats
pec
ifi
esei
thert
hec
urs
ort
ypet
ous
eor
t
heal
ter
nat
ecur
sort
ous
eifnoneoft
hes
pec
ifi
eds
ymbol
scanbel
oaded.

Keywor
dBas
edCur
sorVal
ues