CSS2.

1 Quick Reference Card

1.01
Copyright, 2007-2009 Brand!atch ""C
http#$$%%%.e&p'ainth.at
Co'or key o(er'eaf
Code Structure
) cacading ty'eheet i a co''ection of one or *ore
ru'e +earing the for*
selector,property1#value-...-propertyN#value.
/he part %ithin +race contitute the dec'aration +'ock
coniting of one or *ore property pecification
eparated +y a e*ico'on.
CSS co**ent +ear the for* $0Co**ent /e&t0$.
Co**ent can pan *u'tip'e 'ine and can +e p'aced
+efore, +et%een or %ithin a ru'e.
1e the @import url(urlname) directi(e to i*port
ty'eheet. /o i*port ty'eheet fro* another 2nternet
'ocation the fu'' path to the ur' *ut +e tated.
Space are genera''y ignored. 2f re'e(ant, e.g. in font-
fa*i'y pecification, the te&t hou'd +e 3uoted.
Selector Types
Class Selectors#.name 4 app'ie to 5/6" docu*ent
e'e*ent 7HDE8 %hich ha(e the attri+ute
class=9name9.
ID Selectors:name 4 app'ie to a'' HDEs %hich ha(e
the attri+ute id=9name9.
Element Selectors#ta! 4 %here tag i a recogni:ed
5/6" e'e*ent type uch a "1# p# a etc.
Se'ector type can +e co*+ined to de'i(er (ery targeted
ty'ing effect. ;or e&a*p'e
.nameID 4 app'ie to a'' HDEs %ith the attri+ute
class=9name9 and id=9ID9.
"1.name 4 app'ie to a'' $"1% e'e*ent %ith the
attri+ute class=9name9.
"1ID 4 app'ie to a'' $"1% e'e*ent %ith the attri+ute
id=9ID9.
.name ta! 4 app'ie to a'' $ta!% e'e*ent 7.e.g. $"1%#
$a%8 inide a +'ock e'e*ent %ith attri+ute
class=9name9.
.name%ta! 4 app'ie to a'' $ta!% e'e*ent directly
o%ned +y a +'ock e'e*ent %ith the attri+ute
class=9name9. IE.
&seudo'Classes
:lin( 4 to ty'e un(iited hyper'ink, $a%.
:)isited 4 to ty'e hyper'ink that ha(e +een (iited.
:"o)er 4 to ty'e 5<= %hi'e the *oue ho(er o(er
the*. >n'y upported +y hyper'ink in IE*.
:+ocus 4 to ty'e for* e'e*ent, e.g. inputs, %hi'e they
are focued. IE.
:acti)e 4 to ty'e 5<= %hi'e they are +eing ued. e.g.
+utton ? anchor %hi'e they are +eing c'icked. IE*(,-).
:+irst'c"ild 4 app'ie to the firt chi'd of another
e'e*ent. e.g. to ty'e the firt paragraph inide a
di(iion you %ou'd define p:+irst'c"ild. IE*
:"o)er *ut +e pecified a+ter :)isited for it to ha(e an
effect.
.roupin! / Nestin!
@hen defining t%o or *ore near'y i*i'ar ru'e do thi
.rule1#.rule0...,property1#value-...-propertyN#value.
.rule0,property1#value-....
/he firt 'ine define a !roup of ru'e haring identica'
property (a'ue. @ith thi done, o(erride propertie that
differ a done a+o(e for rule0.
Descendant Nestin!# .name selector ty'e a''
e'e*ent that ue selector and are o%ned +y +'ock
e'e*ent %ith the attri+ute class=9name9.
C"ild Nestin!# .name%selector ty'e a'' e'e*ent that
ue selector and are directly o%ned +y +'ock e'e*ent
%ith the attri+ute class=9name9. IE
CSS in HT23
E4ternal CSS
A'ink re'Bty'eheet hrefB9$ty'e$creen.c9 typeB9te&t$
c9 5*ediaB9creen96C
Em7edded CSS
Aty'e typeB9te&t$c9 5*ediaB9creen96C
$0Sty'e dec'aration here0$A$ty'eC
Dood practice re3uire pro(iding ty'e for creen and
print *edia a a +are *ini*u*. 6u'tip'e *edia type
hou'd +e pecified a a co**a eparated 'it. >ther
*edia type inc'ude a'', aura', +rai''e, e*+oed,
handhe'd, print, proEection and t(.
Inline CSS
Ata! styleB9...9C %here ta! i any 'ega' 5/6" e'e*ent
tag uch a "1, p, a etc. 1e ing'e 3uote in the ty'e
aign*ent if re3uired. ;o''o% the property1#value-..
for*at decri+ed a+o(e. 1e paring'y.
3en!t" 8nits
97solute 8nits: in:c*:**:pt:pc.
p& 7!i&e'8 a defined i a re'ati(e unit +ut a ued +y
+ro%er i an a+o'ute unit.
;elati)e 8nits: e*:F. 6eaure*ent are re'ati(e to
the parent e'e*ent.
"ength, e&cept %hen 0, *ut al<ays +e fo''o%ed +y a
unit. Go pace a''o%ed +et%een the nu*+er ? the unit.
Color 8nits / Names
;;..== i, genera''y peaking, the *ot econo*ica'
%ay of pecifying co'or. e.g. HCI1IB=.
Color Names# a3ua:+'ack:+'ue:fuchia:gray:green:'i*e:
*aroon:na(y:o'i(e:purp'e:red:i'(er:tea':%hite:ye''o%
=ac(!round
>1 >1
7ac(!round'attac"ment:scroll:fixed|inherit
7ac(!round'color#transparent:$C>|inherit
background-image:none|url(<urlname>)
background-position:55<L>|left|center|right6 5<L>|
top|center|bottomJ6|55left|center|right]|| top|center|
bottom66 3 i an offet fro* top-'eft. <efau't ? ?
7ac(!round'repeat#no'repeat:repeat|repeat-x|repeat-
!|inherit
=order
>01 >01
7order'K'color:color:<">|transparent|inherit
7order'K'style:none|hidden|dotted|dashed|solid|
double|groove|ridge|inset|outset|inherit
7order'K'<idt":medium|thin|thick|<L>|inherit
? i one of le+t, top, ri!"t or 7ottom
Color
color#inherit|<">
<efau't depend on the +ro%er. )'o et +order co'or
un'e o(erridden.
Cursor
cursor:auto|default|pointer|crosshair|move|#-resi$e|
groove|text|%ait|help|progress|inherit
%here - = n|e|%|s|ne|n%|se|s%
1e to aign curor hape %hen *oue pointer enter
the HDE. @hat Lenter9 *ean i +ro%er dependent.
Dimensions
<i*enion pecification on'y *ake ene for
poitioned HDEs, i.e. HDEs %hich ha(e position et
to a (a'ue other than tatic
f'oated HDEs, i.e. HDEs %hich ha(e +loat et to left
or right& in %hich cae a <idt" *ut +e pecified.
7ottom:top:le+t:ri!"t:auto:<L>:inherit
top ? 7ottom and le+t ? ri!"t for* pair. 2f +oth are et
to auto, +oth are :ero. 2f one i et to auto, it i the
negati(e of the other. 2f +oth are aigned a 'ength and
one i not the negati(e of the other, the +ro%er *ay, at
it dicretion, ignore the etting.
<idt":"ei!"t:auto|<L>|inherit
<idt" ? "ei!"t are on'y re'e(ant for +'ock HDEs.
ma4:min'-#<L>|inherit %here - B <idt":"ei!"t. /he
ma4 propertie are 0 +y defau't. /he min propertie
ha(e no initia' (a'ue. =&ce content pi'' out of the
+'ock +y defau't. )ign o)er+lo< to a(oid thi. IE*
Display
@ @
display:none|inline|inline-block|block
<eter*ine the type of dip'ay +o& generated +y an
HDE during page 'ayout. /he defau't (a'ue i HDE
dependent $span% and $a% HDEs for intance are
inline %hi'e $di)% and $p% HDEs are block. ;'oating
an HDE et display:block'
2n'ine HDEs on'y take up a *uch hori:onta' pace a
re3uired for dip'aying their content. B'ock HDEs take
the a(ai'a+'e c'ient area of their container 4 un'e <idt"
or ma4'<idt" re3uire other%ie.
inline-block caue the HDE to +eha(e 'ike an inline
e'e*ent %hi'e ti'' uing a'' +'ock 'ike attri+ute uch a
*argin and padding. ;or co*pati+i'ity %ith ;irefo& ue
display:-mo$-inline-stack(display:inline-block
display:none hide the HDE and generate no dip'ay
+'ock for it. >ther HDEs are 'aid out a though it %ere
not there.
Aloat
+loat:none:left|right|inherit
Caue HDE to Lf'oat9 to the 'eft|right of it container if
e*pty or to the right|'eft of it pre(iou'y f'oated i+'ing if
non-e*pty. ;'oated HDEs are a'%ay +'ock. /he <idt"
property *ut +e pecified. 2f a(ai'a+'e c'ient %idth i
inufficient f'oating +egin afreh fro* the appropriate
+oundary of the container - +e'o% pre(iou'y f'oated
i+'ing.
)ign clear:none:left|right|both to force u+e3uent'y
f'oated HDEs to tart afreh fro* the appropriate
+oundary of the container 4 a ort of Lcarriage return9
directi(e.
Aont
B B
+ont'+amily:in"erit:<A>&]<A>&<.>]
font-si$e:inherit|<3>
font-famil!:inherit|italic|normal
font-%eight:inherit|normal|bold
font:inherit|55<font-st!le> :: <font-%eight>6 <font-
si$e> <font-famil!>6|caption|icon|menu|message-
box|small-caption|status-bar
3ist
> >
list'style'ima!e:none:url(urlname)|inherit
list-st!le-position:outside|inside|inherit
list-st!le-t!pe:disc|circle|s)uare|decimal|decimal-
leading-$ero|lo%er-roman|upper-roman|lo%er-greek|
lo%er-latin|inherit
2ar!in
>* >*
mar!in'K:auto:<L>|inherit
? i one of le+t, top, ri!"t or 7ottom
C)er+lo<
o)er+lo<:auto:visible|hidden|scroll|inherit
&addin!
> >
paddin!'K:<L>|inherit
? i one of le+t, top, ri!"t or 7ottom
paddin!:<L>|inherit
&osition
position:static:relative|absolute|fi&ed fi&ed|inherit
)+o'ute'y poitioned HDEs ha(e a their container the
nearet ancetor that ha a position attri+ute other than
static. 2f no uch ancetor e&it, the container i the
initia' containing +'ock 4 for a'' intent the +ro%er
%indo%.
;i&ed HDEs a'%ay ha(e the (ie%port a their
container. Got (ery uefu' unti' IE* +eco*e o+o'ete.
)+o'ute HDEs define their o%n tacking conte&t /hi
*ean that D'inde4 etting for their chi'dren are
interna' to the HDE.
CSS2.1 Quick Reference Card
1.01
Space
letter'spacin!:normal:<L>
<ord'spacin!:normal:<L>
1e negati(e (a'ue for effect uch a o(er'ap.
<"ite'space:normal:pre|pre-%rap|pre-line|inherit
Stac(in! Crder
D'inde4:auto:<*>:inherit
/he >)e :-a&i i orthogona' to the creen$paper in the
direction of the (ie%er. 1e (a'ue eparated +y 10 or
*ore to i*p'ify future page redeign.
2n the a+ence of a D'inde4 pecification, HDEs are
dip'ayed in the order of their occurrence in the
docu*ent 4 u+Eect to the D'inde4 pecification of any
a+o'ute'y poitioned container.
Te4t
te4t'ali!n:left|right|center|+ustif!
<efau't i +ro%er and 'oca'e dependent
te4t'decoration:none|5underline||overline||line-
through6
te4t'indent::<L>:inherit
2ndent firt 'ine of +'ock HDEs. 1e negati(e (a'ue to
outdent.
te4t'trans+orm:none:lo%ercase|uppercase|capitali$e|
inherit
)ertical'ali!n:baseline:sub|super|top|text-top|
middle|bottom|text-bottom|<L>|inherit
Re'ati(e <L> (a'ue refer to the line'"ei!"t of the
e'e*ent ite'f. 1e ')e <L> (a'ue for u+cripting. >)e
(a'ue are an offet fro* the 'ine top %hi'e ')e (a'ue
are an offet fro* the 'ine +otto*.
line'"ei!"t:normal:<*>|<L>|inherit
<*> B ca'ing factor. 1e <*> A 1 or <L> A 1??E to
co*pre 'ine in +'ock HDEs. <efine minimum 'ine-
height. 6a&i*u* i deter*ined +y in'ine e'e*ent, uch
a i*age.
Fisi7ility
)isi7ility:inherit:visible|hidden|collapse
hidden HDEs are not (ii+'e +ut ti'' take up pace and
affect the 'ayout of the docu*ent. collapse caue
ta+'e ro%$co'u*n to +e hidden.
Element Types
;eplaced e'e*ent are rendered +y the +ro%er uing
infor*ation not a(ai'a+'e in the docu*ent ite'f.
=&a*p'e are i*age, $im!%# and input, $inputC.
Gear'y a'' other e'e*ent are non'replaced , i.e. their
content i a(ai'a+'e in the docu*ent ite'f and i
dip'ayed in a +o& pecified +y the e'e*ent attri+ute.
=loc( e'e*ent generate a +o& that, un'e other%ie
pecified, occupie the fu'' c'ient %idth of the parent.
=&a*p'e# $di)%, $p% ? $li%. /he (ertica' *argin of
adEacent +'ock co''ape 4 i.e. on'y the +igger of the t%o
i ued. /hi doe not app'y to e'e*ent that are +'ock
+y (irtue of +eing +loated.
Inline e'e*ent generate a +o& %hich on'y conu*e
a *uch hori:onta' pace a i re3uired to dip'ay it
content. 2n'ine e'e*ent do not ue (ertica' *argin
etting. =&a*p'e# $a%, $span%, $7% etc.
=loc( e'e*ent can act a container for other
e'e*ent
='e*ent type can +e changed +y etting the display
attri+ute. inline-block 7-mo$-inline-stack8 offer a
uefu' ha'f-%ay houe +et%een block and inline.
=o4 2odel
HDEs are rendered +y +ro%er in a notiona' +o& *ade
up of the fo''o%ing
1. /he *argin 4
1. (ertica', %here re'e(ant.
2. hori:onta', a'%ay
2. /he padding
M. /he +order
N. /he c'ient area
/he precie *anner in %hich CSS "ei!"tG<idt"
etting are ued i +ro%er and </< dependent
@ith the trict </< the figure reported +y Oa(acript
for e.clientHidt"GHei!"t inc'ude the padding +ut not
the +order. e.o++setHidt"GHei!"t, on the otherhand,
report figure that inc'ude +oth the +order %idth and
the padding. !adding i ne(erthe'e outside the c'ient
area 4 i.e the a(ai'a+'e area for chi'd HDEs i CSS
hei!"t 4 CSS <idt".
@ith the tranitiona' </< nothing change 4 %ith
;irefo& and >pera. 5o%e(er, IE 7e(en IE,8 treat the
CSS etting a the <"ole area of the e'e*ent 4 +order
and padding inc'uded. /he padding and +order eat into
the c'ient area.
Notes
/eted under 2=PQ, ;irefo& 1.IQ ? >pera 9.1Q.
6ot CSS propertie are not inherited. Gota+'e
e&ception are color, +ont, letter'spacin!, <ord'
spacin!, te4t'ali!n, te4t'indent ? line'"ei!"t.
CSS propertie decri+e HDE 3ua'itie. 2n other %ord,
they are a'%ay adEecti(e, not (er+. /hu
)isi7ility:hidden not )isi7ility:hide.
Iey
rule 4 CSS Se'ector
property 4 CSS !roperty 2dentifier
value 4 CSS !roperty Ra'ue
)alue 4 CSS !roperty Ra'ue 7<efau't8
attri7J 5/6" ='e*ent )ttri+ute 2dentifier
)alue J 5/6" ='e*ent )ttri+ute Ra'ue
a:7 4 a or +
a::7 4 a or + or +oth, any order
a
K
- a :ero or *ore ti*e
IE J not upported +y IE, e(en IE,
IE*(,) J not upported +y IE*. IE, upport inco*p'ete.
IE* J not upported +y 2E*
2= 4 not upported +y IE, e(en IE,
2= 2= 4 not upported +y IE*.
5...6 - option
5a 76 4 group of a and 7.
$text% - rep'ace text %ith uita+'e (a'ue
C J co'or (a'ue, e.g. fuchia or H;;00;;
A 4 ;a*i'y-na*e, e.g. aria', Lco*ic an *9 etc. Ga*e
containing pace hou'd +e %rapped in 3uote.
. 4 Deneric-fa*i'y na*e B seri+:sans'seri+:cursi)e:
+antasy:monospace. >ptiona' +ut reco**ended.
3 J 'ength (a'ue %ith unit, e.g. 2e*, 10F M0p& etc
N J i*p'e nu*+er 7no unit8.
Q Q
4 accept horthand. Shorthand propertie are
pecified +y co*+ining the indi(idua' property
pecification and aigning the* to the root property,
e.g. 7order: or +ont:. Note: >*itting a u+-property in
horthand pecification caue it to take it defau't
(a'ue. @ith the nota+'e e&ception of +ont:, horthand
propertie can +e pecified in any order.
1 1
IE* +ug#,-. right %i'' *o(e +ackground right. ;irefo&
and >pera %i'' ue ,-. and ignore right.
2 2
/here are fi(e ditinct horthand for*at for the +order
property
7order'K# %here K i one of 'eft, top, right or +otto*
7order#
M M
for conitency pecify a +order %idth in 'ength unit.
=ach +ro%er ha it o%n interpretation of medium.
N N
on'y a partia' 'it
I I
Not a copy of CSS tandard. 1e re'ati(e unit for
font i:e. 9l<ays pecify font infor*ation 4 the defau't
depend on, uer-configured, +ro%er etting. >ther
font-%eight are often not a(ai'a+'e in the e'ected font.
/he horthand, +ont, property re3uire the u+-property
order gi(en here to +e fo''o%ed. /he yte* etting
option, uch a menu and caption, are handy %hen
creating dia'og %hich fee' 'ike yte* dia'og.
P P
/he defau't i :ero. )ign horthand mar!in firt,
then change other indi(idua''y - if re3uired. Rertica''y
adEacent +'ock HDEs co''ape 4 i.e. on'y the +igger
*argin i ued. 2n'ine HDEs do not ue (ertica' *argin.
5ori:onta' *argin ne(er co''ape. Gor do any of the
*argin of f'oated HDEs. /o center HDE hori:onta''y in
it parent, et hori:onta' *argin to auto. 6argin can
+e negati(e 4 ue %ith care for o(er'ap effect.
)n e&teni(e range of free 3uick reference card i
a(ai'a+'e at http#$$%%%.e&p'ainth.at