cascading style sheets (css) - tel aviv universitystoledo/courses/workshop/css.pdfthe structure of a...
TRANSCRIPT
Casc
adin
g St
yle
Shee
ts (
CSS)
Si
van
Tole
do
Tel-A
viv
Uni
vers
ity
© S
ivan
Tol
edo,
200
6
A S
impl
e Ex
ampl
e (H
TML
Inte
grat
atio
n)
<html>
<head>
<title>A CSS Example</title>
<style type="text/css">
h1 { color: green }
</style>
</head>
<body>
...
</html>
The
Stru
ctur
e of
a R
ule
CSS
is a
dec
lara
tive
lang
uage
: you
dec
lare
sty
le
rule
s th
at th
e br
owse
r app
lies
to d
ocum
ent
elem
ents
Th
e st
ruct
ure
of a
sim
ple
rule
:
Sele
ctor
Prop
erty
Valu
e
h1 { color: green }
Mul
tiple
Sel
ecto
rs
We
can
appl
y a
sing
le ru
le to
mul
tiple
sel
ecto
rs:
h1, h2, h3 { color: green }
Don
't fo
rget
the
com
mas
(a s
eque
nce
of s
elec
tors
w
ith n
o co
mm
as h
as a
diff
eren
t mea
ning
; mor
e on
th
at la
ter)
Mul
tiple
Rul
es &
Gro
upin
g D
ecla
ratio
ns
h1 { color: green }
h1 { font-weight: bold }
or
h1 { color: green;
font-weight: bold
}
The
sem
icol
on is
a s
epar
ator
(can
put
one
aft
er th
e la
st d
ecla
ratio
n)
Inhe
rita
nce
body { color: green }
p { color: red }
The
body
and
all
its
child
ren
in th
e do
cum
ent
tree
will
be
prin
ted
in g
reen
, exc
ept f
or p
arag
raph
s an
d th
eir s
ubtr
ees,
whi
ch w
ill b
e pr
inte
d in
red
Mos
t of t
he p
rope
rtie
s ar
e in
herit
ed b
y ch
ildre
n el
emen
ts in
the
docu
men
t, un
less
they
are
ov
errid
den
by o
ther
rule
s
Non
Inhe
rita
nce
Som
e pr
oper
ties
(not
man
y) a
re n
ot in
herit
ed; f
or
exam
ple,
the
back
grou
nd is
not
inhe
rited
in o
rder
to
pre
serv
e co
rrec
t tili
ng o
f bac
kgro
und
imag
es
Shor
than
d Pr
oper
ties
Som
e pr
oper
ties
are
shor
than
d no
tatio
n fo
r gro
ups
of m
ore
spec
ific
prop
ertie
s h1 { font: 36pt italic }
h1 { font-size: 36pt;
font-style: italic }
blockquote { margin: 1em 0em 1em 0em }
blockquote { margin-top : 1em;
margin-right: 0em; ...
Uni
ts: e
m
h1 { font-size: 4em }
of th
e pa
rent
p { text-indent: 1.8em }
of th
is el
emen
t em
=fo
nt s
ize
of th
is el
emen
t or i
ts p
aren
t O
rigin
of t
he te
rm: t
he w
idth
of t
he le
tter
"M"
Usin
g "e
m"
rath
er t
han
abso
lute
uni
ts (
pt, m
m, c
m)
ensu
res
that
font
-rel
ated
siz
es a
nd le
ngth
s ar
e ch
osen
rela
tive
to th
e us
er's
base
siz
e; th
is ca
uses
w
eb p
ages
to re
spec
t the
use
r's d
efau
lt siz
e an
d al
low
s us
ers
to s
cale
up/
dow
n th
e te
xt
Mor
e on
em
fo
nt-s
ize
defin
es e
m re
lativ
e to
the
pare
nt's
font
siz
e; o
ther
pro
pert
ies
defin
e em
rela
tive
to th
is el
emen
t's fo
nt si
ze
Use
em
for a
lmos
t eve
ryth
ing
and
abso
lute
uni
ts
for a
lmos
t not
hing
U
se a
bsto
lute
uni
ts o
nly
whe
n th
e ab
solu
te s
ize
of
the
med
ium
is k
now
n (e
.g.,
prin
ting
on A
4 pa
per)
or
whe
n an
ele
men
t has
a ri
gid
pixe
l siz
e (im
ages
)
Uni
ts: P
erce
ntag
es
body { margin-left: 10%;
margin-right: 10% }
Perc
enta
ges
of th
e w
idth
/hei
ght o
f the
rect
angl
e th
at is
use
d to
lay
out
the
elem
ent (
here
the
wid
th
of th
e br
owse
r win
dow
or t
he fr
ame)
Sele
ctor
s: By
the
Clas
s Att
ribu
te
h1 { color: green }
a ty
pe s
elec
tor
.question { color: green }
.answer { color: red }
clas
s se
lect
ors
<p class="question">
How much is a cent?
</p>
<p class="answer">
A cent is 0.01 of one Dollar.
</p>
Sele
ctor
s: By
the
ID A
ttri
bute
#para821 {
text-decoration: line-through
}
<p class="question">
Who is the US president?
</p>
<p class="answer"
id="para821">
The US president is Bill Clinton.
</p>
ID S
elec
tor
as a
n In
line
Styl
e A
ttri
bute
<p class="answer"
style="text-decoration:
line-through ">
The US president is Bill Clinton.
</p>
Exac
tly th
e sa
me
mea
ning
as
a ru
le w
ith a
n ID
se
lect
or
Usu
ally
not
a g
ood
idea
Com
bini
ng S
elec
tors
p.obsolete { text-decoration:
line-trough }
App
lies
of e
lem
ents
of t
ype p
and
cla
ss obsolete
A
dditi
onal
exa
mpl
es la
ter
Cont
extu
al S
elec
tors
h3 strong { color: red }
App
lies
to e
lem
ents
of t
ype strong
that
are
insid
e el
emen
ts o
f typ
e h3
ul { list-style: decimal }
ul ul { list-style: lower-roman }
ul ul ul { list-style: lower-alpha }
p.question em { font-style: italic }
Sele
ctor
s: Ps
eudo
-Cla
sses
for
Anc
hors
, Inp
ut
a:link { color: blue }
a:hover { text-decoration: underline }
a:active { color: red }
a:visited { color: black; text-... }
input:focus { outline: solid black }
Sele
ctor
s: Ps
eudo
-Ele
men
ts
p:first-line {
font-variant: small-caps }
p.largeinitial:first-letter {
font-size: 3em }
p.answer:before {
content: "Question: ";
font-weight: bold }
body:after {
content: "© 2006 by Sivan Toledo" }
Adv
ance
d A
ttri
bute
Sel
ecto
rs
[value] { font-weight: italic }
input[value] { font-weight: italic }
App
lies
to e
lem
ents
(input
ele
men
ts) t
hat h
ave
a value
att
ribut
e (n
o m
atte
r wha
t its
val
ue is
) input[value="Type your name here"] {...}
input[value~="yes"] {...}
App
lies
if th
e w
ord yes
app
ears
(sp
ace
sepa
rati
on)
The
Lang
uage
Pse
udo-
Att
ribu
te
body {
font-family: Georgia, serif;
direction: ltr
}
:lang(iw) :lang(he) {
CSS
2 on
ly!
font-family: Arial sans;
direction: rtl
}
[lang|="he"] { direction: rtl }
N
ot a
s co
mpr
ehen
sive,
but
CSS
1
Adv
ance
d Co
ntex
tual
Sel
ecto
rs
body > p.footnote { font-size: 0.8em }
App
lies
to p
ele
men
ts w
ith c
lass
footnote
who
se
pare
nt is
the body
ele
men
t p + p { text-indent: 1.8em }
App
lies
to p
ele
men
ts th
at d
irect
ly fo
llow
ano
ther
p
ele
men
t (bu
t not
to a
p th
at fo
llow
hea
ding
s, et
c)
p:first-child { font-weight: bold }
Font
: Fon
t Fam
ilies
body { font-family:
"Bistream Vera Sans Mono",
"Courier New",
"Computer Modern Typewriter",
monospace }
Cho
oses
the
first
fam
ily th
at th
e br
owse
r can
find
; m
onos
pace
is a
gen
eric
font
typ
e, n
ot a
real
fam
ily
nam
e; a
lway
s fin
ish
lists
wit
h a
gene
ric
nam
e:
serif
san
s-se
rif mon
ospa
ce cursive
fantasy
Font
Siz
es
h1 { font-size: 2em }
rela
tive
size
h1 { font-size: 200% }
exac
tly th
e sa
me
h1 { font-size: larger }
rela
tive,
120
%
h6 { font-size: smaller }
rela
tive,
1/1
.2
12pt, 2mm, 8px
abso
lute
, not
reco
mm
ende
d xx-small, x-small, small, medium,
large, x-large, xx-large
ab
solu
te, b
row
ser c
hoos
es, a
ppro
x x1
.2 fa
ctor
s
Font
Var
iatio
ns
font-style: no
rmal | ita
lic | ob
lique
font-variant: no
rmal |
-
Font
Wei
ghts
font-weight: 100
200
200
like
this
(l
ight
) 300
400 normal
like
this
(r
egul
ar)
500
like
this
(m
ediu
m)
600
like
thi
s (d
emi)
700 bold
like
thi
s (b
old)
800
like
thi
s (x
tra-
bold
) 900
Bu
t mos
t fam
ilies
hav
e on
ly 2
wei
ghts
A
lso
rela
tive
spec
s: lighter
, bolder
(tha
n pa
rent
)
Font
Pro
pert
ies S
hort
hand
& S
yste
m F
onts
p { font: italic bold 1.2em monospace }
The
shor
than
d ca
n se
t the
styl
e, v
aria
nt, w
eigh
t, siz
e, li
ne-h
eigh
t (m
ore
late
r), a
nd fa
mily
Sp
ecify
ing
vario
us sy
stem
font
s: font: caption | icon | menu
| message-box
| small-caption
| status bar
Thes
e se
t all
the
prop
ertie
s, bu
t we
can
over
ride
Wid
e an
d N
arro
w F
onts
font-stretch: normal | wider | narrower
condensed | expanded | ...
Mos
t fon
ts d
on't
have
wid
th v
aria
tions
, but
som
e do
: So
me f
amilie
s hav
e sev
eral
wid
ths
Som
e fa
mili
es h
ave
seve
ral w
idth
s So
me
fam
ilies
hav
e se
vera
l wid
ths
Som
e fa
mili
es h
ave
seve
ral w
idth
s (T
he b
row
ser m
ay b
e ab
le to
str
etch
/con
dens
e; th
is is
usua
lly n
ot v
ery
aest
hetic
)
Adj
ustin
g th
e Si
ze o
f Alte
rnat
e Fo
nts
body {
font: 10pt Verdana, serif
font-size-adjust: 0.58
}
If Ve
rdan
a is
avai
labl
e, it
will
be
used
at 1
0 pt
O
ther
wis
e th
e siz
e of
the
alte
rnat
e fo
nt w
ill b
e ad
just
ed s
o th
at it
s x-
heig
ht w
ill b
e
0.58
x 1
0pt =
5.8
pt
The
valu
e none
ove
rrid
es a
n in
herit
ed v
alue
Text
Dec
orat
ions
& T
rans
form
atio
ns
text-decoration: none
underline
overline
line-through
blink
yuk!
Th
is pr
oper
ty is
not
inhe
rited
text-transformation: capitalize
uppercase
lowercase
none
Disp
lay
Mod
es
display: none
not d
ispla
yed
at a
ll block
in a
box
(rec
tang
le)
inline
flow
s w
ith th
e te
xt
list-item
self
expl
anat
ory
run-in
fanc
y he
adin
g st
yle
compact
fanc
y he
adin
g st
yle
marker
mar
ker f
or a
list
item
table
inline-table
table-...
Con
trol
s how
an
elem
ent i
s di
spla
yed
Sim
ple
Dis
play
Mod
es
none
: not
disp
laye
d at
all
(use
ful i
n sc
ripts
) bl
ock:
star
ts a
nd e
nds
on a
new
line
, lik
e p
, h1
, div
inlin
e: fl
owed
layo
ut, l
ike em
, strong
, span
lis
t-ite
m: i
n a
box
with
a la
bel,
like li
Run-
in D
ispla
ys
h3 { display: run-in;
font-weight: bold }
h3:after { content: "." }
Back
grou
nd. B
y th
e 19
50s,
Rom
an C
atho
lic
theo
logi
cal a
nd b
iblic
al st
udie
s ha
d be
gun
to m
ove
away
from
the
neo-
scho
last
icism
and
bib
lical
lit
eral
ism th
at th
e re
actio
n to
the
Mod
erni
st h
eres
y ha
d en
forc
ed fr
om a
fter
the
Firs
t Vat
ican
Cou
ncil
wel
l int
o th
e 20
th c
entu
ry.
Com
pact
Disp
lays
(Se
e A
lso
Floa
ts)
Seco
nd V
atic
an C
ounc
il Th
e Se
cond
Ecu
men
ical
Cou
ncil
of th
e Va
tican
, or V
atic
an II
, (V
atic
an t
wo)
was
an
Ecum
enic
al C
ounc
il of
the
Rom
an C
atho
lic C
hurc
h op
ened
un
der P
ope
John
XXI
II in
196
2 an
d cl
osed
und
er P
ope
Paul
VI
in 1
965.
Lu
men
Gen
tium
One
of t
he p
rinci
pal d
ocum
ents
Cont
rolli
ng L
ist It
ems:
The
Labe
ls
list-style-type:
none
(sup
pres
ses
the
labe
l, no
t the
cou
nter
),
disc, circle, square,
decimal, decimal-leading-zero,
lower-roman, upper-roman,
lower-alpha, lower-latin,
upper-alpha, upper-latin,
hebrew,
(various other alphabets)
ul { list-style-image: url("star.gif") }
(none
is a
lso
a po
ssib
le v
alue
)
Cont
rolli
ng L
ist It
ems:
Labe
l Pos
ition
list-style-position: inside | outside
• The
Sec
ond
Ecum
enic
al C
ounc
il of
the
Vatic
an, o
r Va
tican
II, (
Vatic
an t
wo)
was
an
Ecum
enic
al
Cou
ncil
of th
e Ro
man
Cat
holic
Chu
rch
open
ed ..
. • T
he S
econ
d Ec
umen
ical
Cou
ncil
of th
e Va
tican
, or
Va
tican
II, (
Vatic
an t
wo)
was
an
Ecum
enic
al
C
ounc
il of
the
Rom
an C
atho
lic C
hurc
h op
ened
...
Cont
rolli
ng L
ist It
ems:
A S
hort
hand
ul > li {
list-style: circle inside
}
ul ul > li {
list-style: url("star.gif") outside
}
Coun
ters
h2:before {
content: "Chapter " counter(ch) ": ";
counter-reset: sec;
counter-increment: ch }
h3:before {
content: counter(ch) "." counter(sec);
counter-increment: sec }
Cha
pter
2: T
he V
ikin
gs in
the
Med
iterr
anea
n 1.
1 H
ow D
id T
hey
Get
The
re?
1.2
Trad
e an
d C
onfli
ct
Non
-Ara
bic
Coun
ters
counter(appendix, upper-alpha)
counter(ch, upper-roman)
Coun
ters
for
List
Mar
kers
ol { counter-reset: itemnr }
li:before {
display: marker;
content: counter(itemnr, ".");
counter-increment: itemnr;
}
1 fir
st it
em in
firs
t list
1.1
firs
t ite
m in
inne
r list
ne
sted
use
of i
tem
nr
1
.2 s
econ
d ite
m in
inne
r list
2
seco
nd it
em in
out
er li
st
Spac
ing
for
Mar
kers
li:before {
display: marker;
content: counter(itemnr, ".");
counter-increment: itemnr;
marker-offset: 1em;
dist
ance
to it
em
width: 3em;
wid
th o
f mar
ker b
ox
text-align: left;
}
Cont
rolli
ng th
e M
eani
ng o
f Whi
te-S
pace
Ch
arac
ters
N
orm
ally
, whi
te s
pace
cha
ract
ers,
incl
udin
g ta
bs
and
new
-line
s, ar
e ig
nore
d:
• new
-line
s ar
e ig
nore
d; te
xt w
raps
at e
nd o
f lin
e • m
ultip
le c
onse
cutiv
e w
hite
-spa
ce c
hara
cter
s ar
e co
llaps
ed in
to o
ne
• whi
te s
pace
at t
he b
egin
ning
and
at t
he e
nd o
f pa
ragr
aphs
is ig
nore
d white-space: normal | pre | nowrap
Cont
rolli
ng th
e Fl
ow o
f Tex
t: A
lignm
ent a
nd
Inde
ntat
ion
text-align: left
right
center
justify
(a st
ring;
for t
able
s; la
ter)
text-indent: 2em
(can
inde
nt b
y a
perc
enta
ge o
f par
agra
ph w
idth
; us
ually
a b
ad id
ea)
Inte
rlin
e Sp
acin
g p { line-height: 1.5 }
Line
s ar
e sp
aced
at a
min
imum
of 1
50%
of t
he fo
nt
size;
e.g
., if
em=
10pt
then
line
s ar
e at
leas
t 15p
t ap
art (
coul
d be
mor
e if
lines
con
tain
tal
l thi
ngs)
In
herit
ed e
lem
ents
will
hav
e lin
e he
ight
of 1
50%
of
thei
r fo
nt si
ze
line-heigt: 1.5em | 150%
in
herit
ed a
s a
fixed
leng
th
Inte
rwor
d Sp
acin
g an
d Le
tter
Spa
cing
word-spacing: normal | 0.2em
Usu
ally
bes
t to
leav
e th
is al
one
letter-spacing: normal | 0.1em
A v
alue
of 0
is u
sefu
l (in
stru
cts
the
brow
ser n
ot to
co
mpr
ess/
expa
nd s
paci
ng);
also
use
ful w
ith a
ll ca
ps:
h2 { text-transform: uppercase;
letter-spacing: 0.33em }
Vert
ical
Alig
nmen
t vertical-align: baseline
defa
ult
sub | super
middle
vert
ical
cen
terin
g text-top | text-bottom
top | bottom
conf
usin
g 50% | -75% | ...
1ex | ...
A le
ngth
rais
es o
r low
ers
the
base
line
by th
at
amou
nt; a
per
cent
age
by a
frac
tion
of th
e lin
e he
ight
The
Spac
e A
roun
d Bo
xes
The
brow
ser l
ays
out a
doc
umen
t by
putt
ing
boxe
s in
side
boxe
s (a
nd b
y flo
win
g te
xt in
side
boxe
s)
M
argi
ns a
re a
lway
s tr
ansp
arar
ent
A b
lock
ele
men
t co
ntai
ning
text
fo
rms
a bo
x
padd
ing
mar
gins
bord
er
Mar
gins
margin-top: 1em; margin-right: 2em;
margin-bottom: 1em; margin-left: 2em;
or
margin: 1em 2em 1em 2em;
(sta
rts
at to
p, c
lock
wis
e)
(aut
o-co
mpl
etio
n if
few
er th
an 4
val
ues)
auto
(late
r), 10%
(% w
idth
of e
nclo
sing
elem
ent)
Colla
psin
g M
argi
ns
Touc
hing
top
and
bott
om m
argi
ns o
f box
es th
at
are
on to
p of
one
ano
ther
col
laps
e: th
e bo
rder
se
para
tion
is th
e m
axim
al m
argi
ns, n
ot th
e su
m
Left
/rig
ht m
argi
ns d
o no
t col
laps
e M
argi
ns d
o no
t col
laps
e if
som
ethi
ng (n
onze
ro
padd
ing,
bor
der)
sep
arat
es th
em; C
onsid
er a
list
-ite
m in
side
a lis
t, fo
llow
ed b
y a
para
grap
h; if
the
list
has
padd
ing/
bord
er, t
he m
argi
ns w
ill n
ot c
olla
pse
Padd
ing
padding-top, padding-right, ...
padding: 1em
Sam
e ru
les
as th
e m
argi
ns p
rope
rtie
s Th
e pa
ddin
g is
part
of t
he b
ox (u
nlik
e th
e m
argi
ns
whi
ch a
re a
roun
d th
e bo
x); t
he b
ackg
roun
d of
the
box
is pa
inte
d on
the
padd
ing
area
, but
not
on
the
mar
gins
Bu
t the
bac
kgro
und
of th
e ro
ot is
ext
ende
d in
to it
s m
argi
ns (b
ecau
se it
has
no
pare
nt)
Bord
ers a
nd B
orde
r Pr
oper
ties
Bord
ers
have
3 p
rope
rtie
s an
d 4
side
s: border-left-color, border-top-color, ...
border-left-style, ...
border-left-width, ...
man
y sh
orth
and
prop
ertie
s: border
border-left, border-top, ...
border-color, border-style,
border-width
Bord
er S
tyle
s and
Wid
ths
none
defa
ult
hidden
spac
e re
serv
atio
n bu
t
noth
ing
is di
spla
yed
solid, dotted, dashed
line
styl
es
double
para
llel l
ines
that
fill
the
give
n w
idth
groove, ridge
3D e
ffect
aro
und
inset, outset
3D o
n en
tire
area
thin, medium, thick
pred
eter
min
ed w
idth
s
(doc
umen
t con
siste
ncy)
0.1em, 2px, 1mm
Out
lines
Inst
ead
of B
orde
rs
An
outli
ne is
a b
orde
r for
whi
ch n
o sp
ace
is re
serv
ed
Use
ful f
or fl
ashi
ng a
s pa
rt o
f the
use
r int
erfa
ce
(whe
n th
e m
ouse
hov
ers,
for e
xam
ple,
or t
o in
dica
te fo
cus)
Th
ree
prop
ertie
s an
d on
e sh
orth
and:
outline-color, outline-style,
outline-width, outline
Box-
Size
Con
trol
N
orm
ally
, the
wid
th o
f box
es is
det
erm
ined
by
the
wid
th o
f the
con
tain
ing
box
min
us p
addi
ng, b
orde
r, an
d m
argi
ns; h
eigh
t by
the
amou
nt o
f mat
eria
l W
e ca
n se
t the
wid
th a
nd/o
r hei
ght e
xplic
itly
usin
g th
e width
and
height
pro
pert
ies
(leng
th,
perc
enta
ge, o
r auto
to re
turn
to n
orm
al);
usua
lly
not a
goo
d id
ea
But p
laci
ng s
ome
cons
trai
nts
can
be a
goo
d id
ea
Cons
trai
ning
Box
Siz
es
min-width
max-width
min-height
max-height
(hei
ght c
onst
rain
sts
are
rare
ly u
sefu
l) W
hat t
o do
whe
n a
box
over
flow
s (e
xten
ds b
eyon
d it
s co
ntai
ning
box
)?
overflow: visible
defa
ult,
may
stic
k ou
t hidden
hide
the
part
that
stic
ks o
ut
scroll
alw
ays
use
a sc
rollb
ar
auto
a sc
rollb
ar, o
nly
if ne
cess
ary
Floa
ting
Elem
ents
float: left | right | none
Cau
ses
the
elem
ent t
o be
disp
laye
d in
blo
ck m
ode;
it
will
floa
t to
the
left
or t
he ri
ght u
ntil
it hi
ts th
e m
argi
n/bo
rder
/pad
ding
of a
noth
er b
lock
ele
men
t M
argi
ns o
f flo
atin
g el
emen
ts d
on't
colla
pse
h3 { float: left; width: 5em }
p { margin-left: 6em }
Clea
r: D
on't
Floa
t Nea
r M
e clear: none | left | right | both
Prev
ents
a fl
oatin
g el
emen
t fro
m a
ttac
hing
to th
e cl
eare
d sid
e; in
stea
d, th
e flo
atin
g el
emen
ts w
ill
mov
e do
wn
until
they
hav
e en
ough
spa
ce
img {
float: left;
clear: left
}
h2 { clear: both }
Posit
ioni
ng B
oxes
position: static
defa
ult
absolute
impl
ies
disp
lay:
blo
ck
fixed
impl
ies
disp
lay:
blo
ck
relative
defa
ult
Whe
n th
e po
sitio
ning
rule
is n
ot st
atic
, the
act
ual
posit
ion
is de
term
ined
by
top: <length> | <percentage> | auto
and
by right, left, bottom
Fixe
d Po
sitio
ning
A
blo
ck th
at is
disp
laye
d at
a fi
xed
posit
ion
rela
tive
to th
e vi
ewpo
rt (t
he b
row
ser's
win
dow
or t
he
prin
ted
page
) div.lefttopbox {
position: fixed;
top: 1em;
dow
n fr
om th
e to
p of
the
win
dow
left: 1em;
from
the
left
end
of th
e w
indo
w
width: 12em; height: 12em;
...
}
Fixe
d Po
sitio
ning
(Co
ntin
ued)
div.righttopbox {
position: fixed;
top: 1em;
right: 1em; left: 14em;
width: auto; height: 12em;
... }
div.mainbox {
position: fixed;
top: 14em: height: auto;
left: 1em; right: 1em;
... }
Fixe
d Po
sitio
ing:
the
End
Resu
lt
(Thi
s is
why
we
do n
ot n
eed
fram
es w
ith C
SS)
12au
to
14
1 1
11
Abs
olut
e Po
sitio
ning
Si
mila
r to
fixed
, but
with
tw
o di
ffere
nces
• T
he p
ositi
onin
g sp
ecifi
catio
n is
rela
tive
to th
e co
ntai
ning
blo
ck: t
he n
eare
st a
nces
tor i
n th
e do
cum
ent t
ree
that
use
s a
non-
stat
ic
posit
ioni
ng ru
le
• Spe
cial
mea
ning
for t
he v
alue
auto
for t
he
prop
ertie
s top
, bottom
, left
, right
: mea
ns
"app
roxi
mat
ely
whe
re th
e bl
ock
wou
ld h
ave
been
stat
ical
ly p
ositi
oned
"
Exam
ple
of A
bsol
ute
Posit
ioni
ng
When we think of Beethoven<span
class="marginnote>1770-1827</span>, we
think of ...
span.mntext {
position: absolute;
top: auto;
right: 1em;
width: 12em;
}
We
assu
me
that
the
mar
gina
l not
e w
ill fi
t int
o th
e rig
ht
mar
gin
Rela
tive
Posit
ioni
ng
The
posit
ioni
ng o
f the
ele
men
t is
shift
ed u
p/do
wn
and
left
/rig
ht re
lativ
e to
whe
re it
wou
ld h
ave
been
po
sitio
ned;
app
lied
all k
inds
of d
ispla
ys, n
ot ju
st
bloc
k span.superscript { top: -0.5em;
font-size: 0.75em }
Mov
es a
spa
n of
text
up
and
shrin
ks it
a b
it1 . 1 T
his
does
not
affe
ct th
e in
terli
ne s
paci
ng, u
nlik
e th
e ve
rtic
al-a
lign
prop
erty
Ove
rlap
s and
Z-A
xis O
rder
ing
Whe
n w
e sp
ecify
pos
ition
ing,
the
brow
ser a
llow
s el
emen
ts to
ove
rlap
(thi
s m
akes
float
bet
ter f
or
mar
gina
l not
es a
nd im
ages
, for
exa
mpl
e)
We
can
cont
rol w
hich
ele
men
t is
"clo
ser t
o th
e vi
ewer
" by
givi
ng e
lem
ents
a z-order
; hig
her
valu
es a
re c
lose
r to
the
view
er
Exam
ple:
Rel
ativ
e, A
bsol
ute,
Z-O
rder
When we think of
<span class="imgtext">
<img src="beethoven.jpg" />
Beethoven</span>, we think of his ...
span.imgtext {
position: relative;
z-order: 2 }
span.imgtext > img {
position: absolute;
top: -1em; left: -1em
z-order: 1 }
Whe
n w
e th
ink
of B
eeth
oven
, w
e th
ink
of h
is
sym
phon
ies,
but
al
so ..
.
Visi
bilit
y visibility: hidden
visible
defa
ult
Sett
ing
visi
bilit
y to
hid
den
hide
s th
e el
emen
t, bu
t sp
ace
is st
ill re
serv
ed fo
r it
May
whe
n w
e w
ant t
o to
ggle
visi
bilit
y bu
t with
out
chan
ging
the
layo
ut o
f the
doc
umen
t (e.
g., w
hen
reve
alin
g th
e an
swer
of a
que
stio
n in
an
on-li
ne
exam
)
Posit
ioni
ng S
umm
ary
• May
cau
se o
verla
ps; t
here
fore
, not
ver
y us
eful
• M
ainl
y us
eful
for p
artit
ioni
ng th
e do
cum
ent
into
sev
eral
dist
inct
are
as w
ithou
t usi
ng fr
ames
• C
an a
lso
be u
sed
for v
ario
us v
isual
effe
cts
and
for s
crip
ted
anim
atio
ns (e
.g.,
elem
ents
that
gr
adua
lly m
ove
into
thei
r fin
al p
ositi
on)
Colo
rs
Pred
efin
ed: b
lack
, whi
te, r
ed, g
reen
, yel
low
, plu
e,
purp
le, s
ilver
, gra
y, m
aroo
n, fu
chsia
, lim
e, o
live,
na
vy, t
eal,
aqua
; don
't us
e ot
her
nam
ed c
olor
s RG
B co
lors
: rgb(100%, 50%, 50%)
good
not
atio
n rgb(255, 128, 128)
0-25
5, n
ot a
s go
od
#FF8080
sam
e va
lue,
hex
adec
imal
#A83
yuk!
sam
e as
#A
A88
33
Syst
em c
olor
s: Ba
ckgr
ound
, Men
u, M
enuT
ext,
...
Back
grou
nd Im
ages
body {
background-image: url(mylogo.gif);
background-color: rgb(80%, 80%, 80%);
}
The
imag
e is
disp
laye
d on
top
of th
e co
lore
d ba
ckgr
ound
; if t
he im
age
is pa
rtia
lly tr
ansp
aren
t, th
e co
lor w
ill s
how
und
erne
ath;
the
colo
r will
be
show
n al
one
if th
e im
age
cann
ot b
e lo
aded
/sho
wn
Back
grou
nd-I
mag
e Re
petit
ion
background-repeat:
repeat
defa
ult
repeat-x
repeat-y
no-repeat
Back
grou
nd-I
mag
e Po
sitio
ning
background-attachment:
scroll
defa
ult
fixed
may
be
usef
ul fo
r bod
y background-position:
10% 20%
x-y
valu
es
10%
sam
e fo
r x
and
y 1em 1em
2em
top left
center center
...
Tabl
es!
Befo
re w
e be
gin:
HTM
L ta
bles
can
be
used
to
achi
eve
man
y la
yout
effe
cts;
don'
t do
it; u
se C
SS
posit
ione
d el
emen
t and
floa
ting
elem
ents
inst
ead
Two
layo
ut m
odes
for t
he t
able
ele
men
t its
elf:
table
defa
ult,
a bl
ock
elem
ent
inline-table
a bo
x th
at fl
ows
with
the
text
Tabl
e La
yout
Alg
orith
ms
table-layout: auto
defa
ult;
clev
er b
ut s
low
fixed
a fa
ster
alg
orith
m
fixed
is u
sed
only
if width
is n
ot auto
(eve
n th
ough
the
tabl
e's width
is o
ften
igno
red)
: • I
f a c
olum
n el
emen
t has
a w
idth
or t
he c
ell i
n th
e fir
st ro
w h
as a
wid
th, t
hat w
idth
is u
sed
• If a
ll co
lum
ns h
ave
wid
th (u
nder
the
defin
ition
ab
ove)
, tha
t det
erm
ines
the
tabl
e's
wid
th
• Oth
erw
ise,
und
eter
min
ed c
olum
ns h
ave
equa
l w
idth
s, th
e re
st o
f the
tab
le's
wid
th
Colla
psin
g a
Colu
mn
Sett
ing
the visibility
of a
col
umn
to collapse
in
clud
es th
e co
lum
n in
col
umn-
wid
th c
alcu
latio
ns
but d
oes
not s
how
it
This
allo
ws
scrip
ts to
qui
ckly
hid
e an
d sh
ow
colu
mns
: the
bro
wse
r doe
s no
t nee
d to
re
com
pute
d th
e co
lum
n w
idth
s, on
ly to
shi
ft
colu
mns
to th
e le
ft o
r rig
ht
The
Bord
er M
odel
of a
Tab
le
border-collapse: collapse
defa
ult
separate
In th
e co
llaps
ing
mod
el, a
t mos
t one
bor
der
sepa
rate
s ad
jace
nt c
ells
Ea
ch c
ell,
row
, and
col
umn,
row
gro
up, c
olum
n gr
oup,
and
the
entir
e ta
ble
may
hav
e a
bord
er
The
bord
er th
at is
act
ually
sho
wn
next
to e
ach
cell
is th
e st
rong
est o
f tho
se th
at a
pply
to th
at lo
catio
n
Bord
er S
tren
gths
th
ick
lines
>
thi
nk li
nes
doub
le li
nes
> s
ingl
e lin
es
solid
line
s >
das
hed
lines
> d
otte
d lin
es
3D st
yle
> 2
D st
yle
If bo
rder
s di
ffer o
nly
in c
olor
, the
n ce
ll >
row
> ro
w g
roup
> c
ol >
col
gro
up >
tab
le
Sepa
rate
d Bo
rder
s M
ainl
y us
eful
for 3
D b
orde
rs (i
nset
and
outset
) table {
border-collapse: separate ;
border-spacing: 2px ;
empty-cells: show;
defa
ult,
or "h
ide"
... }
hide
in empty-cells
will
not
dra
w th
eir b
orde
r
The
Z-O
rder
ing
of T
able
Ele
men
ts
Wha
t is
the
back
grou
nd o
f a c
ell i
nsid
e a
row
and
a
colu
mn,
insid
e a
row
gro
up a
nd a
col
umn
grou
p, if
al
l of t
hese
(and
the
tabl
e) h
ave
back
grou
nd?
The
back
grou
nd o
f tab
le e
lem
ents
is d
eter
min
ed b
y a
fixed
z-o
rder
ing
of th
e el
emen
ts
cell
(on
top)
>
row
>
row
gro
up
> c
olum
n >
col
umn
grou
p
> t
able
Alig
ning
Tex
t in
Cells
text-align: right
as in
any
blo
ck e
lem
ent
left
as in
any
blo
ck e
lem
ent
center
as in
any
blo
ck e
lem
ent
justify
as in
any
blo
ck e
lem
ent
<string>
only
in ta
bles
A
llow
s al
igni
ng o
n a
deci
mal
poi
nt, o
r on
":" (a
s in
23
:59,
for t
ime
tabl
es);
only
use
d in
sin
gle-
line
cells
; ce
lls w
ithou
t the
spe
cial
strin
g ar
e al
igne
d to
the
left
of i
t (th
ink
of w
hole
num
bers
)
Vert
ical
Alig
nmen
t of T
able
Cel
ls
vertical-align:
baseline
defa
ult:
a sin
gle
base
line
for c
ells
in m
ultip
le c
olum
ns
top
bottom
middle
Tabl
e M
isce
llane
a C
ells
don
't ha
ve m
argi
ns, b
ut th
ey d
o ha
ve p
addi
ng
caption-side: top
defa
ult
bottom
left
right
Disp
lay
Mod
es fo
r XM
L Ta
bles
In
XM
L, e
lem
ents
that
nee
d to
form
tab
le m
ay
have
diff
eren
t nam
es:
table table
inline-table
tr table-row
col table-column
td, th table-cell
caption table-caption
tbody table-row-group
thead table-header-group
tfoot table-footer-group
col table-column-group
Med
ia-S
peci
fic S
tyle
She
ets a
nd P
rint
ing
@media screen {
body { font-family: Georgia, serif;
}
}
@media print {
body { font-family: Times, serif;
font-size: 11pt; }
}
h1 { font-size: 2em }
...
Med
ia T
ypes
(C
SS1
did
not s
uppo
rt m
edia
typ
es a
t all)
screen
aural
braille
Brai
lle o
n an
ele
ctro
nic
disp
lay
embossed
Brai
lle o
n pa
per
handheld
projection
tty
elec
tron
ic p
lain
-tex
t disp
lays
tv
tele
visio
ns
all
rule
s fo
r al
l dev
ices
Prin
t-Sp
ecifi
c Pr
oper
ties:
Page
Bre
aks
page-break-before:
auto
always
avoid
left
alw
ays,
and
jum
p to
a le
ft pa
ge if
nec
essa
ry
right
alw
ays,
and
jum
p to
a ri
ght p
age
page-break-after:
sam
e va
lues
page-break-inside:
avoid | auto
(def
ault) t
and
audi
ence
s.
Born
in B
onn,
Ger
man
y, h
e m
oved
to V
ienn
a, A
ustr
ia, i
n hi
s ea
rly tw
entie
s, an
d se
ttle
d th
ere,
st
udyi
ng w
ith Jo
seph
Hay
dn a
nd
quic
kly
gain
ing
a re
puta
tion
as a
vi
rtuo
so p
iani
st....
Unu
sual
ly
amon
g hi
s co
ntem
pora
ries,
he
wor
ked
as a
free
lanc
e co
mpo
ser,
arra
ngin
g su
bscr
iptio
n co
ncer
ts
and
bein
g su
ppor
ted
by a
nu
mbe
r of w
ealth
y pa
tron
s w
ho
cons
ider
ed h
is gi
fts
extr
aord
inar
y.
Am
ong
his
mos
t wid
ely-
Prin
t-Sp
ecifi
c Pr
oper
ties:
Wid
ows &
Orp
hans
widows: <integer>
orphans: <integer>
Def
ault
for b
oth
is 2;
this
mea
ns th
at a
t lea
st t
wo
lines
from
the
end
of th
e pa
ragr
aph
will
stay
to
geth
er
Prin
t-Sp
ecifi
c Pr
oper
ties:
Spec
ifyin
g Pa
ges
@page { margin: 10%;
perc
enta
ge o
f wid
th
size: portrait; }
Mar
gins
in %
or a
bsol
ute
unit
s (n
ot e
m),
size
in
abso
lute
uni
ts (u
sual
ly n
ot u
sefu
l) or
auto
, landscape
, or p
ortrait
Ps
eudo
-cla
sses
: @page :left
@page :right
@page :first
Prin
t-Sp
ecifi
c Pr
oper
ties:
Nam
ed P
ages
@page rotated { size: landscape }
table.verywide { page: rotated }
Nam
ed p
ages
can
hav
e ar
bitr
ary
nam
es
Exte
rnal
Sty
le S
heet
s: Li
nkin
g <html>
<head>
...
<link rel="stylesheet"
type="text/css"
href="http://www.w3.org/..." />
<style type="text/css">
h1 { color: red }
over
rides
the
link'
s ru
les
</style>
The media
att
ribut
e of
the
link
can
spec
ify th
e m
edia
Exte
rnal
Sty
le S
heet
s: @
impo
rt
@import "tau-cs.css"
h1 { color: red }
over
rides
rule
s in
the
impo
rted
styl
e sh
eets
Im
port
ing
wor
ks s
imila
rly to
link
ing
It c
an b
e us
ed to
cre
ated
mul
tiple
sty
les
that
are
lin
ked
into
doc
umen
ts, b
ut a
re a
ll ba
sed
on a
sin
gle
mas
ter s
tyle
-she
ets
with
sm
all m
odifi
catio
ns
Casc
adin
g Th
ere
can
be s
ever
al ru
les
that
app
ly to
a s
ingl
e el
emen
t: fr
om th
e do
cum
ent's
sty
le s
heet
, fro
m th
e br
owse
r's, f
rom
the
user
's st
yle
shee
t; po
ssib
ly e
ven
seve
ral r
ules
from
the
sam
e st
yle
shee
t C
SS a
lway
s se
lect
s on
e of
the
rule
s an
d ap
plie
s it
The
sele
ctio
n pr
oces
s is
calle
d ca
scad
ing
Casc
adin
g: A
ssig
ning
Impo
rtan
ce
body {
color: black !important ;
background-color: white !important ;
}
!imporant
rule
s ov
errid
e al
l oth
ers
docu
men
t sty
le s
heet
s >
use
r sty
le s
heet
s sp
ecifi
c ru
les
> g
ener
al ru
les
sort
the
rest
by
the
orde
r giv
en
Inhe
rita
nce
If no
rule
app
lies,
the
valu
e fo
r the
pro
pert
y is
usua
lly in
herit
ed fr
om th
e pa
rent
in th
e do
cum
ent
But i
f the
re is
no
rule
in th
e do
cum
ent s
heet
, for
ex
ampl
e, th
e va
lue
may
not
nec
essa
rily
be
inhe
rited
from
the
pare
nt ru
le in
the
sam
e sh
eet:
the
user
may
spe
cify
a s
peci
fic ru
le!
To a
void
that
, all
prop
ertie
s ca
n ac
cept
the
inherit
val
ue; t
his
forc
es in
herit
ance