Disen0We 0 2o Edicion

Diseñ0We) ( 0 ( \
2 º E d i c i ó n
A l i c i a D u r a n g o
D i s e ñ o W e b
c o n
C S S
2ª E d i c i ó n
Alicia D u r a n g o
C o p y r i g h t © 2 0 1 5 Alicia D u r a n g o
I S B N - 1 3 : 9 7 8 - 1 5 1 5 0 5 2 7 8 4
T a b l a d e c o n t e n i d o
I N T R O D U C C I Ó N A C S S 1 1
L A SINTAXIS D E C S S 1 1
S E L E C T O R E S D E G R U P O 1 5
S E L E C T O R E S D E C L A S E 1 5
S E L E C T O R D E I D E N T I F I C A C I Ó N 1 8
P O S I C I O N A M I E N T O A B S O L U T O Y P O S I C I O N A M I E N T O R E L A T I V O 2 5
F O R M A T O C O N L A S H O J A S D E E S T I L O S 2 7
V E N T A J A S D E U S A R C S S 2 7
G A N A R G A N A R T I E M P O Y FLEXIBILIDAD 2 7
E L M E C A N I S M O D E C A S C A D A 2 8
P R O B L E M A S C O N L O S N A V E G A D O R E S 3 0
E S C R I T U R A Y C O M B I N A C I Ó N D E E S T I L O S 3 3
I N S E R T A R U N A H O J A D E ESTILO 3 3
H O J A S D E ESTILOS E N U N A R C H I V O E X T E R N O 3 6
C Ó M O C O M B I N A R E S T I L O S C O N C U R R E N T E S 3 7
E S T A B L E C E R C O L O R E S E N C S S 4 3
C O M O E X P R E S A R L O S C O L O R E S 4 3
N O M B R E S D E C O L O R 4 5
F O R M A S D E DEFINIR L O S C O L O R E S 4 6
P R O P I E D A D E S D E L O S E L E M E N T O S B A C K G R O U N D 4 9
P R O P I E D A D E S D E L O S F O N D O S ( B A C K G R O U N D ) : 4 9
U N I D A D E S D E M E D I D A 5 5
M E D I C I Ó N D E D I S T A N C I A S E N U N A P Á G I N A H T M L 5 5
D E F I N I C I Ó N D E C O L O R E S 5 6
P R O P I E D A D E S D E L T E X T O 5 7
P R O P I E D A D E S D E L T E X T O 5 7
C O N T R O L A R E L T I P O D E L E T R A 6 1
P R O P I E D A D E S 6 1
L O S B O R D E S 6 5
C O N T R O L A R L O S B O R D E S D E L O S E L E M E N T O S 6 9
P R O P I E D A D E S D E " P A D D I N G " 7 3
C O N T R O L A R L A S D I M E N S I O N E S D E L O S E L E M E N T O S 7 7
iv
D i s e ñ o W e b c o n C S S
P R O P I E D A D E S D E L A S D I M E N S I O N E S 7 7
P O S I C I O N A M I E N T O D E L O S E L E M E N T O S 8 1
F O R M A T O D E L I S T A S 8 3
P R O P I E D A D E S D E C L A S I F I C A C I Ó N 8 5
P S E U D O - C L A S E S 8 9
SINTAXIS 8 9
P S E U D O - C L A S E S P A R A E N L A C E S 8 9
L A P S E U D O - C L A S E : FIRST-CHILD 9 0
L A P S E U D O - C L A S E : L A N G 9 4
L I S T A D O D E P S E U D O - C L A S E S 9 4
P S E U D O - E L E M E N T O S 9 7
SINTAXIS 9 7
E L P S E U D O - E L E M E N T O FIRST-LETTER 9 9
L O S P S E U D O - E L E M E N T O S E N C L A S E S C S S 1 0 1
V A R I O S P S E U D O - E L E M E N T O S 1 0 1
L O S P S E U D O - E L E M E N T O S : B E F O R E Y : A F T E R 1 0 2
v
LISTA D E L O S P S E U D O - E L E M E N T O S 1 0 4
T I P O S D E S O P O R T E 1 0 5
L A R E G L A @ M E D I A 1 0 5
T I P O S D E S O P O R T E 1 0 7
M A T E R I A L D E R E F E R E N C I A D E C S S 1 0 9
F O N D O S ( B A C K G R O U N D ) 1 0 9
B O R D E S ( B O R D E R ) 1 1 1
P R O P I E D A D E S D E CLASIFICACIÓN 1 1 4
C O N T R O L D E L O S T A M A Ñ O S D E L O S E L E M E N T O S 1 1 6
T I P O S D E L E T R A 1 1 7
G E N E R A R C O N T E N I D O S 1 2 0
LISTAS Y M A R C A D O R E S 1 2 1
M Á R G E N E S 1 2 3
L Í N E A S D E C O N T O R N O 1 2 4
F O R M A T O D E T A B L A S 1 2 7
F O R M A T O D E T E X T O 1 2 8
I M P R I M I R 1 3 1
P R O P I E D A D E S 1 3 1
vi
C S S 3 1 3 3
S E L E C T O R E S D E A T R I B U T O S 1 3 3
P S E U D O C L A S E S 1 3 6
E L E M E N T O D E C O M B I N A C I Ó N 1 4 9
F U N C I O N E S P A R A DEFINIR V A L O R E S 1 5 0
P R O P I E D A D H Y P H E N S 1 5 4
L A D I R E C T I V A :: @ F O N T - F A C E 1 5 6
C O L O R E S E N C S S 3 1 5 9
T E X T - S H A D O W 1 6 1
N I N G U N O | [ < S H A D O W > , ] * < S H A D O W > 1 6 1
N I N G U N O 1 6 1
T O D O S L O S E L E M E N T O S Y C O N T E N I D O S G E N E R A D O S 1 6 1
S Í 1 6 1
N O D I S P O N I B L E 1 6 1
V I S U A L 1 6 1
U N C O L O R T R E S P A S O S C S S 1 6 1
E L E F E C T O D E D E S E N F O Q U E 1 6 2
C O M B I N A C I Ó N D E E F E C T O S 1 6 4
vii
T R A N S I C I O N E S 1 6 5
C O N S T R U I R U N A P L A N T I L L A C O N P R O P I E D A D E S C S S 3 1 7 0
E L P S E U D O - E L E M E N T O : : S L O T () 1 7 4
C O N C L U S I O N E S 1 8 3
R E F E R E N C I A B I B L I O G R Á F I C A 1 8 5
viii
P R Ó R R O G O
E s t a p u b l i c a c i ó n está d e s t i n a d a a p r o p o r c i o n a r el material útil e
i n f o r m a t i v o . E s t a p u b l i c a c i ó n n o tiene la i n t e n c i ó n d e c o n s e g u i r q u e u s t e d
s e a u n m a e s t r o d e las b a s e s d e datos, s i n o q u e c o n s i g a o b t e n e r u n a m p l i o
c o n o c i m i e n t o general d e las b a s e s d e d a t o s p a r a q u e c u a n d o t e n g a q u e
tratar c o n estas, u s t e d y a p u e d a c o n o c e r los c o n c e p t o s y el f u n c i o n a m i e n t o
d e las m i s m a s . N o m e h a g o r e s p o n s a b l e d e los d a ñ o s q u e p u e d a n o c a s i o n a r
el m a l u s o del c ó d i g o f u e n t e y d e la i n f o r m a c i ó n q u e se m u e s t r a e n este
libro, s i e n d o el ú n i c o objetivo d e este, la i n f o r m a c i ó n y el estudio d e las
b a s e s d e d a t o s e n el á m b i t o informático. A n t e s d e realizar n i n g u n a p r u e b a
e n u n e n t o r n o real o d e p r o d u c c i ó n , realice las pertinentes p r u e b a s e n u n
e n t o r n o B e t a o d e p r u e b a .
E l a u t o r y editor n i e g a n e s p e c í f i c a m e n t e t o d a re sp onsabilidad p o r cualquier

responsabilidad, pérdida, o riesgo, p e r s o n a l o d e otra m a n e r a , e n q u e se
incurre c o m o c o n s e c u e n c i a , directa o indirecta me nte, del u s o o aplicación
d e cualesquiera c o n t e n i d o s d e es te libro.
T o d a s y t o d o s los n o m b r e s d e p r o d u c t o s m e n c i o n a d o s e n este libro s o n

m a r c a s c o m e r c i a l e s d e s u s respectivos propietarios. N i n g u n o d e estos
propietarios h a p a t r o c i n a d o el p r e s e n t e libro.
P r o c u r e leer s i e m p r e t o d a la d o c u m e n t a c i ó n p r o p o r c i o n a d a p o r los
fabricantes d e s o f t w a r e usar s u s p r o p i o s c ó d i g o s fuente. E l a u t o r y el editor
n o se h a c e n r e s p o n s a b l e s d e las r e c l a m a c i o n e s realizadas p o r los fabricantes.
9
1 0
I n t r o d u c c i ó n a C S S
C C S e s el f o r m a t o r e c o m e n d a d o p a r a las p á g i n a s escritas e n f o r m a t o
H T M L e n b a s e a los e s t á n d a r e s d e " C a s c a d i n g Style S h e e t s " ( h o j a s d e
estilo e n c a s c a d a ) , p u b l i c a d o p o r el W o r l d W i d e W e b C o n s o r t i u m
( W 3 C ) .
El u s o d e e s t e e s t á n d a r W e b n o s a h o r r a t i e m p o , d a c o n s i s t e n c i a y
f acilita e n g r a n m e d i d a la e scritura d e p á g i n a s W e b , e n e s t e libro v a m o s
a a p r e n d e r a utilizar las h o j a s d e estilo e n c a s c a d a (estilos C S S ) p a r a
c r e a r p á g i n a s W e b m á s flexibles y ligeras, c o n t r o l a n d o s u a s p e c t o
g ráfico c o n m a y o r p r e c i s i ó n y c o n m a y o r facil idad p a r a la c o r r e c c i ó n d e
e r r o r e s .
P r i m e r c o n t a c t o
P a r a c o m e n z a r h a r e m o s c o s a s m u y s i m p l e s y r á p i d a s , c o m
e n z a r e m o s a
v e r a l g u n o s e j e m p l o s y h a r e m o s a l g u n o s ejercicios pr ácticos. M á s
a d e l a n t e t e n d r e m o s u n c a p í t u l o e n el q u e s e a n a l i z a r á la
s i t u a c i ó n q u e
l levó a la W 3 C a c r e a r e s t e p a t r ó n y d e s p u é s d e v a r i o s c a p í t u l o s n o s
t o m a r e m o s e s t e t e m a c o n m á s s e r i e d a d y h a r e m o s d o c e n a s d e
e jercicios prácticos.
L a sintaxis d e C S S
L a sintaxis d e las d e f i n i c i o n e s C S S c o n s t a d e d o s p a r t e s : u n s e l e c t o r y
u n a d e c l a r a c i ó n . H e a q u í u n e j e m p l o :
h 1 {color: g r e e n }
h 1 --> S e l e c t o r
1 1
color: g r e e n --> D e c l a r a c i ó n
E n e s t e e j e m p l o , el s e l e c t o r h 1 d i c e q u e el estilo s e aplica a los

e l e m e n t o s h 1 y la d e f i n i c i ó n d i c e q u e el c o l o r d e l t e x t o d e e s t o s
e l e m e n t o s d e b e s e r d e c o l o r v e r d e ( " g r e e n " ) .
L a d e c l a r a c i ó n s e e n c i e r r a e n t r e ll a v e s ({...}) y p u e d e c o n t e n e r v a r i a s
definiciones. C a d a definición c o n s t a d e u n p a r p r o p i e d a d / v a l o r , d o n d e
el v a l o r d e la p r o p i e d a d e s t á s e p a r a d o p o r e l c a r á c t e r (:). P u e d e v e r s e d e
u n a m a n e r a m á s gráfica d e la s i g u i e n t e m a n e r a :
s e l e c t o r { p r o p i e d a d : v a l o r }
El s i g u i e n t e e j e m p l o le p e r m i t e p r o b a r d e i n m e d i a t o lo i n d i c a d o :
< h t m l >
< h e a d >
< s t y l e t y p e = " t e x t / c s s " >
h 1 {color: g r e e n }
< / s t y l e >
< / h e a d >

< h 1 > E s t a c a b e c e r a e s d e c o l o r v e r d e . < / h 1 >

1 2
< / h t m l >
El s e l e c t o r e s n o r m a l m e n t e el n o m b r e d e u n e l e m e n t o H T M L p e r o
t a m b i é n p u e d e s e r u n s e l e c t o r d e clase, u n I D d e s e l e c t o r o u n s e l e c t o r
d e c o n t e x t o ( e s t o s c o n c e p t o s s e a c l a r a r á n m á s a d e l a n t e ) .
Si el v a l o r q u e q u e r e m o s d a r a la p r o p i e d a d t i e n e m á s d e u n a p a l a b r a
la p u e d e p o n e r e n t r e comillas, c o m o s e m u e s t r a a c o n t i n u a c i ó n :
< h t m l >
< h e a d >
p { f o n t - f a m i l y : " C o m i c S a n s M S " }
< / s t y l e >
< / h e a d >


El t e x t o d e e s t e p á r r a f o t i e n e el t i p o d e letra " C o m i c S a n s M S " .


< / h t m l >
1 3
D e n t r o d e llaves ({ }) p u e d e p o n e r m ú l t i p l e s d e f i n i c i o n e s s e p a r a d a s
p o r el c a r á c t e r ";" ( p u n t o y c o m a ) . El s i g u i e n t e e j e m p l o d e f i n e tres
p r o p i e d a d e s p a r a el e l e m e n t o , q u e s o n la a l i n e a c i ó n , el c o l o r d e
t e x t o y la f u e n t e .
< h t m l >
< h e a d >
text-align: c e n t e r ;
color: g r e e n ;
f o n t - f a m i l y : arial
< / s t y l e >
< / h e a d >


El t e x t o d e e s t e p á r r a f o t i e n e el t i p o d e letra "Arial", e s d e c o l o r
v e r d e y s e a l i n e a e n el c e n t r o .

1 4

< / h t m l >
P a r a h a c e r las d e f i n i c i o n e s m á s legibles h e m o s p u e s t o c a d a u n a e n u n a
línea d i f e r e n t e p e r o t a m b i é n s e p o d r í a h a b e r escrito e n u n a s o l a línea.
S e l e c t o r e s d e g r u p o
Si t i e n e q u e ap licar est ilos a m á s d e u n e l e m e n t o p u e d e a g r u p a r los
s e l e c t o r e s q u e c o m p a r t e n la s m i s m a s definicion es. P a r a ello s e e s c r i b e n
u n o tras o t r o s e p a r a d o s p o r u n a c o m a . E n el s i g u i e n t e e j e m p l o h 1 y los
e l e m e n t o s h a s t a h 6 c o m p a r t e n l a m i s m a definic ión:
h 1 , h 2 , h 3 , h 4 , h 5 , h 6
color: g r e e n
S e l e c t o r e s d e c l a s e
L o s s e l e c t o r e s d e c l a s e p e r m i t e n e s t a b l e c e r d i f e r e n t e s estilos q u e s e
p u e d e n a plicar al m i s m o e l e m e n t o . I m a g i n e q u e u s t e d n e c e s i t a t e n e r
d o s p á r r a f o s d i f e r e n t e s e n el d o c u m e n t o : u n o a l i n e a d o a la d e r e c h a y
o t r o a l i n e a d o al c e n t r o . A s í e s c o m o lo s s e l e c t o r e s d e c l a s e h a c e n q u e
1 5
e s t a t a r e a s e a m u y fácil:
< h t m l | >
< h e a d >
p . d e r e c h a T e x t - a l i g n : r i g h t }
p . c e n t r o T e x t - a l i g n : c e n t e r }
< / s t y l e >
< / h e a d >


E s t e p á r r a f o e s t á a l i n e a d o a l a d e r e c h a .


E s t e p á r r a f o e s t á a l i n e a d o a l c e n t r o .


< / h t m l >
1 6
N o t a : El a t r i b u t o d e clase, al igual q u e c u a l q u i e r o t r o atributo, s ó l o s e

p u e d e especificar u n a v e z e n u n e l e m e n t o d a d o . El e j e m p l o s i g u i e n t e e s
i n c o r r e c t o :

E s t e p á r r a f o t i e n e u n e r r o r c a u s a d o p o r la utilización r e p e t i d a d e l
a t r i b u t o d e clase.

L o s s e l e c t o r e s d e c l a s e t a m b i é n s e p u e d e n defin ir sin p o n e r el n o m b r e
d e u n e l e m e n t o e n el principio d e la definición. C u a n d o e s t o s u c e d e las
d e f i n i c i o n e s s e p u e d e n aplicar a c u a l q u i e r e l e m e n t o c u y o a t r i b u t o d e
c l a s e t i e n e el valor. El e j e m p l o s i g u i e n t e d e f i n e u n a c l a s e q u e s e p u e d e
utilizar c o n c u a l q u i e r e l e m e n t o H T M L :
< h t m l >
< h e a d >
. c e n t r o {text-align: c e n t e r }
< / s t y l e >
< / h e a d >

< h 2 c l a s s = " c e n t r o " >
E n c a b e z a d o a l i n e a d o al c e n t r o
1 7
< / h 2 >

E s t e p á r r a f o t a m b i é n s e a l i n e a c o n el c e n t r o .


< / h t m l >
S e l e c t o r d e I d e n t i f i c a c i ó n
El s e l e c t o r d e I D e s d i f e r e n t e d e l s e l e c t o r d e c l a s e p o r q u e s e aplic a a
u n s o l o e l e m e n t o d e la p á g i n a . L a s r e g l a s H T M L d i c t a n q u e los v a l o r e s
d e l a t r i b u t o I D n o s e p u e d e n repetir e n la m i s m a p á g i n a . D e ello s e
d e s p r e n d e q u e el n ú m e r o d e e l e m e n t o s d e i d e n t i d a d e n u n
d e t e r m i n a d o d o c u m e n t o e s u n o o e s c e r o .
< h t m l >
< h e a d >
< s t y l e t y p e = t e x t / c s s >
p # p a r a 1
color: r e d
1 8
< / s t y l e >
< / h e a d >


E s t e p á r r a f o e s t á a l i n e a d o al c e n t r o y e s d e c o l o r rojo.


< / h t m l >
L a s e l e c c i ó n d e la r e g l a p a r a el estilo d e f i n i d a e n el s i g u i e n t e e j e m p l o
i n d i c a q u e s ó l o s e p u e d e aplicar a u n e l e m e n t o q u e t i e n e el v a l o r
" p a r a 1 " e n el a t r i b u t o ID:
Si trata d e aplicar e s t a r e g l a a u n e l e m e n t o < d i v > al q u e d a m o s v a l o r

p a r a 1 al a t r i b u t o d e id v e m o s q u e el n a v e g a d o r n o aplica los
atributos:
< h t m l >
< h e a d >
p # p a r a 1
1 9
color: r e d
< / s t y l e >
< / h e a d >

< d i v i d = " p a r a 1 " >
E s t e e l e m e n t o n o e s t á a l i n e a d o c o n el c e n t r o y
n o t i e n e el c o l o r rojo, y a q u e n o e s u n p á r r a f o .
< / d i v >

< / h t m l >
Si q u e r e m o s q u e e s t a r e g l a s e a p l i q u e a c u a l q u i e r e l e m e n t o q u e t e n g a
el id p a r a 1 t e n e m o s q u e p o n e r l o d e la s i g u i e n t e m a n e r a :
# p a r a 1
2 0
color: r e d
L a
r e g l a a n t e r i o r s e aplica a c u a l q u i e r e l e m e n t o q u e t e n g a el id
c o r r e c t o p o r q u e el s e l e c t o r * d i c e q u e s e aplica a t o d o s los e l e m e n t o s .
E n el s i g u i e n t e e j e m p l o s e aplica al e l e m e n t o < h 1 > :
< h 1 i d = " p a r a 1 " > M e g u s t a la b u e n a m ú s i c a < / h 1 >
Escribir c o m e n t a r i o s e n u n a h o j a d e estilo
V a m o s a insertar c o m e n t a r i o s e n las d e f i n i c i o n e s C S S p a r a explicar el

c ó d i g o q u e h e m o s escrito así s e r á m á s fácil d e e n t e n d e r . C u a n d o m á s
t a r d e v u e l v a a v e r u n a h o j a d e estilo o si c o m p a r t e la h o j a d e estilo c o n
o t r a p e r s o n a , s e r á fácil v e r c ó m o f u n c i o n a .
L o s c o m e n t a r i o s s e r á n i g n o r a d o s p o r el n a v e g a d o r ; p a r a e m p e z a r u n
c o m e n t a r i o e s c r i b a la c a d e n a " / * " al inicio d e l t e x t o d e l c o m e n t a r i o y al
f inal " * / " p a r a t e r m i n a r el c o m e n t a r i o . El s i g u i e n t e e j e m p l o m u e s t r a
c ó m o h a c e r l o :
text-align: C e n t e r ; / * E s t e e s u n c o m e n t a r i o * /
c o l o r : b l a c k ; / * M S I E 5 n o r e c o n o c e los c o m e n t a r i o s ! * /
f o n t - f a m i y : arial
2 1
L a c o l o c a c i ó n d e los e l e m e n t o s e n C S S s e b a s a e n c a j a s
L o s e l e m e n t o s q u e s e p u e d e n v e r e n u n a p á g i n a W e b o c u p a n u n á r e a
d e t e r m i n a d a d e la p á g i n a . E s t a z o n a t i e n e la f o r m a d e u n r e c t á n g u l o o
c u a d r a d o . L a c a j a c o n t i e n e u n e l e m e n t o d e t o d o lo n e c e s a r i o :
c o n t e n i d o , c u r v a s d e nivel, m á r g e n e s y el e s p a c i o e n b l a n c o . L a
s i g u i e n t e figura m u e s t r a d e f o r m a g e n é r i c a las distintas á r e a s q u e
c o n f o r m a n la c a j a d e u n e l e m e n t o .
P a r a d a r s e c u e n t a d e la i m p o r t a n c i a d e e s t a t a b l a h e a q u í a l g u n a s
a c l a r a c i o n e s :
1. El c o n t e n i d o d e l e l e m e n t o e s t á d e n t r o d e u n r e c t á n g u l o
a l r e d e d o r d e l c u a l h a y o t r a s á r e a s .
2. El c o n t e n i d o d e l e l e m e n t o y s u límite ( b o r d e r ) p u e d e n s e r u n
e s p a c i o e n b l a n c o , lo q u e l l a m a m o s el relleno.
3. L o s límites d e los e l e m e n t o s s e l l a m a n b o r d e r . A q u í e s d o n d e
t e r m i n a el e l e m e n t o .
4. El r e c t á n g u l o (caja) q u e c o n t i e n e el e l e m e n t o p u e d e t e n e r
m á r g e n e s ( m a r g i n ) p a r a s e p a r a r l o d e los d e m á s e l e m e n t o s d e la p á g i n a .
L o s m á r g e n e s e s t á n f u e r a d e los límites d e l e l e m e n t o .
2 2
El a n c h o d e u n e l e m e n t o e s t á d e t e r m i n a d o ú n i c a m e n t e a la a n c h u r a
d e s u c o n t e n i d o . D a d o q u e la a n c h u r a d e la c a j a q u e c o n t i e n e el
e l e m e n t o e s t á d a d o p o r la s u m a d e la a n c h u r a d e l c o n t e n i d o m á s el
a n c h o o c u p a d o p o r las líneas d e l m a r g e n ( m a r g i n ) y el e s p a c i o e n b l a n c o
( p a d d i n g ) . L a al t u r a d e u n c o m p o n e n t e s e calcula d e f o r m a a n á l o g a . L o s
m á r g e n e s s i r v e n p a r a m o v e r e l r e c t á n g u l o (caja) d e l e l e m e n t o c o n
r e l a c i ó n a s u p o s i c i ó n n o r m a l .
L o s e l e m e n t o s d e b l o q u e :
< h t m l >
< h e a d >
<title></title>
< / h e a d >

< h 1 > L a s c a b e c e r a s s o n e l e m e n t o s d e l b l o q u e < / h 1 > t e x t o n o r m a l
 L o s p á r r a f o s s o n e l e m e n t o s d e l b l o q u e 
< d i v > L o s e l e m e n t o s & l t ; d i v & g t ; y & l t ; t a b l e & g t ; t a m b i é n s o n

e l e m e n t o s d e l b l o q u e
< / d i v >

< / h t m l >
2 3
L o s E l e m e n t o s inline :
< h t m l >
< h e a d >
<title></title>
< / h e a d >


L o s e l e m e n t o s & l t ; b & g t ; ( b o l d ) ,
 & l t ; i & g t ; (itálico),
< s t r o n g > & l t ; s t r o n g & g t ; ( t e x t o f u e r t e ) < / s t r o n g > ,
< c o d e > & l t ; c o d e & g t ; ( c ó d i g o d e c o m p u t a d o r ) < / c o d e >
s o n e j e m p l o s d e e l e m e n t o s "inline".


< / h t m l >
2 4
P o s i c i o n a m i e n t o a b s o l u t o y p o s i c i o n a m i e n t o r e l a t i v o
El p o s i c i o n a m i e n t o n o s i n d i c a el o r d e n d e c o l o c a c i ó n d e los e l e m e n t o s
e n u n a p á g i n a H T M L q u e , p o r lo g e n e r a l , c o n s i s t e e n d i s e ñ a r l o s a
m e d i d a q u e s u r g e n . E s t e m é t o d o s e l l a m a p o s i c i o n a m i e n t o relativo.
T o d a s las h o j a s d e estilo C S S i n t r o d u j e r o n u n n u e v o a s p e c t o : los

e l e m e n t o s d e b l o q u e s e p u e d e n c o l o c a r e n c u a l q u i e r l u g a r d e la p á g i n a
y p u e d e n s o l a p a r s e e n t r e sí. E s t e m é t o d o s e l l a m a p o s i c i o n a m i e n t o
a b s o l u t o , y a q u e n o s p e r m i t e indicar la u b i c a c i ó n e x a c t a e n la p á g i n a
d o n d e s e d e s e a q u e el e l e m e n t o s e p u e d a p o n e r . Si e s e l u g a r y a e s t á
o c u p a d o p o r o t r o e l e m e n t o n o h a y n i n g ú n p r o b l e m a y a q u e los estilos
C S S p e r m i t e n la s u p e r p o s i c i ó n d e e l e m e n t o s . E s c o m o si la p á g i n a f u e r a
u n a m e s a s o b r e la q u e p o d e m o s p o n e r e n c i m a o t r o s e l e m e n t o s .
E j e m p l o d e aplicación:
< h t m l >
< h e a d >
<title></title>
< / h e a d >


E s t e p á r r a f o e s t á e n la p o s i c i ó n n o r m a l (relativa.)


E s t e p á r r a f o e s t á e n u n a p o s i c i ó n a b s o l u t a .
2 5


E s t e p á r r a f o t a m b i é n e s t á e n u n a p o s i c i ó n relativa.


< / h t m l >
2 6
F o r m a t o c o n l a s h o j a s d e e s t i l o s
V e n t a j a s d e u s a r C S S
L o s estilos C S S f u e r o n a ñ a d i d o s p o r el W 3 C e n H T M L 4 p a r a r e s o l v e r
los g r a v e s p r o b l e m a s q u e a f e c t a b a n a la c a l i d a d d e las p á g i n a s escritas
e n H T M L y o b s t a c u l i z a b a n s u m a n t e n i m i e n t o .
L a utilización d e h o j a s d e estilo e x t e r n a s , a h o r r a n t i e m p o , a p o r t a n
flexibilidad y a u m e n t a n la c o h e r e n c i a d e las p á g i n a s q u e c o m p o n e n u n
sitio W e b .
C u a n d o g u a r d a m o s los estilos e n u n a r c h i v o e x t e r n o y los a p l i c a m o s a

t o d a s las p á g i n a s d e n u e s t r o site, l a m o d i f i c a c i ó n d e d i v e r s a s c u a l i d a d e s
d e l a s p e c t o gráfico s e c o n v i e r t e e n u n a t a r e a m u y sencilla.
L a s p á g i n a s q u e utilizan estilos C S S , a d e m á s d e s e r m á s fáciles d e

escribir, t a m b i é n s o n m á s ligeras y a p a r e c e n r á p i d a m e n t e e n el
n a v e g a d o r .
G a n a r g a n a r t i e m p o y flexibilidad
L o s estilos C S S d e f i n e n el a s p e c t o gráfico d e los e l e m e n t o s H T M L . L o s
estilos p u e d e n s e r d e f i n i d o s e n u n a h o j a d e estilos e x t e r n a o
i n t e r n a m e n t e e n el p r o p i o d o c u m e n t o H T M L . C u a n d o s e d e f i n e e n u n
a r c h i v o e x t e r n o , los estilos p u e d e n s e r c o m p a r t i d o s p o r m u c h a s
p á g i n a s , lo q u e le p e r m i t e c a m b i a r i n s t a n t á n e a m e n t e la a p a r i e n c i a
visual d e t o d a s las p á g i n a s m o d i f i c a n d o s ó l o el a r c h i v o e n el q u e s e
d e f i n e n los estilos. A n t e s , c u a n d o u s á b a m o s las t é c n i c a s a n t i g u a s p a r a
realizar m o d i f i c a c i o n e s e n el a s p e c t o gr áfico d e u n sitio W e b , n o s
v e í a m o s o b l i g a d o s a c a m b i a r t o d o s los e l e m e n t o s < f o n t > y t o d a s las
2 7
t a b l a s utilizadas e n las p á g i n a s c o n el m i s m o f o r m a t o . E s t o t e n í a q u e
h a c e r s e e n c a d a p á g i n a . A l utiliza r los estil os C S S , c o n c a m b i a r a l g u n a s
d e f i n i c i o n e s e n u n a s o l a h o j a d e estilos p o d e m o s actual izar al i n s t a n t e
c i e n t o s o m i l e s d e p á g i n a s c o n el m í n i m o e s f u e r z o . L o s e r r o r e s s e
p r o d u c e n c o n m u c h a m e n o r f r e c u e n c i a y s o n m u c h o m á s fáciles d e
s o l u c i o n a r .
L a facilidad c o n la q u e s e p u e d e n h a c e r c a m b i o s d a m a y o r flexibilidad a
la p á g i n a W e b y m e j o r a s u r e n d i m i e n t o . A la v e z las p á g i n a s s o n m á s
ricas y m á s ligeras.
El m e c a n i s m o d e C a s c a d a
L o s estilos C S S n o s d a n m u c h a li bertad a la h o r a d e definir los estilos.

E n el m i s m o d o c u m e n t o s e p u e d e utilizar u n o o m á s a r c h i v o s e x t e r n o s ,
definir los es tilos e n la s e c c i ó n h e a d d e l d o c u m e n t o o utilizar el a t r i b u t o
d e estilo d e los e l e m e n t o s H T M L . El n a v e g a d o r l e e las d e f i n i c i o n e s d e
t o d o s los est ilos y c u a n d o a p a r e c e n estilos r e p e t i d o s los c o m b i n a e n u n
s o l o estilo s i g u i e n d o a l g u n a s r e g l a s s i m p l e s .
U n a d e las r e g l a s d i c e q u e al e n c o n t r a r varias v e r s i o n e s p a r a u n m i s m o
estilo el n a v e g a d o r a l m a c e n a el ú l t i m o e n c o n t r a d o . O t r a r e g l a d i c e q u e
a l g u n o s esti los s o n h e r e d a d o s p o r e l e m e n t o s q u e s e e n c u e n t r a n d e n t r o
d e o t r o s e l e m e n t o s .
L a s e t i q u e t a s q u e d e f i n e n los e l e m e n t o s d e H T M L f u e r o n d i s e ñ a d a s
p a r a definir el c o n t e n i d o . El p r o g r a m a d o r d e H T M L n u n c a t u v o la
i n t e n c i ó n d e utilizar e s t e l e n g u a j e p a r a definir los estilos gráficos d e las
p á g i n a s . L o s e l e m e n t o s H T M L s e d i s e ñ a r o n p a r a d e c l a r a r c o s a s c o m o
" E s t o e s u n p á r r a f o " o " E s t o e s u n a c a b e c e r a " , p o n i e n d o las e t i q u e t a s
< h 1 > o a l r e d e d o r d e l t e x t o . L a f o r m a e n la q u e e s t a i n f o r m a c i ó n
d e b í a s e r p r e s e n t a d a g r á f i c a m e n t e e r a u n p r o b l e m a q u e el e x p l o r a d o r
t e n í a q u e r e s o l v e r t e n i e n d o e n c u e n t a el significado d e c a d a e l e m e n t o .
2 8
E s t e c o n c e p t o p e r f e c t a m e n t e r a c i o n a l e r a m u y a p r o p i a d o al p r o p ó s i t o
d e l as p á g i n a s q u e e s t a b a n e s c r i b i e n d o y c o m p a r t i e n d o t e x t o s e n la
W e b p e r o la r á p i d a a c e p t a c i ó n d e la W e b h a h e c h o q u e las p e r s o n a s
q u e s e u s a n e s t e m e d i o le d e n i m p o r t a n c i a al d i s e ñ o .
El i n t e r é s d e las p e r s o n a s d i o l u g a r a q u e s e h i c i e r a n e s f u e r z o s p a r a
c r e a r p á g i n a s c o n m u c h o s gráficos m á s al g u s t o d e los d i s e ñ a d o r e s .
U n o d e los e f e c t o s m á s i m p o r t a n t e s d e e s t o s e s f u e r z o s f u e u n a
t e r g i v e r s a c i ó n c o m p l e t a d e los e f e c t o s d e m u c h o s e l e m e n t o s . El
e l e m e n t o < t a b l e > , p o r e j e m p l o , e s t á d i s e ñ a d o s ó l o p a r a m o s t r a r t a b l a s
d e d a t o s n u m é r i c o s p e r o los d i s e ñ a d o r e s c o m e n z a r o n a utilizarlo p a r a
c o l o c a r los e l e m e n t o s e n varias p a r t e s d e las p á g i n a s s o b r e d i s e ñ o s c a d a
v e z m á s c o m p l e j o s .
P e r o e s t o n o e r a sufici ente p o r q u e h a b í a c o s a s q u e n o s e p o d í a n h a c e r
u tilizando s ó l o la i n f o r m a c i ó n d i s p o n i b l e . P a r a d a r a los d i s e ñ a d o r e s lo
q u e e s t a b a n p i d i e n d o , a los c r e a d o r e s d e n a v e g a d o r e s les p a r e c i ó u n a
b u e n a i d e a i n v e n t a r s u s p r o p i a s e t i q u e t a s y a g r e g a r a t r i b u t o s estilísticos
a los y a e x i s t e n t e s . E s t a s e x t e n s i o n e s p e r m i t e n u s a r H T M L p a r a
p r o p o r c i o n a r d i f e r e n t e s c o l o r e s y estilos al t e x t o y apl icar o t r o f o r m a t o .
L a s iniciativas d e lo e s d e e s t a s n u e v a s
s c r e a d o r e t i q u e t a s y a t r i b u t o s
i g n o r a r o n p o r c o m p l losofía e n la q u e s
e t o la fi e b a s ó el c r e a d o r d e
H T M L , T i m B e r n e r s L e e , p a
r a d e s a r r o l l a r el l e n g u a j e . L a s n u e v a s
e t i q u e t a s ( c o m o < f o n t > ) d i e r o
n m á s i m p o r t a n c i a a la a p a r i e n c i a gráfica
q u e p r o d u c í a n q u e al significado d e lo q u e c o n t e n í a n .
A p e s a r d e t o d a s las c o n t r a i n d i c a c i o n e s , la c r e a c i ó n y p r o p a g a c i ó n
r á p i d a d e las e t i q u e t a s d i o l u g a r a u n a s i t u a c i ó n e n la q u e el c o n t e n i d o
d e las p á g i n a s s e m e z c l ó c o n los a s p e c t o s estilísticos. E s t o llevó a q u e , al
f inal d e la d é c a d a d e 1 9 9 0 , el c ó d i g o H T M L e s t a b a e n u n e s t a d o e n q u e
e r a m u y difícil c r e a r y m a n t e n e r u n d i s e ñ o p a r a m á s d e u n o s p o c o s
s itios W e b . El c o n t e n i d o d e las p á g i n a s n o e r a n m á s q u e u n a s e n o r m e s
" s o p a s d e e t i q u e t a s " m a l o r g a n i z a d a s c u y o significado n o e s t a b a n a d a
2 9
claro.
E s t e p r o b l e m a c o m e n z ó a s e r
r e s u e l t o p o r el W o r l d W i d e W e b
C o n s o r t i u m ( W 3 C ) c o n la c r e a c i ó n e l
d os e s t á n d a r e s H T M L 4, C S S , X M L y
X H T M L . El H T M L d e b e s e r u s a d o e n c o n j u n t o c o n los estilos C S S y el
c o n t e n i d o s e e x p r e s a e n H T M L c o n los estilos d e C S S .
E s t e n u e v o m o d e l o p a r a la c r e a c i ó n d e p á g i n a s e r a b i e n s o p o r t a d o p o r
t o d o s los n a v e g a d o r e s d o m i n a n t e s : M o z i l l a , M i c r o s o f t I n t e r n e t E x p l o r e r
5 y s u p e r i o r e s y O p e r a 7. E s t a r e a l i d a d h a c e q u e n a d i e t e n g a e x c u s a
p a r a escrib ir m a l c ó d i g o H T M L .
P r o b l e m a s c o n los n a v e g a d o r e s
A p e s a r d e q u e los n a v e g a d o r e s a c t u a l e s ( N e t s c a p e 7 / M o z i l l a , M S I E 5 y
s u p e r i o r , O p e r a 7 ) p r o p o r c i o n a n u n b u e n a p o y o p a r a los estilos C S S , e s
n e c e s a r i o l l a m a r la a t e n c i ó n s o b r e el h e c h o d e q u e t o d a v í a h a y a l g u n o s
p r o b l e m a s c u a n d o a p l i c a m o s las t é c n i c a s a v a n z a d a s d e f o r m a t o b a s a d o
e n C S S .
L o s p r o b l e m a s m á s g r a v e s s o n c a u s a d o s p o r M S I E , q u e c o n t i e n e
e r r o r e s q u e le d a n a l g u n a s c o n d u c t a s q u e s e d e s v í a n d e los e s t á n d a r e s
C S S . El e r r o r m á s g r a v e e s el q u e resulta d e la i m p l e m e n t a c i ó n e r r ó n e a
d e l m o d e l o d e d i m e n s i o n a m i e n t o d e los e l e m e n t o s . E s t e e r r o r e s m u y
c o n o c i d o y casi s i e m p r e s e p u e d e s u p e r a r c o n el u s o d e t r u c o s q u e n o
c o m p r o m e t a n el f u n c i o n a m i e n t o d e las p á g i n a s e n o t r o s n a v e g a d o r e s .
A d e m á s d e e s t e e r r o r y o t r o s e r r o r e s m e n o r e s s i e m p r e d e b e n p r e s t a r
a t e n c i ó n al h e c h o d e q u e las i m p l e m e n t a c i o n e s d e e s t á n d a r e s C S S e s t á n
g e n e r a l m e n t e i n c o m p l e t a s . E s t o signif ica q u e n o p o d e m o s c o n t a r c o n
a l g u n a s p r o p i e d a d e s . A p e s a r d e e s t o p o d e m o s e s t a r s e g u r o s d e q u e las
p r o p i e d a d e s c o n las q u e p o d e m o s c o n t a r s o n suficientes p a r a n o q u e r e r
e s t a r sin ellas.
3 0
L a s l i m i t a c i o n e s a s o c i a d a s c o n el a p o y o q u e o f r e c e n los n a v e g a d o r e s
a c t u a l e s d e b e n e s t a r s i e m p r e p r e s e n t e s e n la m e n t e d e l c r e a d o r d e
p á g i n a s b a s a d a s e n C S S . Si utiliza s ó l o las características q u e e s t á n b i e n
s o p o r t a d o s , m u c h a s y a lo e s t á n , n o v a a t e n e r q u e t o m a r m u c h a s
p r e c a u c i o n e s . Si h a d e c i d i d o utilizar las f u n c i o n e s m á s a v a n z a d a s
d e f i n i d a s p o r e s t á n d a r e s C S S r e c u e r d e q u e t e n e m o s q u e p r o b a r t o d o d e
m a n e r a e x h a u s t i v a e n t o d o s los n a v e g a d o r e s i m p o r t a n t e s p a r a n o t e n e r
s o r p r e s a s d e s a g r a d a b l e s .
3 1
3 2
E s c r i t u r a y c o m b i n a c i ó n d e e s t i l o s
C u a n d o el n a v e g a d o r e n c u e n t r a u n a h o j a d e estilos e n u n d o c u m e n t o
él la utiliza p a r a d a r f o r m a t o a los e l e m e n t o s d e e s t e d o c u m e n t o . H a y
tres f o r m a s d i f e r e n t e s d e definir estilos e insertarlos e n u n d o c u m e n t o .
I n s e r t a r u n a h o j a d e estilo
U n a h o j a d e estilo i n t e r n a s e d e b e utilizar c u a n d o s e utilizan los estilos
u n a s o l a v e z . E n e s t e c a s o , las d e f i n i c i o n e s s e h a c e n d e n t r o d e u n
< s t y l e > q u e d e b e s e r c o l o c a d o e n el interior d e l < h e a d > d e la p á g i n a
H T M L d e e s t a m a n e r a :
< h e a d >
h r {color: b l u e }
p { m a r g i n - l e f t : 2 0 p x }
b o d y { b a c k g r o u n d - i m a g e : url ( " i m a g e s / f o n d o . g i f " ) }
< / s t y l e >
< / h e a d >
El n a v e g a d o r l e e las d e f i n i c i o n e s c o n t e n i d a s e n < s t y l e > y h a c e el

f o r m a t o d e los e l e m e n t o s d e la p á g i n a m e d i a n t e la a p l i c a c i ó n d e e s a s
definiciones.
3 3
N o t a : El c o m p o r t a m i e n t o n o
r m a l d e los n a v e g a d o r e s e s i g n o r a r los
e l e m e n t o s c u y o signifi cadod e s c o n o c e n . E s t o significa q u e u n
e x p l o r a d o r m u y a n t i g u o q u e n
o a d m i t e estilos C S S i g n o r a r á el < s t y l e >
p e r o n o i g n o r a r á el t e x t o q u e
s e e s c r i b e e n el in terior. Si e s n e c e s a r i o
e vitar q u e el n a v e g a d o r e s c r i b a el t e x t o d e las d e f i n i c i o n e s d e b e m o s
oc ult a r l o p o n i é n d o l o d e n t r o d e u n c o m e n t a r i o H T M L , c o m o s e m u e s t r a
a c o n t i n u a c i ó n :
< h e a d >
<!--
h r {color: b l u e }
p { m a r g i n - l e f t : 2 0 p x }
b o d y { b a c k g r o u n d - i m a g e : url ( " f o n d o . j p g " ) }
- >
< / s t y l e >
< / h e a d >
D e f i n i c i ó n d e estilos c o n el a t r i b u t o d e estilo
L a d e f i n i c i ó n d e estilos ut ilizando el a t r i b u t o style n o s h a c e p e r d e r

m u c h a s d e las v e n t a j a s d e las h o j a s d e estilo m e d i a n t e la m e z c l a d e
e stilos, y a q u e t e r m i n a c o n el c o n t e n i d o . E s t a f o r m a d e definir estilos
d e b e n utilizarse c o n m o d e r a c i ó n y s ó l o c u a n d o t e n e m o s q u e aplicar u n
e stilo u n a s o l a v e z a u n s o l o e l e m e n t o .
3 4
El a t r i b u t o d e estilo a c e p t a casi t o d a s las p r o p i e d a d e s C S S . El s i g u i e n t e

e j e m p l o m u e s t r a c ó m o s e p u e d e c o n t r o l a r el c o l o r y el m a r g e n
i z q u i e r d o d e u n p á r r a f o :
 E s t e e s u n p á r r a f o

< h t m l >


E s t e e s u n p á r r a f o f o r m a t e a d o c o n el a t r i b u t o d e estilo.


< / h t m l >
Si t e n e m o s q u e d a r a u n a p r o p i e d a d u n v a l o r q u e c o n t i e n e e s p a c i o s
d e b e e n c e r r a r l o e n t r e c o m i l l a s s i m p l e s . El s i g u i e n t e e j e m p l o h a c e e s t o
p a r a d a r la f u e n t e " s a n s serif" a u n p á r r a f o y " C o m i c S a n s M S " a o t r o :
< h t m l >


E n e s t e a p a r t a d o , el t i p o d e letra e s " s a n s - s e r i f "
3 5


E n e s t e a p a r t a d o , el t i p o d e letra e s " C o m i c S a n s M S "
 
< / h t m l >
H o j a s d e estilos e n u n a r c h i v o e x t e r n o
U n a h o j a d e estilos e x t e r n a e s la m e j o r o p c i ó n c u a n d o los m i s m o s
estilos s e a p l i c a n a varias p á g i n a s . C o n u n a h o j a d e estilos e x t e r n a
p u e d e c a m b i a r el a s p e c t o gráfico d e m u c h a s p á g i n a s c o n s ó l o c a m b i a r
el a r c h i v o e n el q u e s e d e f i n e n los estilos. C a d a p á g i n a c o n t i e n e u n
e l e m e n t o < l i n k > q u e lo u n e a la h o j a d e estilo s. El < l i n k > s e d e b e c o l o c a r
e n el interior d e l < h e a d > e n p á g i n a s H T M L :
< h e a d >
< l i n k rel = " s t y l e s h e e t " t y p e = " t e x t / c s s " h r e f = "estilos.css">
< / h e a d >
El n a v e g a d o r l e e las d e f i n i c i o n e s c o n t e n i d a s e n la h o j a d e estilo
(estilos.css) y h a c e el f o r m a t o d e los e l e m e n t o s d e l d o c u m e n t o
m e d i a n t e la a p l i c a c i ó n d e e s a s definiciones.
L a h o j a d e estilos e x t e r n a e s s i m p l e m e n t e u n a r c h i v o d e t e x t o q u e
c o n t i e n e las d e f i n i c i o n e s d e estilo C S S . E n s u c o n t e n i d o n o p u e d e n
a p a r e c e r e l e m e n t o s H T M L , s ó l o s e p e r m i t e n d e f i n i c i o n e s C S S válidas.
3 6
C ó m o c o m b i n a r estilos c o n c u r r e n t e s
U n d o c u m e n t o H T M L p u e d e defini r o u s a r m á s d e u n a h o j a d e estil os.
C u a n d o e s t o o c u r r e , e s p o s i b l e q u e a l g u n a s p r o p i e d a d e s s e d e f i n a n e n
u n a h o j a y s e c o n f i g u r e n n u e v a m e n t e e n otr a. E n e s t o s c a s o s , el
n a v e g a d o r d e b e aplicar r e g l a s p a r a decidir c u á l d e las d e f i n i c i o n e s e s
m á s i m p o r t a n t e .
El o r d e n d e c a s c a d a
C u a n d o u n estilo s e d e f i n e m á s d e u n a v e z ¿ C u á l d e las d e f i n i c i o n e s
d e b e elegir el e x p l o r a d o r ? ¿ L a p r i m e r a ? ¿ L a ú l t i m a ? ¿ N i n g u n a d e ellas?
P a r a decidirlo el n a v e g a d o r aplica las r e g l a s s i g u i e n t e s ( e n u m e r a d a s e n
o r d e n c r e c i e n t e d e i m p o r t a n c i a ) :
Estilos d e f i n i d o s p o r o m i s i ó n ( s e a p l i c a n c u a n d o n o h a y o t r a
s u p e r p o s i c i ó n d e ellos)
Estilos d e f i n i d o s e n u n a h o j a d e estilo i n t e r n a ( d e n t r o d e
< s t y l e > ) o e n u n a r c h i v o e x t e r n o
Estilos "in-line" ( d e f i n i d o p o r el a t r i b u t o style e n lo s e l e m e n t o s
d e l d o c u m e n t o H T M L ) . Así, t e n e m o s q u e los estilos q u e s e d e f i n e n e n el
p r o p i o e l e m e n t o c o n el a t r i b u t o style t i e n e n la m á x i m a p r i o r i d a d . L a s
d e f i n i c i o n e s r e a l i z a d a s p o r el a t r i b u t o style s e s u p e r p o n e n a c u a l q u i e r
d e f i n i c i ó n q u e s e h a h e c h o a n t e s .
V a m o s a analizar o t r o e j e m p l o .
S u p o n g a m o s q u e u n a h o j a d e estilos e x t e r n a d e f i n e las s i g u i e n t e s
p r o p i e d a d e s p a r a el s e l e c t o r h 3 :
h 3
color: r e d ;
text-align: left;
3 7
font-size: 8 p t
P e r o existe o t r a h o j a d e estilo i n t e r n a c o n las s i g u i e n t e s p r o p i e d a d e s

t a m b i é n p a r a el s e l e c t o r h 3 :
h 3
text-align: right;
font-size: 2 0 p t
Si la p á g i n a q u e c o n t i e n e la h o j a d e estilos i n t e r n a utiliz a el e l e m e n t o
< l i n k > p a r a c o n e c t a r s e a la h o j a d e estilos e x t e r n a i n d i c a d a
a n t e r i o r m e n t e , e n t o n c e s , las d o s d e f i n i c i o n e s s e c o m b i n a n p a r a
p r o d u c i r la s i g u i e n t e v e r s i ó n final p a r a el s e l e c t o r h 3 :
h 3
color: r e d ;
text-align: right;
font-size: 2 0 p t
3 8
El c o l o r f u e h e r e d a d o d e la h o j a e x t e r i o r p e r o la a l i n e a c i ó n d e l t e x t o y
el t a m a ñ o d e la f u e n t e f u e r o n r e e m p l a z a d o s p o r las d e f i n i c i o n e s
r e a l i z a d a s e n la h o j a interna.
H e r e n c i a d e estilos e n t r e e l e m e n t o s
A l g u n a s p r o p i e d a d e s C S S p a r a u n e l e m e n t o d e f i n i d o p a s a n
a u t o m á t i c a m e n t e a s e r a p l i c a d a s a los d e s c e n d i e n t e s d e e s e e l e m e n t o .
C u a n d o e s t o o c u r r e s e d i c e q u e las p r o p i e d a d e s s e h e r e d a n . El s i g u i e n t e
e j e m p l o m u e s t r a c ó m o f u n c i o n a e s t e m e c a n i s m o d e " h e r e n c i a " d e
e stilos:
< h t m l >
< h e a d >
d i v {color: b l u e }
< / s t y l e >
< / h e a d >

< d i v >
El t e x t o d e los e l e m e n t o s < d i v > e s d e c o l o r azul.

3 9
E s t e p á r r a f o s e e n c u e n t r a d e n t r o d e u n e l e m e n t o < d i v > .
H e r e d a el c o l o r azul.

< / d i v >

E s t e p á r r a f o n o e s t a d e n t r o d e u n e l e m e n t o q u e le d e j e
u n a " h e r e n c i a " .


< / h t m l >
E n el e j e m p l o q u e a c a b a m o s d e ver, la h o j a d e estilo d i c e q u e el t e x t o
d e los e l e m e n t o s < d i v > d e b e s e r azul. El p á r r a f o q u e e s t á e n el interior
d e u n e l e m e n t o < d i v > h e r e d a el c o l o r a z u l d e b i d o a q u e la p r o p i e d a d d e
c o l o r e s h e r e d a d a p o r los d e s c e n d i e n t e s d e u n e l e m e n t o . El s e g u n d o
p á r r a f o n o e s t á d e n t r o d e u n e l e m e n t o q u e le d e j e " h e r e n c i a " ( q u e e n
e s t e c a s o e s la p r o p i e d a d d e color) p o r lo q u e s u t e x t o t i e n e el c o l o r
n o r m a l .
O t r a s p r o p i e d a d e s s ó l o a f e c t a n al e l e m e n t o al q u e s e a p l i c a n y n o s e
p r o p a g a n a s u d e s c e n d e n c i a . S e d i c e q u e e s t a s p r o p i e d a d e s n o s e
h e r e d a n . El s i g u i e n t e e j e m p l o e s similar al a n t e r i o r p e r o a h o r a la
p r o p i e d a d d e c o l o r s e u n i ó a l a p r o p i e d a d b o r d e r , q u e n o e s h e r e d a d a :
4 0
< h t m l >
< h e a d >
d i v
{color: b l u e ;
b o r d e r : solid t h i n r e d
< / s t y l e >
< / h e a d >

< d i v >
L o s e l e m e n t o s < d i v > r e c i b e n u n a l í n e a d e c o n t o r n o
r o j a ( b o r d e r ) y el t e x t o e s d e c o l o r azul.

E s t e p á r r a f o s e e n c u e n t r a d e n t r o d e u n e l e m e n t o < d i v > .
H e r e d a el c o l o r a z u l p e r o n o h e r e d a la l í n e a d e c o n t o r n o ( b o r d e r ) .

< d i v >
4 1
C o m o el e l e m e n t o p r i n c i p a l < d i v >
E s t e o t r o e l e m e n t o < d i v > t i e n e s u p r o p i a l í n e a d e c o n t o r n o .
< / d i v >
< / d i v >

< / h t m l >
4 2
E s t a b l e c e r c o l o r e s e n C S S
P o d e m o s o b t e n e r c u a l q u i e r c o l o r d e n u e s t r a e l e c c i ó n c o m b i n a n d o los
tres c o l o r e s p r i m a r i o s : r o j o (red), v e r d e ( g r e e n ) y a z u l (blue) e n las
p r o p o r c i o n e s c o r r e c t a s .
C o m o e x p r e s a r los c o l o r e s
E n C S S la f o r m a r e c o m e n d a d a p a r a e x p r e s a r c o l o r e s la b a s a d a e n la
n o t a c i ó n h e x a d e c i m a l . D e e s t a m a n e r a , los c o l o r e s s e e x p r e s a n
u tilizando tres n ú m e r o s h e x a d e c i m a l e s q u e d e f i n e n las c a n t i d a d e s d e
r ojo, v e r d e y a z u l q u e e n t r a n e n la c o m p o s i c i ó n d e u n c o l o r e n
p articular. El v a l o r m á s b a j o d e u n c o l o r d e t e r m i n a d o e s 0 ( # 0 0 e n la
n o t a c i ó n h e x a d e c i m a l u s a d a e n C S S ) y el v a l o r m á s alto e s 2 5 5 ( # F F e n
n o t a c i ó n h e x a d e c i m a l ) . P o r lo t a n t o , el c o l o r n e g r o q u e t i e n e 0 rojo, 0
v e r d e y 0 a z u l s e e s c r i b e # 0 0 0 0 0 0 , m i e n t r a s q u e el b l a n c o q u e t i e n e 2 5 5
r ojo, 2 5 5 v e r d e y 2 5 5 a z u l s e e s c r i b e # F F F F F F . El a m a r i l l o f u e r t e t i e n e
2 5 5 rojo, 2 5 5 v e r d e y 0 azul, p o r lo q u e s e e s c r i b e # F F F F 0 0 .
L a s i g u i e n t e t a b l a m u e s t r a los r e s u l t a d o s d e varias c o m b i n a c i o n e s d e
c o l o r e s :
4 3
F o r m a H e x a d e c i m a l F o r m a R G B ( D e c i m a l )
C o l o r
# 0 0 0 0 0 0 r g b ( 0 , 0,0)
# F F 0 0 0 0 r g b ( 2 5 5 , 0,0)
# 0 0 F F 0 0 r g b ( 0 , 2 5 5 , 0 )
# 0 0 0 0 F F r g b ( 0 , 0 , 2 5 5 )
# F F F F 0 0 r g b ( 2 5 5 , 2 5 5 . 0 )
# 0 0 F F F F r g b ( 0 , 2 5 5 , 2 5 5 )
# F F 0 0 F F r g b ( 2 5 5 , 0 , 2 5 5 )
# C 0 C 0 C 0 r g b ( 1 9 2 , 1 9 2 . 1 9 2 )
# F F F F F F r g b ( 2 5 5 , 2 5 5 , 2 5 5 )
El s i g u i e n t e e j e m p l o m u e s t r a tres m a n e r a s d i f e r e n t e s d e escribir t e x t o
d e c o l o r rojo.
< h t m l >


4 4
E s t e p á r r a f o t i e n e c o l o r r g b ( 2 5 5 , 0, 0 )


E s t e p á r r a f o t i e n e c o l o r # F F 0 0 0 0


E s t e a p a r t a d o t i e n e el c o l o r " R e d "


E s t e a p a r t a d o t i e n e el c o l o r # 0 0 0 0 F F


< / h t m l >
N o m b r e s d e c o l o r
L a s i g u i e n t e t a b l a m u e s t r a los 1 6 c o l o r e s c u y o s n o m b r e s f u e r o n
d e f i n i d o s o f i c i a l m e n t e p o r W 3 C . T o d o s los n a v e g a d o r e s r e c o n o c e n
e s t o s n o m b r e s p a r a q u e p u e d a u s a r l o s sin n i n g ú n p r o b l e m a :
C o l o r e s c o n n o m b r e s a t r i b u i d o s o f i c i a l m e n t e :
4 5
A d e m á s d e e s t o s n o m b r e s d e c o l o r e s h a y m u c h o s o t r o s q u e n o e s t á n
d e f i n i d o s p o r los e s t á n d a r e s d e l W 3 C p e r o s o n r e c o n o c i d o s p o r los
n a v e g a d o r e s .
F o r m a s d e definir los c o l o r e s
A c a b a m o s d e v e r q u e p o d e m o s definir u n c o l o r e n u n a h o j a d e estilos
d e tres f o r m a s :
1 ) i n d i c a n d o s u n o m b r e , p o r e j e m p l o " A q u a " , 2 ) p o r s u f o r m a r g b , p o r
e j e m p l o r g b (0, 2 5 5 , 2 5 5 ) p a r a el c o l o r " A q u a " , 3 ) i n d i c a n d o s u f o r m a
h e x a d e c i m a l , p o r e j e m p l o # 0 0 F F F F p a r a el c o l o r " A q u a " .
4 6
A d e m á s d e e s t a s tres m a n e r a s p o d e m o s utili zar o t r a f o r m a r g b b a s a d a

e n p o r c e n t a j e s d e l v a l o r m á x i m o d e c a d a col or. E s t a f o r m a e s m e n o s
r e c o m e n d a b l e q u e las o t r a s p e r o p u e d e s e r út il e n a l g u n a s s i t u a c i o n e s .
L a s i g u i e n t e t a b l a p r e s e n t a u n a l ista d e t o d a s las f o r m a s q u e p o d e m o s
utilizar.
F o r m a
D e s c r i p c i ó n
c o l o r _ n a m e El n o m b r e d e l c o l o r ( p o r e j e m p l o , r e d
o b l u e )
r g b (rojo, v e r d e , azul) U n v a l o r R G B p a r a el c o l o r ( p o r
e j e m p l o , r g b ( 2 5 5 , 0 , 0 ) e s el d e c o l o r
rojo)
r g b ( r o j o % , v e r d e % , a z u l % ) U n v a l o r R G B d a d o c o m o u n
p o r c e n t a j e d e l v a l o r m á x i m o d e c o l o r
( p o r e j e m p l o , r g b ( 1 0 0 % , 0 % , 0 % ) e s el
c o l o r rojo)
# R R G G B B U n n ú m e r o h e x a d e c i m a l ( p o r e j e m p l o
# F F 0 0 0 0 p a r a el c o l o r rojo).
C u i d a d o s q u e d e b e m o s t e n e r al utilizar c o l o r e s
A c t u a l m e n t e casi t o d o s los m o n i t o r e s d e o r d e n a d o r e s t á n p r e p a r a d o s
p a r a p r o p o r c i o n a r m á s d e 1 6 m i l l o n e s d e c o l o r e s d i f e r e n t e s . Sin
e m b a r g o , h a y q u e t e n e r e n c u e n t a q u e h a y m á s y m á s dispositivos
m ó v i l e s c o n p a n t a l l a a c o l o r ( t e l é f o n o s m ó v i l e s y P D A s ) q u e s u e l e n t e n e r
p a l e t a s r e l a t i v a m e n t e p e q u e ñ a s . A l g u n o s s ó l o p u e d e n m o s t r a r 2 5 6
c o l o r e s , o t r o s 4 0 9 6 y o t r o s 6 5 5 3 6 . E s p o c o p r o b a b l e q u e u n a p a r a t o d e
p e q u e ñ a s d i m e n s i o n e s y b a j o c o n s u m o d e e n e r g í a c o n s i g a ir m á s allá d e
e s t o .
Si d e s e a c r e a r p á g i n a s q u e s e vis ualicen c o r r e c t a m e n t e e n e s t o s
dispositivos d e b e t e n e r cierto c u i d a d o al elegir los c o l o r e s q u e utiliza e n
s u s p á g i n a s . U n a b u e n a m a n e r a d e l o g rar r e s u l t a d o s a c e p t a b l e s e s
utilizar ú n i c a m e n t e los c o l o r e s p a r a W e b e n s u s p á g i n a s .
4 7
4 8
P r o p i e d a d e s d e l o s e l e m e n t o s
b a c k g r o u n d
L a s p r o p i e d a d e s d e los f o n d o s d e los e l e m e n t o s d e f i n e n los c o l o r e s d e
f o n d o e i m á g e n e s d e f o n d o p a r a los e l e m e n t o s H T M L . E s t a s
p r o p i e d a d e s n o s p e r m i t e n c o n t r o l a r los c o l o r e s y las i m á g e n e s d e f o n d o
d e los e l e m e n t o s (p osición, r e p e t i c i ó n , e tc.)
P r o p i e d a d e s d e los f o n d o s ( b a c k g r o u n d ) :
P r o p i e d a d D e s c r i p c i ó n V a l o r e s W 3 C
b a c k g r o u n d dmfpe se ro aN c o no r l p d i es a i b o r i e a ar d c oa i f dó c tr ne o oe . s nr cd t ea a s p u a l dn r a ea s b a b ac c k k g g r r o o u u n n d d - - i c m o a l g o e r C S S 1
b a c k g r o u n d - r e p e a t
b a c k g r o u n d
a t t a c h m e n t
b a c k g r o u n d - p o s i t i o n
a t b ta ca k c g h r m o e u n n t d - d e I n d i c f a o s n i d l o a i m d a e g be n e fs c i r x o e l d l C S S 1
ep en r m l a a n e v c e e n r t a i n n a m ó vd ie l
n a v e g a d o r o
a c o m p a ñ a r á el
c o n t e n i d o c u a n d o
h a y a m o v i m i e n t o
( d e s p l a z a m i e n t o ) .
4 9
c ob l a o c r k g r o u n d - ed l Ee es tm a e f b n o l t n e o d c . oe e ld e c o l u o n r c o l o r - rh ge b x C S S 1
c o l o r - n a m e
t r a n s p a r e n t
i bm a c g k e g r o u n d - i mE s a t g a e b n l e c e d e f o u n n d ao nu r o l n e C S S 1
e p a l r e a m e n s tu o u s o e n el
p ob s a i c t k i g o rn o u n d - d Do e n f d i e n e s l e a cu b o i m c i a e c n i z ó a n t o p cl e e f n t t e r C S S 1
da e d f i o b n u dj ao r . l a i m a g e n
t o p right
c e n t e r left
c e n t e r c e n t e r
c e n t e r right
b o t t o m left
b o t t o m c e n t e r
b o t t o m right
x - % y - %
x - p o s y - p o s
5 0
b a c k g r o u n d - E s t a b l e c e si la r e p e a t r e p e a t - x C S S 1
r e p e a t id e m b a e g r e í n a s e d r e r e p f e o t n i d d o a r e p e a t - y
m( of s o a r i m c a o n ) d o o n o , y l u a n s n o - r e p e a t
d i r e c c i o n e s d e la
r e p e t i c i ó n .
E j e m p l o s d e aplicación.
Definir el c o l o r d e f o n d o :
< h t m l >
< h e a d >
b o d y { b a c k g r o u n d - c o l o r : y e l l o w }
h 1 { b a c k g r o u n d - c o l o r : # 0 0 F F 0 0 } h 2 { b a c k g r o u n d - c o l o r :
t r a n s p a r e n t }
p { b a c k g r o u n d - c o l o r : r g b ( 2 5 0 , 0 , 2 5 5 ) }
< / s t y l e >
<title> </title>
< / h e a d >

< h 1 > S e t r a t a d e u n título d e nivel 1 < / h 1 >
5 1
< h 2 > S e t r a t a d e u n título d e nivel 2 < / h 2 >
 E s t e e s u n p á r r a f o 

< / h t m l >
U n a ú n i c a d e c l a r a c i ó n p a r a definir t o d a s las p r o p i e d a d e s d e l f o n d o :
< h t m l >
< h e a d >
b o d y
b a c k g r o u n d : # 00ffff url ( " i m a g e n f o n d o . j p g " ) n o - r e p e a t f i x e d

< / s t y l e >
<title> </title>
< / h e a d >

 L a p á g i n a d e t e x t o 
5 2

< / h t m l >
R e p e t i r la i m a g e n d e f o n d o ( b a c k g r o u n d ) v e r t i c a l m e n t e :
< h t m l >
< h e a d >
< s t y l e t y p e = " t e x t / c s s " > b o d y
b a c k g r o u n d - i m a g e : url ( " i m a g e n . j p g " ) ; b a c k g r o u n d - r e p e a t : r e p e a t - y
< / s t y l e >
<title> </title>
< / h e a d >
5 3


< / h t m l >
5 4
U n i d a d e s d e m e d i d a
M e d i c i ó n d e d i s t a n c i a s e n u n a p á g i n a H T M L
El v a l o r d e l o n g i t u d s e e s c r i b e c o m o u n n ú m e r o s e g u i d o d e u n a
a b r e v i a t u r a q u e i n d i c a la s u n i d a d e s d e m e d i d a . N o p o d e m o s p o n e r
e s p a c i o s e n t r e el n ú m e r o y las u n i d a d e s ( p o r e j e m p l o n o e s c o r r e c t o 2
c m p e r o sí lo e s 2 c m ) . C u a n d o la l o n g i t u d e s 0 (cero) n o e s n e c e s a r i o
indicar las u n i d a d e s .
E n la s i g u i e n t e t a b l a s e d e s c r i b e n las u n i d a d e s d e m e d i d a q u e
p o d e m o s utilizar e n C S S .
U n i d a d D e s c r i p c i ó n
% p o r c e n t a j e d e u n v a l o r
I n p u l g a d a s (inch)
c m c e n t í m e t r o s
m m m i l í m e t r o s
e m 1 e m e s igual al t a m a ñ o d e l t i p o d e letra q u e s e e s t a
utilizando
e x 1 e x e s igual a la a l t u r a d e la letra " x " e n el t i p o d e letra
q u e s e utiliza ( a l r e d e d o r d e la m i t a d d e l v a l o r d e la
p r o p i e d a d font-size).
p t p u n t o s ( 1 p t e s
lo m i s m o q u e 1 / 7 2 p u l g a d a s )
p c p i c a s (1 p c e s el m i s m o q u e el d e 1 2 p u n t o s )
p x pixels ( 1 p x e s u n p u n t o e n la p a n t a l l a d e l o r d e n a d o r )
5 5
D e f i n i c i ó n d e c o l o r e s
E s t a t a b l a s i m p l e m e n t e r e s u m e lo q u e h e m o s visto a n t e r i o r m e n t e :
F o r m a D e s c r i p c i ó n
c o l o r _ n a m e El n o m b r e d e l c o l o r ( p o r e j e m p l o , r e d o b l u e )
r g b (x, x, x) U n v a l o r R G B p a r a el c o l o r ( p o r e j e m p l o , r g b ( 2 5 5 , 0 , 0 )
e s el c o l o r rojo)
r g b ( y % , y % , y U n v a l o r R G B d a d o c o m o u n p o r c e n t a j e d e l v a l o r
% ) m á x i m o d e c o l o r ( p o r e j e m p l o r g b ( 1 0 0 % , 0 % , % 0 ) e s el
c o l o r rojo)
# R R G G B B U n n ú m e r o h e x a d e c i m a l ( e j e m p l o # f f 0 0 0 0 e s el c o l o r
rojo).
5 6
P r o p i e d a d e s d e l t e x t o
L a s p r o p i e d a d e s d e t e x t o d e f i n e n el a s p e c t o visual q u e s e d a r á al texto.
E s t a s p r o p i e d a d e s n o s p e r m i t e n c o n t r o l a r los c o l o r e s , a u m e n t a r o
d i s m i n u i r el e s p a c i o e n t r e c a r a c t e r e s , alinear el texto, elige la f u e n t e ,
d e c o r a r , etc.
P r o p i e d a d e s d e l t e x t o
c o l o r E s t a b l e c e el c o l o r d e l texto. c o l o r C S S 1
d i r e c t i o n e s D c e r f i i t n u er a d e l a t e x t d o i. r e c c i ó n d e ltr rtl C S S 2
s p l ea t c t i e n r g - e s A p u a m c e i o n t e a n t r e o c a r a d c i t s e m r i e n s .u y e el ln e o n r g m t a h l C S S 1
text-align e l A el i m n e e n a t o u . n t e x t o d e n t r o d e u n c e l en f t t e r r i g h t C S S 1
justify
d e t ec x o t r - a t i o n a l A t ñ e a x dt oe . e l e m e n t o s d e c o r a t i v o s u n d o e n r el i n e C S S 1
o v e r l i n e
l i n e
t h r o u g h t
blik
t e x t - i n d e n t h a D c e i s a p l la a z a i z h q a u c i i e a r d l a a l d a e r p e r c i h m a e r o a %l e n g t h C S S 1
tl e t x r t a o . d e la p r i m e r a línea d e
5 7
t r t ea x n t s - f o r m e l C e o nm t e r n o t l o a . las letras d e u n c a n p o i tn a e l i z e C S S 1
u p p e r c a s e
l o w e r c a s e
u n i c o d e - b i d i e nm o b r e m d a l C S S 2
b i d i
o v e r r i d e
w h i t e - s p a c e e s l D p e a fm c i e i n o e t o e . n c b ó l m a o n c o s d e e n t t r r o a t d a e u e n l n on o w r m a a p l C S S 1
p r e
s pw a o c r i d n - g e s A p u a m c e i on t e a n t r e o p a l a d b i r s a m s i . n u y e el ln e o n r g m t a h l C S S 1
A j u s t e d e l c o l o r d e l t e x t o :
< h t m l >
< h e a d >
h 1 {color: # 0 0 F F 0 0 }
h 2 {color: # d d a 0 d d }
p {color: r g b ( 0 , 0 , 2 5 5 ) }
< / s t y l e >
5 8
<title> < / t i t l e >
< / h e a d >

< h 1 > C a b e c e r a nivel 1 < / h 1 >
< h 2 > C a b e c e r a nivel 2 < / h 2 >

< / h t m l >
A l i n e a m i e n t o d e l t e x t o :
< h t m l >
< h e a d >
h 1 {text-align: c e n t e r }
5 9
h 2 t e x t - a l i g n : left}
h 3 t e x t - a l i g n : r i g h t }
< / s t y l e >
< t i t l e > < / t i t l e >
< / h e a d >

< h 1 > C a b e c e r a N i v e l 1 < / h 1 >

< / h t m l >
6 0
C o n t r o l a r e l t i p o d e l e t r a
P r o p i e d a d e s
L a s p r o p i e d a d e s d e l tip o d e f u e n t e d e f i n e n a s p e c t o s estilísticos d e los
t i p o s d e l etra c o n q u e s e e s c r i b e el texto. Ellas n o s p e r m i t e n elegir e n t r e
v a r i o s c o n j u n t o s d e c a r a c t e r e s q u e d i b u j a n las letras d e f o r m a d i f e r e n t e ,
c o n t r o l a r los t a m a ñ o s , aj ustar s u s f o r m a s , etc.
N o t a I m p o r t a n t e : L a s f u e n t e s s e identifican p o r n o m b r e s . C u a n d o
u s t e d le p i d e al n a v e g a d o r q u e u s e u n t i p o d e letra q u e él n o r e c o n o c e
él u s a r á o t r a e n s u lugar.
f o n t r e s t p Aa u n c e t e e d p s e t p n a r l s o o e p s r i v d e a a d l t a o o d r s e s a q l a u s e s e m ie c n o u n C S S 1
f l e u o a n s d r c a e m p u ra ú e o n s n a p i t b t i c a r e a e t a d a v d n a b i e d l e a c a e n l d . s a l N r r a d a o e s e c s l c i a d o ó d c e n l a i f u i o t u n m o i n a n d r d a a e a s s n m e s s a g e
b o x s m a l l
c a p t i o n
s t a t u s - b a r
c o n el t i p o d e letra.
f o n t - f a m i l y f t p u e u e x n e L c t t o a d e s n e p s . r i o L a o s p a p t l e l i a i s e r e s d q t n p a u a d u e e r s n a f e t a o l á e n l s n t o i c a - s r tf v i d a e b e m i d g n i r e a l a l d y d o o a s r nf a a m m i l e y - C S S 1
g e n e r i c
f a m i l y
d e f o r m a pri oritaria: la
p r i m e r a o p c i ó n a p a r e c e
p r i m e r o , l u e g o v i e n e la
s e g u n d a o p c i ó n y as í
6 1
s u c e s i v a m e n t e . El n a v e g a d o r
elige el p r i m e r t i p o q u e e s
c a p a z d e utilizar. L o s n o m b r e s
d e la s f u e n t e s p u e d e n s e r
n o m b r e s fami liares o n o m b r e s
g e n é r i c o s .
font-size A j u s t a el t a m a ñ o d e u n tipo x x - s m a l l C S S 1
d e letra.
x - s m a l l
s m a l l
m e d i u m
l a r g e
x-large
x x - l a r g e
s m a l l e r
larger
l e n g h t
%
f o n t - s i z e - a d j u s t Si el t i p o d e letra ( f u e n t e ) n o n e C S S 2
e l e g i d o n o e s t á d i s p o n i b l e , el
n a v e g a d o r s e v e o b l i g a d o a n ú m e r o
utilizar o t r o tipo d i f e r e n t e . L a
p r o p i e d a d font-size-adjust
e s p e c i f i c a el " a s p e c t v a l u e " d e
la f u e n t e e l e g i d a p a r a q u e el
n a v e g a d o r p u e d a sustituirla
p o r o t r o t i p o q u e s e a a c c e s i b l e
p r e s e r v a n d o la a l t u r a d e la
letra " x " y m a n t e n i e n d o la
legibilidad d e l t e x t o .
f o n t - s t r e t c h L a p r o p i e d a d f o n t - s t r e t c h n o r m a l C S S 2
6 2
p r o v o c a u n a e x p a n s i ó n o w i d e r
c o n t r a c c i ó n h o r i z o n t a l e n el
t a m a ñ o d e la f u e n t e . r e d u c i r
a n c h o
c a r á c t e r
ultra
c o n d e n s e d
e x t r a
c o n d e n s e d
c o n d e n s e
d
s e m i
c o n d e n s e d
s e m i
e x p a n d e d
e x p a n d e d
e x t r a
e x p a n d e d
ulttra
e x p a n d e d
f o n t - s t y l e E s t a b l e c e el estilo d e f u e n t e n o r m a l C S S 1
q u e d e s e a utilizar. it ali c
o b l i q u e
f o n t - v a r i a n t E s c r i b e el t e x t o m e d i a n t e n o r m a l C S S 1
u n a f u e n t e " s m a l l - c a p s " o d e
t i p o n o r m a l . s m a l l
c a p s
6 3
f o n t - w e i g h t E s t a b l e c e el g r o s o r d e l t r a z o n o r m a l C S S 1
c o n el q u e e s t á n d i s e ñ a d a s las b o l d
letras.
b o l d e r
lighter 1 0 0
2 0 0
3 0 0
4 0 0
5 0 0
6 0 0
7 0 0
8 0 0
9 0 0
6 4
L o s b o r d e s
C o m o h e s visto a n t e s , el límite d e
m o u n e l e m e n t o s e l l a m a " b o r d e r " .
A l r e d e d o r d e
l límite p o d e m o s d i b u j a r líneas d e c o n t o r n o . El e s t á n d a r
C S S n o s p e i t e especificar el estilo, el
r m c o l o r y el g r o s o r d e las líneas q u e
d e l i m i t a n u n e l e m e n t o H T M L . A n t e s d e C S S p a r a p o d e r d i b u j a r líneas
a l r e d e d o r d e u n e l e m e n t o t e n í a m o s q u e p o n e r l o s d e n t r o d e u n a t a b l a y
d i b u j a r lín eas u s a n d o los e l e m e n t o s d e la tabla.
b o r d e r pd e a O c r f l a ár a em r ce ae e t s c rc i ur o ó i n s b a i r d f e o e r n lt m a o a s d u o anl s íb a n r e e a v ú s in ai l d dc o e a s b ob r o d r e d r e - r c - o w l i o d r t h C S S 1
b o r d e r - s t y l e
c o n t o r n o . A c e p t a los v a l o r e s
q u e s e p u e d e n d a r a las
p r o p i e d a d e s q u e f i g u r a n
listadas a la d e r e c h a .
b bo o t r t d o e m r - dp e a O c r f l a r a e r c ae e s c c i ur ó i n b a i r f o e r n t m o a d u a an s b a r e v ú in a i l dc a a s b o b ot r t d o e m r - - w i d t h C S S 1
dpv a r e l o o l p ar i e pe s ad r a q t d u e e s i n s d f e e r i p l o a u r . e l d íA n ce e e n a p t ld í a a m r il to a es b o r d e r - s t y l e
b o r d e r - c o l o r
las p r o p i e d a d e s q u e f i g u r a n
cb o b l ot o r t r d o e m r - - d E e s c t o a n b tl e o c r e n o e l i n c f o e l r o i o r r . d e l a l í n e a b o r d e r - c o l o r C S S 2
sb t ob y ot l r t e d o e m r - - d E e s b t o a rb l d e e c i e n f e e l r i e o s r t . i l o d e l a l í n e a b o r d e r - s t y l e C S S 2
6 5
b o r d e r i n D f e e fr i o n r e . e l g r o s o r d e l a l í n e a t ht ih ci kn m e d i u m C S S 1
b o t t o m
w i d t h
l e n g h t
b o r d e r c u E a s t r a o b l e l c í e n e l a o s s c d o e l o r c e so n t d o e r n l o a . s c o l o r C S S 1
c o l o r
A c e p t a d e u n o a c u a t r o
valores.
b o r d e r - l e f t lp ar O d ro f o ap r i e e c i d e z a eq sdu c ei n r es a i r b d i f d o r o e r e m l n a at o a d ul b aí n r n s a e a v i s a do l d el a a ls w i b od r t d h e r - l b e o f r t d - e r C S S 1
c o l o r
qs e u n e t e n s c e i a . p u A ec e d p e t n a dl o a s r v a l o r l e a s s b o r d e r - s t y l e
p r o p i e d a d e s q u e f i g u r a n a la
d e r e c h a .
b o r d e r d E e s b t o a rb l d e e c i e z q e l u i c e o r l d o o r . d e l a l í n e a b o r d e r - c o l o r C S S 2
left -color
b o r d e r d E e s b t o a r b l d e e c i e z e q l u i e e s r t d i o l .o d e l a l í n e a b o r d e r - s t y l e C S S 2
left -style
b o r d e r D e f i n e el g r o s o r d e la línea t h i nm e d i u m C S S 1
l e f t - w i d t h d e b o r d e i z q u i e r d o . thick l e n g h t
l e n g h t
6 6
r ib g o h rt d e r - cpd ro eO on f ptr ioe e rc e d n s a o c ud r en i bs a n i r f e d lo e r l m a tl a d a o o d a a l b d ís r en e e r v a e i c a l d h d a e o a s w ib od r t d h e r - r i g b h o t r - d e r C S S 1
c o l o r b o r d e r - s t y l e
e n u n a s o l a d e c l a r a c i ó n .
A c e p t a los v a l o r e s q u e s e
p u e d e n d a r a las p r o p i e d a d e s
q u e f i g u r a n a la d e r e c h a .
r i b g o h r t d - e c ro l - o r d e E s b t o a rb l d e e c ae le a l d c e o r l e o c r h d a e. l a l í n e a b o r d e r - c o l o r C S S 2
r i b g o h r t d - es t r y - l e d e E s l t a a d b e l r e ce e c h e a l . e s t i l o d e l a l í n e a b o r d e r - s t y l e C S S 2
r ib go h r t d - e w r i - d t h d eD e l f a i d n e e r e e l c h g a r o s o r d e l a l í n e a t ht ih ci k n l e n g h m t e d i u m C S S 1
s tb y o l re d e r - ecvA asu cL l ta e o a t p r b r t e l o p as e .r c o el p dí i n e e a ld s a u d ne d s o t e ib l o o r a c d o e n d r t c -e ou s ra t nt y l ro l a o.e s d on t o t n e e d d h a i s d h d e dn C S S 1
solid d o u b l e
g r o o v e r i d g e inset
o u t s e t
t o b po r d e r - ap b r N r o o e p s v i i e a d o d a f a d r e d e s e c e e d s e c r u i n l b a i r l t í o m n d a e a n a s e l r d a a e s w i b do r t d h e r - t o p - C S S 1
ec o n n t o u r n n a o d e s o l l a a p a r d t e e c l s a u r p a e c r i i ó o n r. b o r d e r - c o l o r
pA c u e p d t e a n d l a o r s a v l a a l s o r p e r s o p i q e u d e a d e s s e b o r d e r - s t y l e
t o b po r c d o e l r o - r s uE ps e t r a i b o l r e . c e e l c o l o r d e l a l í n e a b o r d e r - c o l o r C S S 2
t ob p o - r s d t e y r l -e s uE ps e t r a i b o l r e . c e e l e s t i l o d e l a l í n e a b o r d e r - s t y l e C S S 2
t o b p o - r w d ie rd - t h s uD p e e f r i i n o er . e l g r o s o r d e l a l í n e a t ht ih ci k n l e n g h m t e d i u m C S S 1
b o r d e r - O f r e c e u n a f o r m a a b r e v i a d o t h i n m e d i u m C S S 1
6 7
w i d t h pt oa dr aa s d l e a f s i n l i í r n e l a o s s d g e r o c s o o n r t e o s r n d o e . thick l e n g h t
valores.
Definir el estilo d e las c u a t r o líneas d e b o r d e :
< h t m l >
< h e a d >
p . d o t t e d { b o r d e r - s t y l e : d o t t e d }
p . d a s h e d { b o r d e r - s t y l e : d a s h e d }
p.solid { b o r d e r - s t y l e : solid}
p . d o u b l e { b o r d e r - s t y l e : d o u b l e }
p . g r o o v e { b o r d e r - s t y l e : g r o o v e }
p . r i d g e { b o r d e r - s t y l e : r i d g e }
p . i n s e t { b o r d e r - s t y l e : inset}
p . o u t s e t { b o r d e r - s t y l e : o u t s e t }
< / s t y l e >
<title> </title>
< / h e a d >
6 8

 M S I E 5 . 5 y s u p e r i o r s o p o r t a t o d o s los estilos d e b o r d e ( " b o r d e r

style") p e r o M S I E 5 . 0 n o s o p o r t a los estilos " d o t t e d " y " d a s h e d " .

 U n b o r d e c o m p u e s t o d e p u n t o s 
 U n b o r d e c o m p u e s t o p o r t r a z o s 
 U n b o r d e c o m p u e s t o p o r u n t r a z o c o n t i n u o 
 U n b o r d e d e l í n e a d o b l e 
 U n b o r d e c o n " r e l i e v e " 
 O t r o b o r d e c o n " r e l i e v e " 
 U n b o r d e c o n u n e f e c t o e s p e c i a l 
 O t r o b o r d e c o n u n e f e c t o e s p e c i a l 

< / h t m l >
C o n t r o l a r l o s b o r d e s d e l o s e l e m e n t o s
L o s m á r g e n e s d e u n e l e m e n t o e s t á n c o n s t i t u i d o s p o r el e s p a c i o e n
6 9
b l a n c o q u e e s t á a s u a l r e d e d o r y q u e lo s e p a r a d e los e l e m e n t o s
a d y a c e n t e s . Si el v a l o r d e u n m a r g e n e s p o s i t i v o el e l e m e n t o s e aleja d e
o t r o a d y a c e n t e a él p e r o si e s n e g a t i v o s e a c e r c a a los o t r o s e l e m e n t o s .
E s t o significa q u e p o d e m o s utilizar los m á r g e n e s p a r a a c e r c a r o alejar

el c o n t e n i d o d e d o s o m á s e l e m e n t o s e i n c l u s o s u p e r p o n e r l o s . L o s
c u a t r o m á r g e n e s s e p u e d e n c o n t r o l a r t o d o s a la v e z o p o r s e p a r a d o .
m a r g i n obp f roL r oa e p d c i e e e s p d r u d a o n e d p a e i u s e f n d o e a r l d m e e a m e a m n b a l t r o r o es g . v i i n a c d u a n t d o r es o m a r gg i i n n - - r t i o g ph t C S S 1
d e fc i l n a i rr a c i ó n e n t u o nd a s ú n i l c a as
m a r g i n
b o t t o m
m a r g i n - l e f t
b om a t r t g o i m n - d eE ls te a l b e l m e e c n e t o e . l m a r g e n inferior la e u n t g o t h C S S 1
%
m a r g i n - l e f t d e E l s t e a l b e l m e e c n e t eo l . m a r g e n i z q u i e r d o la e u n t g o t h C S S 1
%
r im g a h rt g i n - d e E l s t e a l b e l m e e c n e t o e .l m a r g e n d e r e c h o al e u n t g o t h C S S 1
%
m a r g i n - t o p d e E l s t e a l b e l m e e c n e t o e .l m a r g e n s u p e r i o r a u t o C S S 1
7 0
l e n g t h
Definir el m a r g e n i z q u i e r d o p a r a u n texto:
< h t m l >
< h e a d >
p . m a r g i n { m a r g i n - l e f t : 2 c m }
< / s t y l e >
<title> < / t i t l e >
< / h e a d >

 E s t e p á r r a f o c o n t i e n e t e x t o sin f o r m a t o c o n los estilos C S S . 
 E n e s t e a p a r t a d o h e m o s utilizado los estilos C S S

p a r a h a c e r m a r g e n i z q u i e r d o u n p o c o m á s a m p l i o . 

< / h t m l >
7 1
7 2
P r o p i e d a d e s d e " p a d d i n g "
L a s p r o p i e d a d e s d e r e l l e n o c o n t r o l a n el e s p a c i o e n b l a n c o q u e s e p a r a
l os c o n t e n i d o s d e u n e l e m e n t o d e s u s límites ( " b o r d e r " ) . E s t á p r o h i b i d o
e l u s o d e v a l o r e s n e g a t i v o s p a r a e s t a s p r o p i e d a d e s p o r q u e e s o p o n d r í a
l os c o n t e n i d o s f u e r a d e l e l e m e n t o , lo c u a l n o t i e n e s e n t i d o . L o s c u a t r o
l a d o s s e p u e d e n c o n t r o l a r t o d o s a la v e z o p o r s e p a r a d o .
P r o p i e d a d e s q u e c o n t r o l a n el e s p a c i o e n t r e el c o n t e n i d o y los límites:
p a d d i n g aue ns E tp s a ret eac t f o p e o s r l r o d m p ce a i o e l n d a t as e bd n s r i e e n dp v o a i s r a a d d c o a e i f or ne ud ec ne s p a d d ii n n g g - - r t i og ph t C S S 1
d e f c i l n a i r r a c i ó en n tu o n d a o s ú n i l c o as
p a d d i n g -
b o t t o m
e l e m e n t o y s u s límites.
p a d d i n g - l e f t
b po a t d t d o i m n g - s e D p e a f r i an e e l e c l o n t e e s n p i a d c o i o d e q u n e %l e n g t h C S S 1
ie n l f e e rm i e o n r .t o d e s u límite
l e p f at d d i n g - s e D p e a f r i an e e l e c l o n t e e s n p i a d c o i o d e q u n e %l e n g t h C S S 1
ie z l q e u m i e rn d t o o . d e s u límite
r ip g a h d t d i n g - s e D p e a f r i an e e l e c l o n t e e s n p i a d c o i o d e q u n e %l e n g t h C S S 1
de e l r e e m c e h n o t . o d e s u límite
t o p pa d d i n g - es e lD p e a f m ri e an n e t e o l e c l o d n e t e e s n p i s a d u c o i o d l e í mq i u t ne e %l e n g t h C S S 1
7 3
s u p e r i o r .
U n a ú n i c a d e c l a r a c i ó n p a r a definir t o d a s las p r o p i e d a d e s relativas al

e s p a c i o e n b l a n c o d e n t r o d e u n e l e m e n t o :
< h t m l >
< h e a d >
t d { p a d d i n g : 4 2 p x }
td.stl2 { p a d d i n g : 2 2 p x 5 2 p x }
< / s t y l e >
<title> </title>
< / h e a d >

< t a b l e b o r d e r = " 1 " >
< t b o d y >
< t a b l e b o r d e r = " 1 " >
< t r >
< t d > E n e s t a c e l d a d e la t a b l a h a y u n a s e p a r a c i ó n d e 4 2 p x e n t r e el
c o n t e n i d o y los límites. < / t d >
< / t r >
7 4
< / t a b l e >

< t a b l e b o r d e r = " 1 " >
< t r >
< t d class = " s t l 2 " >
E n e s t a c e l d a d e la t a b l a h a y u n a s e p a r a c i ó n d e 2 2 p x e n t r e el
c o n t e n i d o y los límites s u p e r i o r e inferior. E n t r e el c o n t e n i d o y los
límites i z q u i e r d o y d e r e c h o la s e p a r a c i ó n e s d e 5 2 p x .
< / t d >
< / t r >
< / t a b l e >

< / h t m l >
7 5
7 6
C o n t r o l a r l a s d i m e n s i o n e s d e l o s
e l e m e n t o s
L a s p r o p i e d a d e s r e l a c i o n a d a s c o n las d i m e n s i o n e s s e utilizan p a r a
c o n t r o l a r la al t u r a y la a n c h u r a d e los e l e m e n t o s y el e s p a c i o e n t r e
líneas d e texto.
P r o p i e d a d e s d e las d i m e n s i o n e s
h e i g h t e l E e s tm a e b n l t e o c . e la a l t u r a d e u n la e u n t g o t h C S S 1
%
l i n e - h e i g h t l í E n s e t a a s b. l e c e l a d i s t a n c i a e n t r e l a s n nú o m r e m r a o l C S S 1
l e n g h t
%
h em i a g x h - t u nE s e t l a e b l m e c n e t o l . a a l t u r a m á x i m a d e ln e o n n g e t h C S S 2
%
m a x - w i d t h e l E e s tm a e b n l t e o c . e e l a n c h o m á x i m o d e nl e o n n g e t h C S S 2
%
m i n - h e i g h t e l D e m f ei n e t o l . a a l t u r a m í n i m a d e u n l e n g t h C S S 2
7 7
%
m i n - w i d t h e l E e s tm a e b n l t e o c . e e l a n c h o m í n i m o d e %l e n g t h C S S 2
w i g h t e l D e m f e i n et o . e l a n c h o d e u n a% u t o C S S 1
l e n g t h
Definir la a l t u r a y el a n c h o d e u n a i m a g e n :
< h t m l >
< h e a d >
i m g . n o r m a l
h e i g h t : a u t o ;
w i d t h : a u t o
i m g . g r a n d e
h e i g h t : 6 4 p x ;
7 8
w i d t h : 6 4 p x
i m g . p e q u e n a
h e i g h t : 1 6 p x ;
w i d t h : 1 6 p x
< / s t y l e >
< t i t l e > < / t i t l e >
< / h e a d >

 
 


< / h t m l >
7 9
8 0
P o s i c i o n a m i e n t o d e l o s e l e m e n t o s
L a s p r o p i e d a d e s q u e c o n t r o l a n el p o s i c i o n a m i e n t o d e los e l e m e n t o s
n o s p e r m i t e n c o n t r o l a r la z o n a o c u p a d a y la u b i c a c i ó n precisa.
b o t t o m h a E c s i t a b a l r e r c i e b a l ) a d a i s l t a a q n c u i e a ( d h e a b c ei a e a s b t a a j r o e o l a% u t o C S S 2
rl íe m l i a t c e i ó in n f c e ro i n o r e l d e l í u m i n t e e l i en f m e e r n i o t r o d e e n l
e l e m e n t o q u e lo c o n t i e n e . l e n g t h
clip de elD es f em i ae n dn e at o l y a l f s u o e r g m o c a s o e dr t e m a u u e n s e t n e r l a e . l m a e n f t o .r m E a l as uh t a o p e C S S 2
left E s t a b l e c e la d i s t a n c i a ( h a c i a la a u t o C S S 2
i z q u i e r d a o a d e r e c h a ) a la q u
l e s e
de le e b m e e d n e t j o a r e n e l r l e í l m a i c t i e ó i n z q c u o i n e r ed l o d l íe m i u t n e
i z q u i e r d o d e l e l e m e n t o q u e lo %l e n g h t
c o n t i e n e .
o v e r f l o w dc o De ne s tf u ei n á ei r d e ao l . o d e q u u e n o e c l u re r m e n tc ou a ne xd co e d e e l h i v i d s d i e b ln e C S S 2
scroll
a u t o
right E s t a b l e c e la d i s t a n c i a ( h a c i a la a u t o C S S 2
i z q u i e r d a o h a c i a la d e r e c h a ) a la q u e
se e l e d m e e b n e t do e j ac r o n e l l r í e m si tp e c d t e o r e c a lh o b d o e r u d n e
d e r e c h o d e l e l e m e n t o c o n t e n e d o r . l% e n g t h
t o p h a E c s i t a b l a e r c r e i b l a a ) d i a s t a ln a c i a q ( u h e a c i e a l a b l a í j m oi t o e %a u t o C S S 2
es l u p l e í r m i i o t r e d s u e p b e e r i e o s r t a d r e l e n e l r e e m l ea c n i t ó o n q c u o e n
8 1
lo c o n t i e n e . l e n g t h
8 2
F o r m a t o d e l i s t a s
L a s p r o p i e d a d e s r e l a c i o n a d a s c o n las listas n o s p e r m i t e n c o n t r o l a r
d i v e r s o s a s p e c t o s d e la p r e s e n t a c i ó n d e u n a lista. E n t r e o t r o s p o d e m o s
elegir los s í m b o l o s d e los m a r c a d o r e s , u s a r u n a i m a g e n c o m o m a r c a d o r
y elegir la p o s i c i ó n d e los m a r c a d o r e s .
list-style al i b N s r t o a e s . v i o a f d r a e c e p a u r n a a d f e o f i r n m i a r list-style-type C S S 1
epd e r n c o l p a i r e a d c a i u d ó n e n a s t o d d e a s ú n u i l n c a a s
p o s i t i o n
list-style
i m a g e
list-style-image mc aE o s r m t c o a a b d l o e r c e e n u n u e a n l a i e m l i a e s gtn a e t . no un r o l n e C S S 1
list-style-position e En s t a l a b l e q c u e e l a m a p or s c i a c d i o ó r n inside o u t s i d e C S S 1
d e b e s e r c o l o c a d o .
list-style-type m a E s r t c a a b d l o e r c e a u e t l i l i t z i a p r .o d e c i n r oc l n e e s q u a r e d i s c C S S 1
d e c i m a l
d e c i m a l
l e a d i n g - z e r o
l o w e r - r o m a n
8 3
u p p e r - r o m a n
l o w e r - a l f a
u p p e r - a l f a
l o w e r - g r e e k
l o w e r - l a t i n
u p p e r - l a t i n
h e b r e w
a r m e n i a n
g e o r g i a n
cjk
i d e o g r a p h i c
h i r a g a n a
k a t a k a n a
h i r a g a n a
i r o h a
k a t a k a n a
i r o h a
m a r k e r - o f f s e t a u t o C S S 2
l e n g t h
8 4
P r o p i e d a d e s d e c l a s i f i c a c i ó n
L a s p r o p i e d a d e s d e clasif icación n o s p e r m i t e n c o n t r o l a r c ó m o s e
p r e s e n t a n los e l e m e n t o s : la e l e c c i ó n d e l l u g a r d o n d e d e b e r í a a p a r e c e r
u n a i m a g e n , c o l o c a r lo s e l e m e n t o s e n t é r m i n o s a b s o l u t o s e n r e l a c i ó n
c o n los d e m á s y c o n t r o l a r s u visibilida d.
c l e a r e s lE t s e á t m n a e b n p l t e o r c me j i u t n i l t o d o s o s a l l al o o d s s o e s c l u e a d m l e e n s t n u o o n s l n e f o t n e r b i og h t t h C S S 1
flotantes.
c u r s o r u t E i s l pi ze a c r i . f i c a e l t i p o d e c u r s o r a au r u l t o C S S 2
c r o s s h a i r
p o i n t e r
d e f a u l t n o n e
e-resize
n e - r e s i z e
n w - r e s i z e
n-resize
se-resize
s w - r e s i z e
8 5
s-resize
w - r e s i z e
text w a i t
h e l p
d i s p l a y d eI n b d e i r c á a p r e c s o e m n t o a r s u e . n e l e m e n t o in n o l n i n e e C S S 1
b l o c k
list-item
r u n - i n
c o m p a c t
m a r k e r
t a b l e
inline-table
t a b l e - r o w
g r o u p
t a b l e
h e a d e r
g r o u p
t a b l e
f o o t e r - g r o u p
t a b l e - r o w
8 6
t a b l e
c o l u m n
g r o u p
t a b l e
c o l u m n
table-cell
t a b l e
c a p t i o n
float i b l m D o e a f q g i u e n e n e d e o e b l e a u l p u n a g a r r e e c l e d e r o m d e n e n d n t e t o r o u nd a e r i l g e hf t n o n e C S S 1
o t r o s e l e m e n t o s .
p o s i t i o n ap bo C s o oi l lc o ui c t ó a a n , u r e n l q a u t e i e l v e a m o e fpn i tu j a o e . d e n u s n e ar rs te a l t a i t c i v e C S S 2
fixed
a b s o l u t e
visibility v i I s n i d b i l ce a o s i n u v i n s i e b l e e . m e n t o d e b e s e r h i v i d s d i e b ln e C S S 2
c o l l a p s e
8 7
8 8
P s e u d o - c l a s e s
L a s p s e u d o - c l a s e s n o s p e r m i t e n a s o c i a r e f e c t o s e s p e c i a l e s a s e l e c t o r e s
C S S o a p a r t e s d e los s e l e c t o r e s .
S i n t a x i s
L a sintaxis d e las p s e u d o - c l a s e s es:
selector: p s e u d o - c l a s e { p r o p i e d a d : v a l o r }
L a s c l a s e s C S S t a m b i é n s e p u e d e n utilizar c o m o p s e u d o - c l a s e s :
selector.clase: p s e u d o - c l a s e { p r o p i e d a d : valor}
P s e u d o - c l a s e s p a r a e n l a c e s
A v i s o : L o s e s t á n d a r e s d e l W 3 C d i c e n q u e la p s e u d o c l a s e d e b e
f u n c i o n a r c o m o t o d o s los e l e m e n t o s q u e t i e n e n c o n t e n i d o p e r o M S I E
t i e n e u n e r r o r q u e h a c e q u e s ó l o f u n c i o n e n c o m o u n e l e m e n t o < a > .
L o s (links) e n e s t a d o a c t i v o q u e y a h a n s i d o visitados, n o visitados o

q u e e s t á n b a j o el p u n t e r o d e l r a t ó n s e p u e d e n m o s t r a r c o n d i f e r e n t e s
c o l o r e s y estilos:
a : link {color: # F F 0 0 0 0 } / * E n l a c e n o v i s i t a d o * /
a : visited {color: # 0 0 F F 0 0 } / * E n l a c e y a v i s i t a d o * /
a : h o v e r {color: # F F 0 0 F F } / * E n l a c e q u e e s t á d e b a j o d e l p u n t e r o
d e l r a t ó n * /
8 9
a : a c t i v e {color: # 0 0 0 0 F F } / * E n l a c e s e l e c c i o n a d o * /
P a r a f u n c i o n a r b i e n a: h o v e r s e d e b e definir d e s p u é s d e a: link y a:
visited d e b e e s t a r y a d e f i n i d o .
P a r a f u n c i o n a r b i e n a: a c t i v e d e b e definirse d e s p u é s d e a: h o v e r .
L o s n o m b r e s d e las p s e u d o - c l a s e s s o n i n s e n s i b l e s al t i p o d e letra.
P u e d e utilizar m a y ú s c u l a s o m i n ú s c u l a s i n d i s t i n t a m e n t e .
L a s p s e u d o - c l a s e s s e p u e d e n c o m b i n a r c o n c l a s e s C S S d e f i n i d a s e n la
p á g i n a :
a . r e d : visited {color: # F F 0 0 0 0 }
< a class = " r e d " h r e f = " p a g i n a . h t m l " > U n a p á g i n a < a >
Si e n el e j e m p l o a n t e r i o r y a s e h a h e c h o clic (visitado) el t e x t o
a p a r e c e r á e n c o l o r rojo.
L a p s e u d o - c l a s e : first-child
A v i s o : E s t a p s e u d o - c l a s e a ú n n o e s b i e n s o p o r t a d a p o r los
n a v e g a d o r e s . N o la u s e , y a q u e n o o b t e n d r á los r e s u l t a d o s q u e d e s e a .
L a p s e u d o - c l a s e : first-child a f e c t a al p r i m e r o d e los e l e m e n t o s ( p r i m e r
d e s c e n d i e n t e ) q u e s e e n c u e n t r a d e n t r o d e o t r o e l e m e n t o .
9 0
E n e s t e e j e m p l o , el s e l e c t o r a f e c t a el e l e m e n t o P q u e a p a r e c e p r i m e r o
d e n t r o d e u n e l e m e n t o div, m o v i é n d o l o u n p o c o m á s a la d e r e c h a c o n
r e s p e c t o al o t r o :
div: first-child p
t e x t - i n d e n t : 2 5 p x
E n el c ó d i g o siguiente, el s e l e c t o r q u e a c a b a m o s d e definir a f e c t a al
p r i m e r p á r r a f o q u e s e e n c u e n t r a d e n t r o d e l e l e m e n t o div:
< d i v >

E s t e e s el p r i m e r p á r r a f o .
E s t e e s el p á r r a f o q u e s e d e s p l a z a r á h a c i a la d e r e c h a .


E s t e e s el s e g u n d o p á r r a f o .
E s t e e s el p á r r a f o q u e n o s e d e s p l a z a a la d e r e c h a .

< / d i v >
9 1
p e r o el s i g u i e n t e a p a r t a d o d e H T M L n o s e v e r á a f e c t a d a , y a q u e n o e s
el p r i m e r d e s c e n d i e n t e d e l e l e m e n t o div:
< d i v >
< h 3 > C a b e c e r a < / h 3 >

E s t e e s el p r i m e r p á r r a f o .
E s t e e s el a p a r t a d o q u e n o s e d e s p l a z a a la d e r e c h a , p o r q u e n o e s el
p r i m e r d e s c e n d i e n t e d e l e l e m e n t o div.

< / d i v >
E n el s i g u i e n t e e j e m p l o , el s e l e c t o r a f e c t a r á a u n e l e m e n t o < e m > q u e
a p a r e c e e n p r i m e r l u g a r ( p r i m e r d e s c e n d i e n t e ) d e n t r o d e u n e l e m e n t o
p, h a c i e n d o q u e s u c o n t e n i d o e s t e escrito e n negrita:
p : first-child e m
f o n t - w e i g h t : b o l d
P o r e j e m p l o , el e l e m e n t o < e m > e n el s i g u i e n t e H T M L e s el p r i m e r
d e s c e n d i e n t e d e l p á r r a f o :
9 2
 H é r c u l e s e s < e m > f u e r t e < / e m > y c o n c o r a j e . 
E n el s i g u i e n t e e j e m p l o , el s e l e c t o r a s i g n a r á u n e l e m e n t o < a > q u e
a p a r e z c a e n p r i m e r l u g a r ( p r i m e r d e s c e n d i e n t e ) d e n t r o d e c u a l q u i e r
e l e m e n t o , h a c i e n d o q u e s u p r o p i e d a d t e x t - d e c o r a t i o n t e n g a el v a l o r
n o n e :
a : first-child
t e x t - d e c o r a t i o n : n o n e
El p r i m e r e l e m e n t o < a > d e l s i g u i e n t e H T M L e s el p r i m e r d e s c e n d i e n t e
d e l p á r r a f o y n o v a a e s t a r d e s t a c a d o , p e r o el s e g u n d o v a a e s t a r
s u b r a y a d o :

Visite < a h r e f = " h t t p : / / w w w . w 3 . o r g " > W 3 C < / a > y c o n s u l t e las

r e c o m e n d a c i o n e s p a r a C S S . Visite < a h r e f = " h t t p : / / w w w . w 3 . o r g " >
W 3 C < / a > y v e a las r e c o m e n d a c i o n e s p a r a H T M L .

9 3
L a p s e u d o - c l a s e : l a n g
L a p s e u d o - c l a s e : l a n g p e r m i t e al a u t o r especificar el i d i o m a q u e s e
utiliza e n u n d o c u m e n t o o u n e l e m e n t o e n particular.
E n el s i g u i e n t e e j e m p l o s e d e f i n e u n t i p o d e c o m i l l a s d i f e r e n t e s p a r a el
t e x t o q u e s e e s c r i b e e n f r a n c é s :
h t m l : l a n g (fr)
q u o t e s : '<<''>>'
E n el s i g u i e n t e e j e m p l o , s e d e f i n e el t i p o d e c o m i l l a s p a r a u s a r c o n el
e l e m e n t o b l o c k q u o t e :
b l o c k q u o t e : l a n g (fr)
q u o t e s : '<<''>>'
L i s t a d o d e p s e u d o - c l a s e s
N o t a : L a c o l u m n a d e la t a b l a q u e t i e n e p o r título W 3 C indica el
e s t á n d a r q u e d e f i n e la p s e u d o - c l a s e . C S S 1 significa q u e la p r o p i e d a d e s
d e f i n i d a p o r " C a s c a d i n g Style S h e e t s L e v e l 1 " y C S S 2 significa q u e la
9 4
p r o p i e d a d e s d e f i n i d a p o r " C a s c a d i n g Style S h e e t s L e v e l 2".
P s e u d o - c l a s e s W 3 C F i n a l i d a d
a c t i v e C S S 1 D e f i n e el estilo q u e s e aplica a u n e n l a c e
s e l e c c i o n a d o .
h o v e r C S S 1 E s t a b l e c e el estilo a p l i c a d o a u n e n l a c e
c u a n d o el p u n t e r o d e l r a t ó n e s t á s o b r e él .
link C S S 1 E s t a b l e c e el estilo a p l i c a d o a u n v í n c u l o
q u e a ú n n o h a s i d o visitado.
visited C S S 1 E s t a b l e c e el estilo a p l i c a d o a u n e n l a c e y a
visitado.
first-child C S S 2 E s t a b l e c e el estilo a p l i c a d o al p r i m e r o d e
los e l e m e n t o s q u e e s t á d e n t r o d e o t r o
e l e m e n t o ( p r i m e r d e s c e n d i e n t e ) .
L a n g C S S 2 P e r m i t e e s t a b l e c e r d i f e r e n t e s a t r i b u t o s
estilísticos p a r a aplic ar al t e x t o escrito e n
u n i d i o m a .
9 5
9 6
P s e u d o - e l e m e n t o s
L o s p s e u d o - e l e m e n t o s s e utilizan e n C S S p a r a a ñ a d i r e f e c t o s a a l g u n o s
s e l e c t o r e s o p a r t e s d e los s e l e c t o r e s .
S i n t a x i s
L a sintaxis d e los p s e u d o - e l e m e n t o s e s la siguiente:
selector: p s e u d o - e l e m e n t o { p r o p i e d a d : v a l o r }
L a s c l a s e s C S S t a m b i é n s e p u e d e n utilizar c o m o p s e u d o - e l e m e n t o s :
selector.clase: p s e u d o - e l e m e n t o { p r o p i e d a d : v a l o r }
U n f o r m a t o e s p e c i a l p a r a la p r i m e r a línea
El p s e u d o - e l e m e n t o first-line s e utiliza p a r a a g r e g a r estilos

e s p e c i a l e s a la p r i m e r a línea d e u n t e x t o :
< h t m l >
< h e a d >
p {font-size: 1 2 p t }
p : first-line {color: # 0 0 0 0 F F ; f o n t - v a r i a n t : s m a l l - c a p s }
9 7
< / s t y l e >
< / h e a d >


T e x t o o c u p a n d o 
d o s o m á s l í n e a s 
L a p r i m e r a l í n e a t i e n e u n 
f o r m a t o e s p e c i a l d a d o p o r el p s e u d o - e l e m e n t o first-line.


< / h t m l >
E n el e j e m p l o a nterior, el n a v e g a d o r m u e s t r a la p r i m e r a línea
f o r m a t e a d a d e a c u e r d o c o n el p s e u d o - e l e m e n t o first-line . Si n o
f o r z a m o s u n salto d e línea el l u g a r e n q u e s u n a v e g a d o r c a m b i a d e línea
d e p e n d e d e l t a m a ñ o d e la v e n t a n a .
El p s e u d o - e l e m e n t o first-line s ó l o s e p u e d e utilizar e n los e l e m e n t o s

d e b l o q u e . L a s s i g u i e n t e s p r o p i e d a d e s s e a p l i c a n al p s e u d o - e l e m e n t o
first-line :
p r o p i e d a d e s d e l t i p o d e letra (font)
p r o p i e d a d e s d e c o l o r
p r o p i e d a d e s d e f o n d o ( b a c k g r o u n d )
9 8
e s p a c i o e n t r e las p a l a b r a s ( w o r d - s p a c i n g )
e s p a c i o e n t r e letras (letter-spacing)
d e c o r a c i ó n d e l t e x t o ( t e x t - d e c o r a t i o n )
a l i n e a c i ó n vertical (vertical-align)
t r a n s f o r m a c i ó n d e l t e x t o ( t e x t - t r a n s f o r m )
a l t u r a d e las líneas (line-height)
cl ear
El M S I E 5 . 0 n o a d m i t e el p s e u d o - e l e m e n t o first-line .
El p s e u d o - e l e m e n t o first-letter
El p s e u d o - e l e m e n t o 'first-letter " s e utiliza p a r a a g r e g a r estilos
e s p e c i a l e s a la p r i m e r a letra d e u n t e x t o :
p : first-letter {font-size: 2 0 0 % ; float: left}
 P r i m e r a s p a l a b r a s e n u n t e x t o (...) 
L a salida m o s t r a r á la p r i m e r a letra d e l p á r r a f o c o n el d o b l e d e l t a m a ñ o
( 2 4 p u n t o s ) :
< h t m l >
< h e a d >
p : first-letter {font-size: 2 0 0 % ; float: left}
9 9
< / s t y l e >
< / h e a d >


L a p r i m e r a letra e n e s t e p á r r a f o e s m a y o r 
q u e las r e s t a n t e s .


L a p r i m e r a letra e n e s t e p á r r a f o e s m a y o r 
q u e las o t r a s .


< / h t m l >
El M S I E 5 . 0 n o a d m i t e el p s e u d o - e l e m e n t o 'first-letter'.
El p s e u d o - e l e m e n t o 'first-letter' s ó l o s e p u e d e utilizar e n los e l e m e n t o s

d e b l o q u e .
L a s s i g u i e n t e s p r o p i e d a d e s s o n a p l i c a b l e s a los p s e u d o - e l e m e n t o s
'first-letter':
1 0 0
p r o p i e d a d e s d e l t i p o d e letra (font)
p r o p i e d a d e s d e c o l o r
p r o p i e d a d e s d e f o n d o ( b a c k g r o u n d )
p r o p i e d a d e s d e los m á r g e n e s
p r o p i e d a d e s d e l e s p a c i o e n t r e el t e x t o y el b o r d e
p r o p i e d a d e s d e las líneas d e límite
d e c o r a c i ó n d e l t e x t o ( t e x t - d e c o r a t i o n )
a l i n e a c i ó n vertical (sólo si el float t i e n e v a l o r n o n e )
t r a n s f o r m a c i ó n d e l t e x t o ( t e x t - t r a n s f o r m )
a l t u r a d e las líneas (line-height)
float
clear
L o s p s e u d o - e l e m e n t o s e n c l a s e s C S S
L o s p s e u d o - e l e m e n t o s p u e d e n c o m b i n a r s e c o n clases C S S :
p.articulo: first-letter {color: # F F 0 0 0 0 }
 U n p á r r a f o d e u n artículo 
El c ó d i g o a n t e r i o r h a r í a q u e la p r i m e r a letra d e c a d a p á r r a f o q u e t e n g a
class = "artículo" e s t é escrita e n rojo. L o s p á r r a f o s q u e n o t i e n e n e s t a
c l a s e n o s e v e n a f e c t a d o s .
V a r i o s p s e u d o - e l e m e n t o s
P o d e m o s c o m b i n a r v a r i o s p s e u d o - e l e m e n t o s p a r a c o n t r o l a r la
p r e s e n t a c i ó n d e u n e l e m e n t o :
1 0 1
p : first-letter {color: r e d ; font-size: 2 0 0 % }
p : first-line {color: b l u e }
 P r i m e r a s p a l a b r a s d e u n artículo 
E n la salida t e n e m o s la p r i m e r a letra d e c a d a p á r r a f o c o n d o s v e c e s el
t a m a ñ o ( 2 4 p t ) y d e c o l o r rojo. A d e m á s las letras r e s t a n t e s d e la p r i m e r a
fila t e n d r á n el c o l o r azul. El r e s t o d e l p á r r a f o s e r á n o r m a l .
L o s p s e u d o - e l e m e n t o s : b e f o r e y :after
A v i s o : e s t o s p s e u d o - e l e m e n t o s e s t á n b i e n s o p o r t a d o s p o r N e t s c a p e
7 / M o z i l l a y p o r O p e r a 7.2, p e r o n o p o r M S I E .
El p s e u d o - e l e m e n t o " : b e f o r e " s e p u e d e utilizar p a r a insertar u n cierto

c o n t e n i d o a n t e s d e u n e l e m e n t o . El estilo q u e s e m u e s t r a a
c o n t i n u a c i ó n i n s e r t a u n a i m a g e n c o n u n a f l e c h a a n t e s d e la o c u r r e n c i a
d e u n a c a b e c e r a d e nivel 4.
< h t m l >
< h e a d >
h 4 : b e f o r e
1 0 2
c o n t e n t : url (flecha.gif)
< / s t y l e >
< / h e a d >

< h 4 > E s t a c a b e c e r a t i e n e u n a f l e c h a < / h 4 >

< / h t m l >
A v i s o : E s t e e l e m e n t o e s t á b i e n s o p o r t a d o p o r N e t s c a p e 7 / M o z i l l a y p o r
O p e r a 7.2, p e r o n o p o r M S I E .
El p s e u d o - e l e m e n t o ":after" s e p u e d e
utilizar p a r a insertar a l g ú n
c o n t e n i d o d e s p u é s d e u n e l e m e n t o . El estilo q u e s e m u e s t r a a
c o n t i n u a c i ó n i n s e r t a u n a i m a g e n c o n u n a f l e c h a d e s p u é s d e la
o c u r r e n c i a d e u n a c a b e c e r a d e nivel 4.
< h t m l >
< h e a d >
h 4 : a f t e r
1 0 3
c o n t e n t : url (flecha.gif)
< / s t y l e >
< / h e a d >

< h 4 > E s t a c a b e c e r a t i e n e u n a f l e c h a < / h 4 >

< / h t m l >
Lista d e los p s e u d o - e l e m e n t o s
P s e u d o - e l e m e n t o s W 3 C F i n a l i d a d
first-letter C S S 1 D e f i n e u n estilo e s p e c i a l p a r a la p r i m e r a
letra d e u n t e x t o.
first-line C S S 1 D e f i n e u n estilo e s p e c i a l p a r a la p r i m e r a
línea d e u n t e x t o .
b e f o r e C S S 2 I n t r o d u c e a l g ú n c o n t e n i d o a n t e s d e u n
e l e m e n t o .
a f t e r C S S 2 I n t r o d u c e a l g ú n c o n t e n i d o d e s p u é s d e
u n e l e m e n t o .
1 0 4
T i p o s d e s o p o r t e
L a p o s i b i l i d a d q u e n o s d a n los estilos C S S p a r a eleg ir los es tilos q u e
d e b e n a p l i c a r s e a m u c h o s s o p o r t e s n o s p e r m i t e especif icar c o n
p r e c i s i ó n la f o r m a e n c ó m o s e p r e s e n t a n los d o c u m e n t o s a los u s u a r i o s .
P o d e m o s definir e stilos q u e s e a p l i c a r á n c u a n d o las p á g i n a s s e
m u e s t r a n g r á f i c a m e n t e e n u n n a v e g a d o r , i m p r e s a s e n p a p e l o leídas e n
v o z alta e n u n n a v e g a d o r q u e s e a c a p a z d e sintetizar v o z .
A l g u n a s p r o p i e d a d e s d e f i n i d a s e n C S S s o n a p l i c a b l e s ú n i c a m e n t e a u n
t i p o esp ecífico. P o r e j e m p l o , la p r o p i e d a d " v o i c e - f a m i l y " s ó l o t i e n e
s e n t i d o c u a n d o la p á g i n a s e visualiza u n n a v e g a d o r c a p a z d e sinteti zar la
v o z . L a p r o p i e d a d "font-size" s ó l o t i e n e s e n t i d o c u a n d o s e m u e s t r a la
p á g i n a d e f o r m a gráfica e n u n n a v e g a d o r o i m p r e s a e n p a p e l ,
p r o b a b l e m e n t e c o n d i f e r e n t e s v a l o r e s e n c a d a c a s o d e b i d o a q u e la
i m p r e s i ó n e n p a p e l s e h a c e g e n e r a l m e n t e c o n u n t i p o d e letra m á s
p e q u e ñ o .
L a r e g l a @ m e d i a
L a r e g l a @ m e d i a n o s p e r m i t e definir u n a h o j a d e estilo ú n i c o ,
d i f e r e n t e s p r o p i e d a d e s q u e s e a p l i c a r á n a los d i f e r e n t e s t i p o s d e
s o p o r t e .
L o s estilos d e f i n i d o s e n el s i g u i e n t e e j e m p l o le d i c e n al n a v e g a d o r q u e
m u e s t r e el t e x t o e n la p a n t a l l a c o n el t i p o d e letra V e r d a n a y c o n
t a m a ñ o 1 4 p x . C u a n d o s e i m p r i m e la p á g i n a s e d e b e utiliz ar u n t i p o d e
letra T i m e s c o n t a m a ñ o d e 1 0 p t . T a n t o e n la p a n t a l l a c o m o e n la
i m p r e s i ó n el t e x t o e s t á e n n e g r i t a (bold):
< h t m l >
< h e a d >
1 0 5
< s t y l e >
@ m e d i a s c r e e n / * estilos p a r a a p l i c a r p o r p a n t a l l a ( s c r e e n ) * /
p.tes t { f o n t - f a m i l y : v e r d a n a , sans-serif; f o n t - s i z e : 1 4 p x }
@ m e d i a p r i n t / * estilos p a r a la i m p r e s i ó n (print) * /
p.tes t { f o n t - f a m i l y : t i m e s , serif; font-size: 1 0 p t }
@ m e d i a s c r e e n , p r i n t / * estilos p a r a p a n t a l l a e i m p r e s i ó n * /
p.tes t { f o n t - w e i g h t : b o l d }
< / s t y l e >
< / h e a d > 
....

< / h t m l >
1 0 6
T i p o s d e s o p o r t e
T i p o d e s o p o r t e D e s c r i p c i ó n
all S e utiliza p a r a definir estilos p a r a t o d o s los t i p o s
d e s o p o r t e .
a u r a l S e utiliza p a r a definir estilos p a r a los
s i n t e t i z a d o r e s d e v o z .
braille S e utiliza p a r a definir estilos p a r a aplicar al t e x t o
escrito e n braille.
e m b o s s e d D e f i n e estilos p a r a t e x t o s e i m p r e s o r a s braille.
h a n d h e l d S e utiliza p a r a definir los estilos p a r a los
p e q u e ñ o s dispositivos m ó v i l e s ( P D A s , t e l é f o n o s
m ó v i l e s , ...)
p r i n t D e f i n e estilos p a r a c u a n d o la p á g i n a s e i m p r i m e
e n p a p e l .
p r o j e c t i o n D e f i n e estilos p a r a c u a n d o s e m u e s t r a la p á g i n a
e n u n p r o y e c t o r (diapositivas, p o r e j e m p l o )
s c r e e n E stilos p a r a la p r e s e n t a c i ó n e n la p a n t a l l a d e l
o r d e n a d o r .
tty E stilos p a r a s u p r e s e n t a c i ó n e n t e r m i n a l e s c o n
r e c u r s o s l i m i t a d o s ( c a r a c t e r e s c o n t a m a ñ o fijo y
o t r a s limitaciones)
t v E s t a b l e c e estilos q u e s e a p l i c a r á n c u a n d o s e
m u e s t r a la p á g i n a e n u n televisor o a p a r a t o similar
1 0 7
1 0 8
M a t e r i a l d e R e f e r e n c i a d e C S S
F o n d o s ( b a c k g r o u n d )
b a c k g r o u n d cle a o Nn s r o ut p s a n r ao o p p f a d i r re e c a d c l ae e d r s u ace rnc s i a b d ó i n e m r . a f t n o o e n d r d a a o s c o b l a o c r k gb r a o c u k n g d r - o u n d C S S 1
i m a g e
b a c k g r o u n d
r e p e a t
b a c k g r o u n d
a t t a c h m e n t
b a c k g r o u n d
p o s i t i o n
a t b ta ca k c g h r m o e u n n t d - f o I n d d i o c a d e s i b e l a p i e m r a m g a e n n e c d e re fs c i r x o e l d l C S S 1
ni n a m v ó e v g i a l d e o n r ol a a v c e o n m t p a a n ña a d r e á l
el c o n t e n i d o c u a n d o
h a y a m o v i m i e n t o
( d e s p l a z a m i e n t o ) .
c ob l a o c r k g r o u n d - f oE s n t d a o b dl e c u e n e l l e m c oe l n o t r o . d e c o l o r - rh ge b x C S S 1
c o l o r - n a m e
t r a n s p a r e n t
i bm a a c g k e g r o u n d - ed l E e s e tf l a o e b n m l d e e o n c t e p o a r u a n a s u i u m s a o g e n un r o l n e C S S 1
p ob s a i c t k i g o r n o u n d - d Do e n f d i e n e s e l a c o m u i b e i n c z a a c i ó a n t o p left C S S 1
1 0 9
d i b u j a r la i m a g e n d e t o p c e n t e r
f o n d o .
t o p right
c e n t e r left
c e n t e r right
b o t t o m left
b o t t o m c e n t e r
b o t t o n right
x - % y - %
x - p o s y - p o s
r eb p a e c a k t g r o u n d - rd e E p s e t t a f i b o d l n a e d c o e ( f s do i e r b lm ae a r n ií d a m o a g s u e e nn r x r re ep p e e a a t t - y r e p e a t - C S S 1
dm i o r s e a c i c c i o o ) n e s o n o d, e y l al sa n o - r e p e a t
r e p e t i c i ó n .
1 1 0
B o r d e s ( b o r d e r )
b o r d e r pd e a O c r f l a ár a em r ce a e st c c r i u r o ó i n sn b a i r d f e o e r n tl m a o a s d u oa ln bs í a r n e a v ú s i n ai l d dc o e a s b ob ro d r e d r e - r c - o w l i o d r t h C S S 1
c o n t o r n o . A c e p t a los v a l o r e s
p r o p i e d a d e s q u e f i g u r a n
b o r d e r pd e a O c r f l a r a e r c e a e s c c i u r ó i n n b a i r f o e r n t m o a d u a n b s a r e v ú i n a i l dc a a s w i b d o tr hd e r - b o t t o m - C S S 1
b o t t o m
dp r e o p l i a e pd a r d t e e s d i n e f e l r a i l o í r n . e a A c l í e m p i t t a e b o r d e r - s t y l e
dl o a s r v a a l o l ra s e s p r q o u p e i e s d e a d pe s u e dq eu ne b o r d e r - c o l o r
f i g u r a n listadas a la d e r e c h a .
b o r d e r d e E s c t o a n b tl e o c r e n o e l i n c f o e l r o i r o r d . e l a l í n e a b o r d e r - c o l o r C S S 2
b o t t o m
c o l o r
b o r d e r l í E n s e t a a d b l e e b c oe r d e e l i n e f s e t r i i l o o r . d e la b o r d e r - s t y l e C S S 2
b o t t o m
s tyle
b o r d e r i n D f e e fr i o n r e . e l g r o s o r d e l a l í n e a t ht ih ci kn m e d i u m C S S 1
b o t t o m
w i d t h
l e n g h t
b o r d e r c u E a s t ra ob l e l c í e n e l a o s s c d o e l o r c e o s n t d o e r n l o a . s c o l o r C S S 1
c o l o r
valores.
b o r d e r - l e f t O f r e c e u n a f o r m a a b r e v i a d a border-left- C S S 1
1 1 1
p a r a escribir t o d a s las w i d t h b o r d e r
p r o p i e d a d e s d e la línea d e l c o l o r
l a d o i z q u i e r d o e n u n a s o l a
s e n t e n c i a . A c e p t a los v a l o r e s b o r d e r - s t y l e
p r o p i e d a d e s q u e f i g u r a n a la
d e r e c h a .
l e b f o t r - d c oe l r o - r d E e s b t o a rb l d e e c i e z e q l u i c e o r l d o o r . d e l a l í n e a b o r d e r - c o l o r C S S 2
l e b f o t r - sd t e y r l - e l í E n s e t a a d b le e b c oe r d e e l i z e q s ut i l e o r d o d . e la b o r d e r - s t y l e C S S 2
l eb fo t r - d w e i r d -t h d D e e b f o i r n d e e e i l z g q r u o i es r o d r o . d e l a l í n e a t ht ih ci k n m e d i u m C S S 1
l e n g h t
r ib g o h rt d e r - pdc ro Oe onf ptr ioe e cr e d en s a o c u dr n ie b a sn i r f e d o l e r l m a t l a d oa o da bal d í rs e n e r e v a e i c a l d h d a e o a s w ib od r t d h e r - r i g b h o t r - d e r C S S 1
c o l o r b o r d e r - s t y l e
e n u n a s o l a d e c l a r a c i ó n .
A c e p t a los v a l o r e s q u e s e
p u e d e n d a r a las p r o p i e d a d e s
r i b g o h r t d - e c ro l - o r d Ee s b t o a rb l d e e c a e le al d c oe l r o e r c h d a e . l a l í n e a b o r d e r - c o l o r C S S 2
b o r d e r - E s t a b l e c e el estilo d e la b o r d e r - s t y l e C S S 2
1 1 2
right-style línea d e la d e r e c h a .
r ib go h r t d - e w r i - d t h d eD e l f a i d n e r e l c h g a r o s o r d e l a l í n e a t ht ih ci kn l e n g hm t e d i u m C S S 1
s tb y o l re d e r - eAvc asu c L l t ea o a t p r b r t e lp o as e r . c o l e p íd i n e e e a d l s a u d ne d s o et b i o l r o ca d o e n rd tc - e ou s ra t nt y l or l a o.e s d on t o t n e e d h h a i s d h d e dn C S S 1
solid d o u b l e
g r o o v e r i d g e inset
o u t s e t
b o r d e r - t o p la a b N s r o pe s rv io ap o d i f a e r d e a d c d e e s e u s d cn e r a i l b a i rl m í a n t n e o a e d rd a ae s w i b d o rt d h e r - t o p - C S S 1
ec o n n t o u r n n a o d se o l a a p a rd et c e l s a u r p a e c r i i ó on r. b o r d e r - c o l o r
pA c u e p d t e a n d l a o r s a v l a a l s o pr er s o p i q e u d e a d es se
c ob l o o r r d e r - t o p s uE ps e t r a i b o l r e . c e e l c o l o r d e l a l í n e a b o r d e r - c o l o r C S S 2
t ob p o - r s d t e y r l -e l í E n s e t a a sb u l p e e c r e i o r e .l estilo d e la b o r d e r - s t y l e C S S 2
t o b p o - r w d ie rd - t h s uD p e e f r i i n o er . e l g r o s o r d e l a l í n e a t ht ih ci kn l e n g hm t e d i u m C S S 1
w i b do r t d h e r - p a O r f a r e dc e e f i u n n i a r f l o s r m g a r o a s b o r r e e v s i a d d e o t ht ih ci kn l e n g hm t e d i u m C S S 1
t o d a s las líneas d e c o n t o r n o .
valores.
1 1 3
P r o p i e d a d e s d e clasificación
D e s c r i p c i ó n V a l o r e s W 3 C
P r o p i e d a d
c l e a r e lE s e t m a e b n l t e o c e j u n l t o o s a l a l d o os s c u a d l e e s nu on left right C S S 1
fe l s o t t á a n n t e p s e . r m i t i d o s los e l e m e n t o s n o n e b o t h
c u r s o r u t E i s l p i ze a c r i . f i c a el tipo d e c u r s o r a url C S S 2
a u t o
c r o s s h a i r
p o i n t e r d e f a u l t
n o n e
e-resize
n e - r e s i z e
n w - r e s i z e
n - r e s i z e
se-resize
s w - r e s i z e
s-resize
w - r e s i z e
t e x t
1 1 4
w a i t
h e l p
d i s p l a y I n d i c a c o m o u n e l e m e n t o d e b e r á n o n e C S S 1
p r e s e n t a r s e .
inline
b l o c k
list-item
r u n - i n
c o m p a c t
m a r k e r
t a b l e
inline-table
t a b l e - r o w
g r o u p
t a b l e - h e a d e r
g r o u p
t a b l e - f o o t e r
g r o u p
t a b l e - r o w
t a b l e - c o l u m n
g r o u p
1 1 5
t a b l e - c o l u m n
table-cell
t a b l e - c a p t i o n
float i Dm e a f g i e n n e o e u l n e l l u e g m a re n t d o o d n e d e b l o u q n u a e left n o n e right C S S 1
d e b e a p a r e c e r d e n t r o d e o t r o s
e l e m e n t o s .
p o s i t i o n pr e o C l s o a i l t c o i i v c ó a n o q fu u i n j e a . p e u l e e d m e e n s t e o r a e b s n o l u t n a a , f i s x t e a dt i a c b s o r el l u a t t e i v e C S S 2
visibility v i I s n i d b i l c e a o s i i n v u i n s i b e l el . e m e n t o d e b e s e r c o v l i sl i a b p l s e e h i d d e n C S S 2
C o n t r o l d e los t a m a ñ o s d e los e l e m e n t o s
h e i g h t e l E e s tm a e b n l t e o c . e la a l t u r a d e u n la e u n t g o t h C S S 1
%
h el i n g e h - t l í E n s e t a a s b. l e c e la d i s t a n c i a e n t r e las n nú o m r e m r a o l C S S 1
l e n g h t
%
h em i a g x h - t e l E es tm a e b n l t e o c . e l a a l t u r a m á x i m a d e u n ln e o n n g e t h C S S 2
%
1 1 6
w im d a t x h - e l E e s tm a e b n l t e o c . e el a n c h o m á x i m o d e ln e o n n g e t h C S S 2
%
h em i i g n h - t e l D e e m f ei nn e t o . l a a l t u r a m í n i m a d e u n %l e n g t h C S S 2
w i m d i t n h- e l E e s tm a e b n l t e o c . e el a n c h o m í n i m o d e %l e n g t h C S S 2
w i g h t D e f i n e el a n c h o d e u n e l e m e n t o . %a u t o C S S 1
l e n g t h
T i p o s d e letra
f o n t p Au c e e d p e t n a s l e o r s d va a t l o o s r e s a q lu a e s im c e o s n s am g e e n - u b o x C S S 1
ear esbn st r c ta e u a v e nt i n at a t b e d rl s a a . n p d r N e e o o n p s i l d ea d s df a i a c n d o i u e lr ns u a m e q n f u a o e s u r nd m s ae
s m a l l - c a p t i o n
s t a t u s - b a r
ú n i c a d e c l a r a c i ó n t o d a s las
p r o p i e d a d e s r e l a c i o n a d a s c o n
el t i p o d e letra.
f o n t - f a m i l y L a p r o p i e d a d f o n t - f a m i l y f a m i l y - n a m e C S S 1
c o n s i s t e e n u n a lista d e f u e n t e s
a las q u e el n a v e g a d o r p u e d e g e n e r i c - f a m i l y
1 1 7
o p t a r p a r a escribir los textos.

L a lista e s t á o r d e n a d a d e f o r m a
prioritaria: la p r i m e r a o p c i ó n
a p a r e c e p r i m e r o , l u e g o v i e n e
la s e g u n d a o p c i ó n y así
s u c e s i v a m e n t e . El n a v e g a d o r
elige el p r i m e r t i p o q u e e s
c a p a z d e utilizar. L o s n o m b r e s
d e las f u e n t e s p u e d e n s e r
n o m b r e s familiares o n o m b r e s
g e n é r i c o s .
font-si z e d Ae j l u e s t t r a . e l t a m a ñ o d e u n t i p o x -x s- ms am la l l s m a l l C S S 1
m e d i u m l a r g e
x-large
x x - l a r g e
s m a l l e r larger
l e n g h t
%
a d f j o un t s - t s i z e - ne l aS ei v g e i e g d l a o d t o n i r po o se dse t e á v el d e i t s or p a b o l n i ( i gf b au l ed n ,o t e a ) l n oú n m e r o C S S 2
utilizar o t r o t i p o d i f e r e n t e . L a
p r o p i e d a d font-size-adjust
e s p e c i f i c a e l " a s p e c t v a l u e " d e
la f u e n t e e l e g i d a p a r a q u e el
n a v e g a d o r p u e d a sustituirla
p o r o t r o tipo q u e s e a a c c e s i b l e
p r e s e r v a n d o la a l t u r a d e la
1 1 8
letra " x " y m a n t e n i e n d o la

legibilidad d e l t e x t o .
f o n t - s t r e t c h ptc o r La n o a m t v a r o ñ a c pco a cr d i o eó p n u i l n e a d a h f a o u r d e i n e z t x o e p fn . o t a n a t l s - i s ó e t n r n e t c e o h l nr e o d r u m c a i l r w i a d n e c r h o C S S 2
c a r á c t e r
ultra
c o n d e n s e d
e x t r a
c o n d e n s e d
c o n d e n s e d
s e m i
c o n d e n s e d
s e m i - e x p a n d e d
e x p a n d e d
e x t r a
e x p a n d e d
ulttra
e x p a n d e d
f o n t - s t y l e q Eu s e t d a b e l s e e c a e u t e i l l i e z s a t r .i l o d e f u e n t e o bn l o i r q m u a e l italic C S S 1
f o n t - v a r i a n t n f ou E e r s nc m r t a i e l b . e " s e m l a t l e l x - t c o a p m s e " d i o a n d t e e t u i n p a o sn m o a r l m l a - l c a p s C S S 1
f o n t - w e i g h t l c e oE t s n r t a a es l . b l q e u c e e s l t g á r n o s d o i r s e d ñ e a l d a t s r a l z a o s nb o o l r d m e a r l b o l l i dg h t e r C S S 1
1 1 9
1 0 0
2 0 0
3 0 0
4 0 0
5 0 0
6 0 0
7 0 0
8 0 0
9 0 0
G e n e r a r c o n t e n i d o s
C o n t e n t ui t n G i s e l e i n r z e t a a r a j e u n t c o o e l n c t o e d n o i c d l u o m s e n p t s y o e . u d l S o o e- s cs t o r u i n n t g e u r r l ( n a m e ) C S S 2
e l e m e n t o s : b e f o r e y :after.
c o u n t e r
( n a m e ,
list-style-type)
c o u n t e r s ( n a m e , s
tring )
c o u n t e r s ( n a m e ,
strin g,list-style
1 2 0
t y p e )
attr (X)
o p e n - q u o t e
c l o s e - q u o t e
n o - o p e n - q u o t e
n o - c l o s e - q u o t e
i n c oc u r n e t m e e r n - t ci na D c de r fa ei o mn c e u n r t r a e rc n u c á ie nl a t d oc e o n u t n sa e sd e o l r e c d tp e o a r b r . e a n o n e C S S 2
n ú m e r o
identificador
r ec so e u t n t e r - pc orD n eo tf d ai u nd c eo e r u e n l s v e i a l e l e m oc p rt or r e p . a r a q u d e a r s a e l n o n e C S S 2
n ú m e r o
identificador
Q u o t e s E s t a b l e c e el estilo d e las n o n e C S S 2
comillas.
string string
Listas y M a r c a d o r e s
list-style N o s o f r e c e u n a f o r m a a b r e v i a d a list-style C S S 1
p a r a def inir e n u n a ú n i c a t y p e
d e c l a r a c i ó n t o d a s las p r o p i e d a d e s
d e u n a list a. list-style
p o s i t i o n
list-style
1 2 1
i m a g e
list-style E s t a b l e c e u n a i m a g e n c o m o n o n e C S S 1
i m a g e e l e m e n t o m a r c a d o r e n u n a lista.
url
list-style E s t a b l e c e la p o s i c i ó n e n la q u e inside C S S 1
p o s i t i o n m a r c a d o r d e b e s e r c o l o c a d o . o u t s i d e
list-style E s t a b l e c e el t i p o d e m a r c a d o r a n o n e disc C S S 1
t y p e utilizar. circle
s q u a r e
d e c i m a l
d e c i m a l
l e a d i n g
z e r o l o w e r
r o m a n
u p p e r
r o m a n
l o w e r - a l f a
u p p e r - a l f a
l o w e r
g r e e k
l o w e r - l a t i n
u p p e r
latin
h e b r e w
a r m e n i a n
g e o r g i a n
cjk
1 2 2
i d e o g r a p h i
c
h i r a g a n a
k a t a k a n a
h i r a g a n a
i r o h a
k a t a k a n a
i r o h a
o f m f a s r e kt e r - la e u n t g o t h C S S 2
M á r g e n e s
m a r g i n ub o nL ra a d p e f r s o o rd p m e i a e u d n a a d b e r l m e a v m r i e g a n id t an o . n d o e s d o e f f r i e n c i e r m a r gg i i n n - - r t i o g ph t C S S 1
le a n s u p n r a o p úi ne i d c a a d e d s e c d l a e r a lc o i s ó n c t u o a dt ar os
m a r g i n
b o t t o m
m a r g i n - l e f t
b mo a t r t g o i m n - e l E es t m a e b n l t e o c . e e l m a r g e n i n f e r i o r d e l al e u n t g o t h C S S 1
1 2 3
m a r g i n - l e f t d eE ls te a l b e l m e e c n e t o e . l m a r g e n i z q u i e r d o al e u n t g o t h C S S 1
%
m a r g i n - r i g h t e l E se t m a e b n l t e o c . e e l m a r g e n d e r e c h o d e l al e u n t g o t h C S S 1
%
m a r g i n - t o p e l E es t m a e b n l t e o c . e e l m a r g e n s u p e r i o r d e l la e u n t g o t h C S S 1
L í n e a s d e c o n t o r n o
o u t l i n e p ar N r o o a p s i e o d f ar e e d s c e t e a s b u d l n e a c c e o f r n o t r o m r t a n o o a d . b a r s e v i a l d a a s o u t l i n e - sc to yl l o e r C S S 2
o u t l i n e - w i d t h
o u t l i n e - c o l o r d eE s u t n a b e l l e e c m e e e n l t o c . o l o r d e l c o n t o r n o ic no vl e o r t C S S 2
o u t l i n e - s t y l e d eE s u t n a b e l l e e c m e e e n l t o e .s t i l o d e l c o n t o r n o s o n l o i dn e d o t t e d C S S 2
d o u b l e d a s h e d
g r o o v e r i d g e
1 2 4
inset o u t s e t
w io u d t t l h i n e - c o D n e t f io n r e n o e d l e u g n r o e s l o e r m e d n e t o . l a línea t ht ih ci kn m e d i u m C S S 2
l e n g h t
E s p a c i o e n b l a n c o d e n t r o d e u n e l e m e n t o ( p a d d i n g )
p a d d i n g f o E s r t m a a p a r b o r p e i v e i d a a d d a n d o s e o d f e r f e i c n i e r u ne a n p a d d ii n n g g - - r t i og ph t C S S 1
au s n p a e cú nt io c s a d e c l l a a r s a c s i e ó pn a t r o a d c o i s o n l e o s
e n l t e r m e e n t e o l y sc u o s n t l e í mn i i t d e o s . d e u n p a d d i n g - b o t t o m
p a d d i n g - l e f t
b po a t d t d o i m n g - de l De e sc f uo i n n l t e í e m ni e tli e d e oi s n p f d e a re c i i o o u r . n q u e e l e s m e e p n a t r o a %l e n g t h C S S 1
p a d d i n g - l e f t de l De e sc f uo i n n l t e í e m ni e tli e d e oi s z p q d a u e c i ie ro u d n o q . u e e l e s m e e p n a t r o a %l e n g t h C S S 1
r ip g a h d t d i n g - de l De e sc f uo i n n l t e í e m ni e tli e d e od s e p r d a e e c c i h o u o n . q u e e l e s m e e p n a t r o a %l e n g t h C S S 1
p a d d i n g - t o p D e f i n e el e s p a c i o q u e s e p a r a l e n g t h C S S 1
el c o n t e n i d o d e u n e l e m e n t o
d e s u límite s u p e r i o r . %
1 2 5
P o s i c i o n a m i e n t o
b o t t o m o e E l h s e a t m c a e i b n a l t e a o c r e rq i u l b a e a ) d l i o a s c t l a o a n n c t q i i u a e e n ( e h d . a e c b i a e a e b s a t j a o r %a u t o C S S 2
er l e l l a í c m i ó t n e i c n o f e n r i e o l r d l e í m u i t n e e i l n e f m e r e i n o t r o d e e n l
l e n g t h
clip E d l e D e s e f e l i a e n d m e a e l y n a t l o f u eo s g r e o m a s c e o d r m e t u a e u s e n t n r e a l . a e m f e o n r t m o a . as uh t a o p e C S S 2
left i z E q s u t i a e b r l d e a c e o l a d ed i r s e t c a h n a c ) i a a l( a h a q c u i a e s l e a al e u n t g o h t C S S 2
de le e b m e e d n e t j o a r e e n l l r í e m l i a t c e i ó i n z q c u o i ne r d e lo dl í e m i u t n e
c i o z n q tu i e rn d e o . d e l e l e m e n t o q u e lo %
o v e r f l o w dc o De n e s t f u ei n á ie r d e ao l . o d qe u u e n o e c l u e r mr e n ct ou a e n x d c o e d e e l h i v i d s d i e b ln e s c r o l l C S S 2
a u t o
right i z E q s u t i a e b r l d e a c e o l h a a c id i a s t l a n c d i e a r e c ( h a c ) i a a l a a% u t o C S S 2
q d ue e u s n e d e e l b e e m e d n e j t a o r e c l o l n í m r i t e e s p d e e c r t e o c h a o l
cb o n r t d e e n e d o d r e . r e c h o d e l e l e m e n t o l e n g t h
t o p o l o E s c h t o a a n c b t i l i a e e c n a ee r . r l i a b a d ) i s a t a n l c a i a q u ( h e a c e i l a l a í b m a i j t o e a% u t o C S S 2
es l u p l e í r m i ot er s d u e p b e e r i e o s r t a d r e l e n e l r e e m l ea c n i t ó o n q c u o e n
l e n g t h
a l v i e g r nt i c a l - u E n s e t l a e b ml e c n e t o l . a a l i n e a c i ó n v e r t i c a l d e b a s e l i n e s u b C S S 1
1 2 6
t o p
s u p e r
t e x t - t o p
m i d d l e
b o t t o m
t e x t - b o t t o m
l e n g t h
%
z - i n d e x p r E e s s t e a n b t l ae c c e i ó n ( e p l r i o r i d o a r d d) e n d e ld o es a u t o C S S 2
se u l p e e m r e p n o t s o i s c i ó n e n e n t r c e a s e lo l o s . d e existir n ú m e r o
F o r m a t o d e t a b l a s
c ob lo l r a d p e s r e - b o E s r t d a e b dl e c u e n e a l t m a o b d l a e . l o d e l í n e a d e c o l l a p s e C S S 2
s e p a r a t e
s pb ao cr id ne gr - l í E n s e t a a s b l d e e c e c o l n a t d o i r s n t o a n d c i e a l e a sn t c r e e l d l a s l e n g t h l e n g h t C S S 2
a d y a c e n t e s (sólo
a p l i cable e s
c u a n d o s e utiliza el m o d e l o
" s e p a r a t e d b o r d e r s " p a r a las
líneas d e límite d e la tabla).
1 2 7
c a p t i o n - s i d e l e E y s t e a n b d l a e e c ne l a l t a a b l p a o . s i c i ó n d e la tr i o g p h t C S S 2
b o t t o m
left
e m p t y - c e l l s c o I n d t i e c n a i s d i o l a s v i c s e i l b d l a e s q d u e e b e n n o t t i e n e rn sh i h d o e w C S S 2
sl í o n l e o a s c u d a e n d l o í m i s t e o u s a n o s ( e a p l a i r c a a t b e l d e
b o r d e r s ) .
t a b l e - l a y o u t d i E s s e c ñ o a g r e l a e l t a a b l l g a o. r i t m o a u s a r p a r a fa i u x t e o d C S S 2
F o r m a t o d e t e x t o
c o l o r E s t a b l e c e el c o l o r d e l texto. c o l o r C S S 1
d i r e c t i o n d e E l s t a e b x lt o e . c e l a d i r e c c i ó n d e e s c r i t u r a ltrrtl C S S 2
s p l ae t c t i e n r g - e n A t u r m e e l n o ts a c a r o a c d t i e sr e m s i . n u y e e l e s p a c i o ln e o n r g m t a h l C S S 1
text-align e l A le i m n e e n a t o . e l t e x t o d e n t r o d e u n cl e f n t t r e i r g h t C S S 1
justify
d e t ce x o t r - a t i o n t e A x ñ t ao . d e detalles d e c o r a t i v o s al u n d o e n r el i n e C S S 1
1 2 8
o v e r l i n e
l i n e
t h r o u g h t
blink
t e x t - i n d e n t l p a r D i e i m s z e p q rl u a i ez l r a í d n a h e a a l c d a i e a p t r l e a i x m d t e e o r . r a e c l h e a t r o a d h a e c i l a a %l e n g t h C S S 1
t r t ea x n t s - f o r m e l C eo nm t e r n o t l o a . las letras d e u n c a n p o i tn a e l i c e C S S 1
u p p e r c a s e
l o w e r c a s e
u n i c o d e - b i d i en o m r b m e a d l C S S 2
b i d i - o v e r r i d e
w h i t e - s p a c e b l D a e n f ci on e d e c n ó t m r o o ds e t u r n a t e a l e l m e sn p t a o c . i o e n n no o w r m a a p l p r e C S S 1
s pw a o c r i d n - g e n A t u r m e e p n a t l a b r o a s d. i s m i n u y e e l e s p a c i o nl e o n r g m t a h l C S S 1
1 2 9
1 3 0
I m p r i m i r
U n a i m p r e s i ó n satisfactoria d e los d o c u m e n t o s escritos e n H T M L
s i e m p r e h a s i d o u n t e m a d e l i c a d o . El h e c h o d e q u e u n a p á g i n a H T M L
p u e d a t e n e r l o n g i t u d y a n c h u r a arbit rarias e n t r a e n conflicto c o n el
t a m a ñ o fijo d e u n a h o j a d e p a p e l . A m e n u d o e s m u y difícil h a c e r q u e el
a n c h o d e u n a p á g i n a W e b q u e p a e n u n a h o j a d e p a p e l y o b t e n e r u n a
p á g i n a e n la q u e n o s e r o m p a n los e l e m e n t o s q u e d e b e n p e r m a n e c e r
e n t e r o s .
El e s t á n d a r C S S 2 trata d e d a r a y u d a p a r a aliviar e s t e p r o b l e m a a t r a v é s
d e la d e f i n i c i ó n d e las p r o p i e d a d e s e s p e c í f i c a s p a r a la i m p r e s i ó n d e
d o c u m e n t o s e n p a p e l .
o r p h a n s l í D n e e f a i s n de e e u l n p n á ú r m r e a f r o o q u m e í n s i e m p o u e d e n ú m e r o C S S 2
d e j a r s o l o al final d e u n a p á g i n a .
p a g e de l Ee es b tm e a e b n l t u e ot c i . le i z e a l r t i p o a r d a e p i á m g p i r n i a m i q r u e u s n e a u t o C S S 2
identificad or
a fp t a e g r e - b r e a k - d D e e p f á i g n i e n c a ó d m e os p s u e é s h a d c e e u n n l o e s l e c m a e m n b t i o o . s a u t o a l w a y s C S S 2
a v o i d l eft
right
b e p f a o g re e- b r e a k - d D e e p f á i g n i e n c a ó a m n t o e s e d he a u c n e n e l l e o m s e c n a t m o b . i o s a u t o a l w a y s C S S 2
a v o i d left
right
i np s a i g d e e - b r e a k - d D e e p f á i g n i e n c a ó d m e n o t s r e o hd a e c u e n n e l l o e s m c e a n m t b o i . o s a u t o a v o i d C S S 2
w i d o w s D e f i n e el n ú m e r o m í n i m o d e n ú m e r o C S S 2
líneas d e u n p á r r a f o q u e p u e d e
e s t a r s o l o e n la p a r t e s u p e r i o r d e
1 3 1
u n a p á g i n a .
1 3 2
C S S 3
E n C S S 3 s e i n t r o d u c e n
b a s t a n t e s características q u e m e j o r a n
n o t a b l e m e n t e el l e n g u a j e C S S y n o s d a la posibilidad d e c r e a r d i s e ñ o s
m u c h o m á s atractivos.
S e l e c t o r e s d e a t r i b u t o s
C S S 3 i n c o r p o r a tres n u e v o s s e l e c t o r e s d e atributos.
El s e l e c t o r d e a t r i b u t o E [ a t r i b u t o ^ = "string"]. El s e l e c t o r d e a t r i b u t o s E
[ a t r i b u t o ^ = "string"] c a s a c o n el e l e m e n t o E q u e t i e n e e l n o m b r e d e
a t r i b u t o c o m e n z a n d o p o r la c a d e n a . L a sintaxis g e n e r a l d e l r é g i m e n d e l
s e l e c t o r C S S p a r a e s t o es: E [ a t r i b u t o ^ = "string"] { p r o p i e d a d :
va lor;} d o n d e E e s u n sel ec tor.
L o s s i g u i e n t e s p á r r a f o s c u y o a t r i b u t o título c o m i e n z a c o n b a t i e n e n el
f o n d o e n c o l o r v e r d e :
C S S :
p [title ^ = " b a " ] { b a c k g r o u n d : # 0 6 0 ; }
H T M L :
 P á r r a f o s i n c o l o r d e f o n d o v e r d e 
 P á r r a f o s i n c o l o r d e f o n d o v e r d e 
 P á r r a f o c o n c o l o r d e f o n d o v e r d e 
 P á r r a f o s i n c o l o r d e f o n d o v e r d e 
1 3 3
 P á r r a f o c o n c o l o r d e f o n d o v e r d e 
 P á r r a f o s i n c o l o r d e f o n d o v e r d e 
S u p o n g a m o s la s i g u i e n t e e s t r u c t u r a H T M L e n u n d o c u m e n t o :
< d i v i d = " n a v - p r i m a r y " > < / d i v >
< d i v i d = " c o n t e n t - p r i m a r y " > < / d i v >
< d i v i d = " c o n t e n t - s e c o n d a r y " > < / d i v >
< d i v i d = " t e r t i a r y - c o n t e n t " > < / d i v >
< d i v i d = " n a v - s e c o n d a r y " > < / d i v >
C o n el u s o d e l s e l e c t o r d e a t r i b u t o p a r a s u b c a d e n a s s e p u e d e c a s a r
c o m b i n a c i o n e s d e las p a r t e s e s t r u c t u r a l e s d e l d o c u m e n t o .
L a s i g u i e n t e r e g l a d e f i n e u n c o l o r d e f o n d o p a r a t o d o s los e l e m e n t o s
D I V c u y o n o m b r e d e I D c o m i e n z a c o n " n a v " :
d i v [ i d ^ = " n a v " ] { b a c k g r o u n d : # ff0;}
P a r a n u e s t r o e j e m p l o el s e l e c t o r c a s a c o n d i v # n a v - p r i m a r y y d i v # n a v
s e c o n d a r y .
El s e l e c t o r d e a t r i b u t o E [ a t r i b u t o $ = "string"]. El s e l e c t o r d e a t r i b u t o s E
[atri b u t o $ = "string"] c a s a c o n el e l e m e n t o E q u e t i e n e el n o m b r e d e
a t r i b u t o q u e t e r m i n a e x a c t a m e n t e p o r la c a d e n a d e t e x t o i n d i c a d a .
1 3 4
El s i g u i e n t e e j e m p l o s e l e c c i o n a t o d o s los e n l a c e s q u e a p u n t a n a u n a
p á g i n a :
a [ h r e f $ = " d i r e c c i ó n W e b " ] { . . . }
P a r a c a s a r c o nlos e l e m e n t o s D I V q u e t e n g a n s u n o m b r e d e I D
t e r m i n a d o p o r " p r i m a r y " s e p o d r í a utilizar la s i g u i e n t e regla:
d i v [ i d $ = " p r i m a r y " ] { b a c k g r o u n d : # ff0;}
A h o r a el s e l e c t o r c a s a c o n d i v # n a v - p r i m a r y y div # c o n t e n t - p r i m a r y .
El s e l e c t o r d e a t r i b u t o E [ a t r i b u t o * = "string"]. El s e l e c t o r d e a t r i b u t o s
E [ a t r i b u t o * = string ] c a s a c o n el e l e m e n t o E c u y o v a l o r c o n t i e n e la
c a d e n a d e t e x t o i n d i c a d a .
El e j e m p l o q u e s e i n d i c a a c o n t i n u a c i ó n s e l e c c i o n a t o d o s los títulos h 1
c u y o a t r i b u t o title c o n t e n g a la p a l a b r a "capítulo":
h 1 [ t i t l e * = " c a p í t u l o " ] { . . . }
L a s i g u i e n t e r e g l a d e f i n e u n c o l o r d e f o n d o p a r a t o d o s los e l e m e n t o s
D I V q u e t e n g a n e n s u n o m b r e el s u b s t r i n g " c o n t e n t " :
d i v [ i d * = " c o n t e n t " ] { b a c k g r o u n d : # ff0;}
L o s e l e m e n t o s c a s a d o s c o n e s t a r e g l a s o n d i v # c o n t e n t - p r i m a r y , d i v #
c o n t e n t - s e c o n d a r y y d i v # tertiary-content.
1 3 5
P s e u d o c l a s e s
L a p s e u d o - c l a s e :target
C o n s i d e r e las d i r e c c i o n e s U R L c o m o u n e n l a c e p a r a u n f r a g m e n t o
identificador ( u n a s e ñ a l " # " s e g u i d o d e u n n o m b r e o el I D d e u n
e l e m e n t o ) q u e a p u n t a a u n d e t e r m i n a d o e l e m e n t o d e n t r o d e l p r o p i o
d o c u m e n t o . El e l e m e n t o p a r a el c u a l la d i r e c c i ó n U R L s e ñ a l a e s el
d e s t i n o (target) y la p s e u d o - c l a s e : t a r g e t p e r m i t e c a s a r e s e e l e m e n t o . Si
la U R L n o c o n t i e n e u n f r a g m e n t o identificador la p s e u d o - c l a s e : t a r g e t
n o c a s a c o n n i n g ú n e l e m e n t o .
C o n s i d e r a n d o la e s t r u c t u r a H T M L m o s t r a d a e n el e j e m p l o anterior. L a
s i g u i e n t e r e g l a p o n e u n a línea r e s a l t a d a ( c o n t o r n o ) a l r e d e d o r d e l div #
c o n t e n t - p r i m a r y c u a n d o la d i r e c c i ó n U R L c o n t i e n e e s t e f r a g m e n t o
id entificador:
d i v # c o n t e n t - p r i m a r y : t a r g e t {outline: 1 p x solid # 3 0 0 ; }
L a s p s e u d o - c l a s e s : e n a b l e d y : d i s a b l e d
L a s p s e u d o clases: e n a b l e d y: d i s a b l e d p e r m i t e n a los d e s a r r o l l a d o r e s
c o n t r o l a r la a p a r i e n c i a d e e l e m e n t o s d e la interf az d e u s u a r i o ( c o n t r o l
d e f o r m u l a r i o s ) q u e e s t á n h a b i l i t a d o s o d e s h a b i l i t a d o s ( e n a b l e d o
disabled). L a s s i g u i e n t e s r e g l a s d e f i n e n d i f e r e n t e s c o l o r e s d e f o n d o p a r a
las e n t r a d a s d e t e x t o d e p e n d i e n d o d e si e s t á n h a b i l i t a d o s o
d e s h a b i l i t a d o s :
i n p u t [ t y p e = "text"]: e n a b l e d { b a c k g r o u n d : # ffc;}
i n p u t [ t y p e = "text"]: d i s a b l e d { b a c k g r o u n d : # d d d ; }
1 3 6
L a p s e u d o - c l a s e : c h e c k e d
L a p s e u d o - c l a s e : c h e c k e d p e r m i t e a los d e s a r r o l l a d o r e s c o n t r o l a r la
a p a r i c i ó n d e los e l e m e n t o s d e e l e m e n t o s d e r a d i o y casillas d e
verificació n ( c h e c k b o x ) . L a r e g l a C S S q u e s e m u e s t r a a c o n t i n u a c i ó n
d e f i n e u n b o r d e v e r d e p a r a los e l e m e n t o s d e r a d i o y casillas d e
verificació n q u e s e m a r c a n ( c h e c k e d ) :
i n p u t : c h e c k e d { b o r d e r : 1 p x solid # 0 9 0 ; }
P s e u d o C l a s e s E s t r u c t u r a l e s
L a s p s e u d o c l a s e s e s t r u c t u r a l e s p e r m i t e n a los d e s a r r o l l a d o r e s c a s a r
e l e m e n t o s b a s a d o s e n la i n f o r m a c i ó n d i s p o n i b l e e n la e s t r u c t u r a d e l
d o c u m e n t o y q u e n o p u e d e n s e r c a s a d o s p o r s e l e c t o r e s s i m p l e s o
s e l e c t o r e s c o m b i n a d o s .
L a p s e u d o - c l a s e : r o o t
L a p s e u d o - c l a s e : r o o t c a s a c o n el e l e m e n t o raíz d e l
d o c u m e n t o . E n H T M L el e l e m e n t o raíz e s s i e m p r e el e l e m e n t o
H T M L . L a s r e g l a s d e estilo q u e s e m u e s t r a n a c o n t i n u a c i ó n s o n i d é n t i c a s
( b u e n o , casi idént icas: r o o t t i e n e u n a e s p e c i f i c i d a d m a y o r q u e H T M L ) :
: r o o t { b a c k g r o u n d : # ff0;}
h t m l { b a c k g r o u n d : # ff0;}
L a p s e u d o - c l a s e : n t h - c h i l d ()
1 3 7
L a p s e u d o - c l a s e : n t h - c h i l d () c a s a u n
e l e m e n t o q u e t i e n e u n
d e t e r m i n a d o n ú m e r o d e e l e m e n t o s e c u n d a r i o a n t e r i o r e n la e s t r u c t u r a
d e l d o c u m e n t o . El a r g u m e n t o a s e r c o l o c a d o d e n t r o d e los p a r é n t e s i s ,
e n el s e l e c t o r p u e d e s e r u n n ú m e r o , u n a p a l a b r a c l a v e ( k e y w o r d ) o u n a
f ó r m u l a .
U n n ú m e r o n c a s a al e n é s i m o hijo. L a s i g u i e n t e r e g l a s e aplica a t o d o s
los p á r r a f o s q u e s o n el t e r c e r hijo d e s u e l e m e n t o p a d r e :
p : n t h - c h i l d (3) {color: # f00;}
L a s p a l a b r a s c l a v e ( k e y w o r d s ) o d d y e v e n s e p u e d e n u tiliza r p a r a c a s a r
e l e m e n t o s hjios, c u y a p o s i c i ó n d e í n d i c e s e a p a r o i m p a r . L a p o s i c i ó n d e l
í n d i c e d e l p r i m e r hijo e s 1. L a s i g u i e n t e r e g l a c a s a c u a l q u i e r e l e m e n t o p
q u e s e a el p r i m e r o , t e r c e r o , q u i n t o , etc. hijo d e s u e l e m e n t o p a d r e :
p : n t h - c h i l d ( o d d ) { c o l o r : # f00;}
L a s i g u i e n t e r e g l a c a s a c u a l q u i e r e l e m e n t o p q u e s e a el s e g u n d o , c u a r t o ,
s e x t o , etc. hijo d e s u e l e m e n t o p a d r e :
p : n t h - c h i l d ( e v e n ) { c o l o r : # f00;}
L a f ó r m u la n + b s e p u e d e utiliza r p a r a c r e a r r e p e t i c i o n e s m á s
. E n la f ó r m u l a
c o m p l e j a s q u e r e p r e s e n t a el t a m a ñ o d e u n b u c l e , n e s u n
c o n t a d o r q u e c o m i e n z a e n 0 (cero), y b r e p r e s e n t a u n v a l o r q u e s e
a ñ a d e p a r a d e t e r m i n a r la p r i m e r a iteración. T o d o s lo s v a l o r e s s o n
n ú m e r o s e n t e r o s .
1 3 8
L a r e g l a s i g u i e n t e c a s a r á c u a l q u i e r e l e m e n t o p c u y a p o s i c i ó n d e í n d i c e
s e a u n m ú l t i p l o d e tres. E n la p r i m e r a r e g l a b e s igual a c e r o y p u e d e
o m i t i r s e , c o m o s e h i z o e n la s e g u n d a regla:
p : n t h - c h i l d ( 3 n + 0 ) {color: # f00;}
p : n t h - c h i l d ( 3 n ) {color: # f00;}
El v a l o r q u e s e s u m a p a r a d e t e r m i n a r la p r i m e r a i t e r a c i ó n s e p u e d e
utilizar p a r a definir e n q u é hij o s e d e b e c o m e n z a r a aplicar la regla. Si
t i e n e u n a t a b l a c o n 2 0 filas y d e s e a q u e c a d a fila i m p a r a p artir d e la
d é c i m a línea t e n g a u n c o l o r d e f o n d o d i f e r e n t e , p u e d e utilizar la
s i g u i e n t e regla:
tr: n t h - c h i l d ( 2 n + 1 1 ) { b a c k g r o u n d : # ff0;}
C o m o n c o m i e n z a e n 0 (cero), el p r i m e r e l e m e n t o t r a s e r c a s a d o e s el
1 1 º . El s i g u i e n t e e s el 1 3 , l u e g o el 1 5 y así s u c e s i v a m e n t e .
L a p s e u d o - c l a s e :nth-last-child ()
L a p s e u d o - c l a s e : nth-last-child () f u n c i o n a d e m a n e r a similar a la
p s e u d o - c l a s e : n t h - c h i l d (), e x c e p t o p o r el h e c h o q u e c a s a u n e l e m e n t o
q u e t i e n e u n d e t e r m i n a d o n ú m e r o d e e l e m e n t o d e l m i s m o ni vel
p o s t e r i o r e n la e s t r u c t u r a d e l d o c u m e n t o . E n o t r a s p a l a b r a s , la
n u m e r a c i ó n e m p i e z a e n el ú l t i m o hijo y h a c i a atrá s. L a r e g l a s i g u i e n t e
c a s a el p e n ú l t i m o ( s e g u n d o d e s d e a t r á s h a c i a a d e l a n t e ) e l e m e n t o tr d e
u n a tabla:
tr: nth-last-child (2) { b a c k g r o u n d : # ff0;}

1 3 9
L a p s e u d o - c l a s e : n t h - o f - t y p e ()
L a p s e u d o - c l a s e :nth-of-type() f u n c i o n a d e m a n e r a similar a la p s e u d o
clase: n t h - c h i l d (), p e r o s ó l o t i e n e e n c u e n t a los e l e m e n t o s d e u n m i s m o
t i p o d e e l e m e n t o al q u e s e aplica la re gla. L a s i g u i e n t e r e g l a c a s a
c u a l q u i e r e l e m e n t o p q u e s e a el t e r c e r hijo d e s u e l e m e n t o p a d r e :
p : n t h - o f - t y p e ( 3 ) { b a c k g r o u n d : # ff0;}
E s t e m o d i f i c a d o r e s útil c u a n d o q u i e r e a s e g u r a r s e d e q u e v a a c a s a r el
t e r c e r e l e m e n t o p. A p r i m e r a vista s e p o d r í a p e n s a r q u e n o h a y n i n g u n a
d i f e r e n c i a c o n el s e l e c t o r nth-child, p e r o : n t h - c h i l d (3) c o n s i d e r a t o d o s
los e l e m e n t o s d e l m i s m o nivel e n s u e n u m e r a c i ó n y, p o r t a n t o , el
r e s u l t a d o s e r á d i f e r e n t e a m e n o s q u e t o d o s los e l e m e n t o s h e r m a n o s d e
p s e a n t a m b i é n e l e m e n t o s p.
L a p s e u d o - c l a s e : n t h - l a s t - o f - t y p e ()
L a p s e u d o - c l a s e : nth- l a s t - o f - t y p e () c a s a u n e l e m e n t o q u e t i e n e u n a
serie d e e l e m e n t o s h e r m a n o s d e l m i s m o t i p o s i e n la e s t r u c t u r a
g u i e n t e s
d e l d o c u m e n t o . A s í c o m o e n la p s e u d o - c l a s e :nth- last-child () el
c o m i e n z o d e la c u e n t a e s d e s d e el ú l t i m o hijo y el r e c u e n t o s e h a c e al
r e v é s . L a r e g l a a s e g u i r c a s a c a d a p e n ú l t i m o e l e m e n t o h e r m a n o d e l t i p o
p:
p : n t h - l a s t - o f - t y p e (2) { b a c k g r o u n d : # ff0;}
1 4 0
L a p s e u d o - c l a s e :last-child
L a p s e u d o - c l a s e :last-child c a s a u n e l e m e n t o q u e e s el ú l t i m o hijo d e s u
e l e m e n t o p a d r e .
E s lo m i s m o q u e :nth-last-child (1). L a r e g l a s i g u i e n t e c a s a t o d o s los

e l e m e n t o s p q u e s o n el ú l t i m o e l e m e n t o hijo d e s u e l e m e n t o p a d r e :
p : last-child { b a c k g r o u n d : # ff0;}
E j e m p l o 1:
El ú l t i m o e l e m e n t o d e u n a lista c o n el f o n d o e n v e r d e :
C S S :
o l . t e s t - u n o li: l a s t - c h i l d { b a c k g r o u n d : # 0 6 0 ; }
H T M L :
< o l c l a s s = " t e s t - u n o " >
<li> e l e m e n t o d e la lista < / li>
<li> El f o n d o d e e s t e artículo d e b e s e r d e c o l o r v e r d e </li>
< / o l > d e b e s e r d e c o l o r v e r d e
1 4 1
E j e m p l o 2:
L a ú l t i m a c o l u m n a d e u n a t a b l a c o n e l f o n d o e n v e r d e :
C S S :
t a b l e . t e s t - d o s tr t d : l a s t - c h i l d ( b a c k g r o u n d : # 0 6 0 ; }
H T M L :
< t a b l e c l a s s = " t e s t - d o s " b o r d e r = " 1 " >
< t r >
< t d > M ó v i l 1 . 1 < / t d >
< t d > M ó v i l 1 . 2 < / t d >
< t d > M ó v i l v e r d e < / t d >
< / t r >
< t r >
< t d > M ó v i l 2 . 1 < / t d >
< t d > M ó v i l 2 . 2 < / t d >
< t d > M ó v i l v e r d e < / t d >
< / t r >
< t r >
1 4 2
< t d > M ó v i l 3 . 1 < / t d >
< t d > M ó v i l 3 . 2 < / t d >
< t d > M ó v i l v e r d e < / t d >
< / t r >
< / t a b l e >
L a p s e u d o - c l a s e :first-of-type
L a p s e u d o - c l a s e :first-of-type c a s a u n e l e m e n t o q u e e s el p r i m e r
h e r m a n o d e s u tipo. E s lo m i s m o q u e :nth-of-type(1).
p : first-of-type { b a c k g r o u n d : # ff0;}
L a p s e u d o - c l a s e :last-of-type
L a p s e u d o - c l a s e :last-of-type c a s a u n e l e m e n t o q u e e s el ú l t i m o
h e r m a n o d e s u tipo. E s lo m i s m o q u e : nth-last-of-type(1).
p : l a s t - o f - t y p e { b a c k g r o u n d : # ff0;}
L a p s e u d o - c l a s e : o n l y - o f - t y p e
L a p s e u d o - c l a s e : o n l y - o f - t y p e c a s a u n e l e m e n t o c u y o e l e m e n t o p a d r e
n o t i e n e o t r o hijo d e l m i s m o tip o c u y o e l e m e n t o p r i m a r i o n o t i e n e o t r o s
e l e m e n t o s s e c u n d a r i o s d e l m i s m o tipo. E s l o m i s m o ( p e r o c o n u n a
m e n o r especificidad) q u e : fir st-of-type: last- of-type o :nth-of-type(1):
1 4 3
nth-last-of-type (1).
p : o n l y - o f - t y p e { b a c k g r o u n d : # ff0;}
L a p s e u d o - c l a s e :only-child
L a p s e u d o - c l a s e :only-child c a s a u n e l e m e n t o q u e e s el ú n i c o hijo d e s u
e l e m e n t o p a d r e . E s lo m i s m o ( p e r o c o n u n a m e n o r e s p e c i f i c i d a d ) q u e
:first-child: last-child o : n t h - c h i l d (1): nth-last-child (1).
p : o n l y - c h i l d { b a c k g r o u n d : # ff0;}
E j e m p l o :
U n e l e m e n t o p ú n i c o hijo d e u n D I V y l u e g o o t r o e l e m e n t o p ú n i c o hijo
d e u n b l o c k q u o t e t e n d r á n f o n d o v e r d e :
C S S :
p : o n l y child { b a c k g r o u n d : # 0 6 0 ; }
H T M L :
< d i v >
U n t e x t o e n el d i v
 E s t e p á r r a f o e s el ú n i c o hijo d e u n d i v y d e b e t e n e r d e f o n d o e n
v e r d e 
y l u e g o m á s t e x t o e n el div.
1 4 4
< / d i v >
 U n p á r r a f o d e d i v 

 Y a h o r a u n hijo ú n i c o d e b l o c k q u o t e q u e d e b e t e n e r d e f o n d o e n

v e r d e . 

El p s e u d o n e g a c i ó n : n o t ()
El p s e u d o n e g a c i ó n : n o t () n i e g a el c a s a m i e n t o c o n u n e l e m e n t o .
L a si ntaxis g e n e r a l d e C S S p a r a la p s e u d o n e g a c i ó n es : C: n o t (E)
{ p r o p i e d a d : valor ;} d o n d e C e s el e l e m e n t o c o n t e n i d o e n E. A q u í la
r e g l a C S S s e aplic ará a t o d o s los e l e m e n t o s d e C , m e n o s lo s e l e m e n t o s
d e E.
E j e m p l o 1:
Q u e r e m o s excluir los e l e m e n t o s s p a n c o n t e n i d o s d e n t r o d e u n D I V y los

d e m á s t e n d r á n f o n d o v e r d e :
C S S :
div.test-cuatro: n o t ( s p a n ) { b a c k g r o u n d : # 0 6 0 ; }
H T M L :
< d i v c l a s s = " t e s t - c u a t r o " >
1 4 5
< s p a n > U n t e x t o c o n t e n i d o e n el d i v y d e n t r o d e S P A N n o t i e n e f o n d o
v e r d e < / s p a n >

E s t e p á r r a f o e s hijo d e u n d i v y d e b e t e n e r c o l o r v e r d e d e f o n d o
y < s p a n > a q u í d e n t r o d e S P A N n o d e b e r á t e n e r f o n d o v e r d e < /
s p a n >

Y a h o r a u n b l o c k q u o t e d e n t r o d e l d i v y d e b e t e n e r f o n d o e n c o l o r
v e r d e . 

< / d i v >
E j e m p l o 2:
T o d a s las c o l u m n a s d e u n a tabla, e x c e p t o la ú l t i m a , c o n el f o n d o e n
v e r d e :
C S S :
t a b l e . t e s t - c i n c o tr t d : n o t (: l a s t - c h i l d ) { b a c k g r o u n d : # 0 6 0 ; }
H T M L :
< t a b l e c l a s s = " t e s t - c i n c o " b o r d e r = " 1 " >
< t r >
1 4 6
< t d > M ó v i l v e r d e < / t d >
< t d > M ó v i l v e r d e < / t d >
< t d > M ó v i l 1 . 3 < / t d >
< / t r >
< t r >
< t r >
< t d > M ó v i l v e r d e < / t d >
< t d > M ó v i l v e r d e < / t d >
< t d > M ó v i l 2 . 3 < / t d >
< / t r >
< t r >
< t d > M ó v i l v e r d e < / t d >
< t d > M ó v i l v e r d e < / t d >
< t d > M ó v i l 3 . 3 < / t d >
< / t r >
< / t a b l e >
1 4 7
L a p s e u d o - c l a s e : e m p t y
L a p s e u d o - c l a s e : e m p t y c a s a c o n u n e l e m e n t o vacío. L a sintaxis g e n e r a l
d e C S S p a r a e s t a p s e u d o - c l a s e es: E: e m p t y { p r o p i e d a d : valor;} d o n d e E
e s u n e l e m e n t o vacío.
E j e m p l o :
U n p á r r a f o v a c í o t e n d r á f o n d o v e r d e :
N o t a : P a r a la visualización d e l f o n d o t e n d r á q u e e s t a b l e c e r u n a altura
p a r a el p á r r a f o .
C S S :
div.test-seis p : e m p t y { b a c k g r o u n d : # 0 6 0 ; h e i g h t : 4 0 p x ; }
H T M L :
< d i v c l a s s = " t e s t - s e i s " >
 E s t e p á r r a f o n o e s t á v a c í o y n o d e b e t e n e r n i n g ú n f o n d o e n c o l o r
v e r d e ,
p e r o el s i g u i e n t e p á r r a f o q u e sí e s t á v a c í o y d e b e t e n e r el f o n d o e n
v e r d e . 
 
< / d i v >
1 4 8
P s e u d o e l e m e n t o s
L o s p s e u d o e l e m e n t o s d e C S S 2 . 1 s e m a n t i e n e n e n C S S 3 p e r o c o n
a l g u n a s m o d i f i c a c i o n e s . A h o r a e n s u s i n t a x i s s e u t i l i z a :: e n l u g a r d e :
d e l a n t e d e l n o m b r e d e c a d a p s e u d o e l e m e n t o .
El n u e v o p s e u d o - e l e m e n t o : : s e l e c t i o n
C S S 3 i n c o r p o r a e s t e n u e v o p s e u d o - e l e m e n t o a la lista e x i s t e n t e .
El p s e u d o - e l e m e n t o ::selection c a s a c o n l a p a r t e d e c u a l q u i e r e l e m e n t o
E q u e e s t á s e l e c c i o n a d o o r e s a l t a d o e n e s e m o m e n t o p o r el u s u a r i o . U n
p o s i b l e u s o d e e s t e s e l e c t o r p o d r í a s e r p a r a c o n t r o l a r la a p a r i e n c i a d e
u n t e x t o q u e s e h a s e l e c c i o n a d o .
A l g u n a s p r o p i e d a d e s C S S s e a p l i c a n a ::selection: color, b a c k g r o u n d ,
c u r s o r y outline.
L a s i g u i e n t e r e g l a e s t a b l e c e el c o l o r r o j o p a r a u n a s e l e c c i ó n e n
d o c u m e n t o :
:: s e l e c t i o n { c o l o r : # f 0 0 ; }
E l e m e n t o d e c o m b i n a c i ó n
El e l e m e n t o d e c o m b i n a c i ó n g e n e r a l m e n t e c o n s t a d e d o s s e l e c t o r e s
s i m p l e s s e p a r a d o s p o r u n s i g n o (~). E s t e s e l e c t o r c a s a o c u r r e n ci a s d e l
s e g u n d o e l e m e n t o s e l e c t o r s i m p l e q u e s e a n p r e c e d i d a s p o r el p r i m e r
e l e m e n t o s e l e c t o r s i m p l e . A m b o s e l e m e n t o s d e b e n t e n e r el m i s m o
e l e m e n t o p a d r e , p e r o el s e g u n d o e l e m e n t o n o t i e n e p o r q u é s e g u i r
i n m e d i a t a m e n t e d e s p u é s d e l p r i m e r o . L a r e g l a s i g u i e n t e c a s a e l e m e n t o s
1 4 9
q u e e s t á n p r e c e d i d o s p o r u n e l e m e n t o p y q u e t i e n e n el m i s m o
e l e m e n t o p a d r e :
p ~ ul { b a c k g r o u n d : # ff0;}
F u n c i o n e s p a r a definir v a l o r e s
El m ó d u l o d e C S S 3 d e n o m i n a d o C S S V a l u e s a n d U n i t s M o d u l e L e v e l 3
t i e n e p o r o b j e t o describir los v a l o r e s y las u n i d a d e s d e las p r o p i e d a d e s
C S S y la sintaxis utilizada p a r a definir los v a l o r e s límites a d m i t i d o s .
El m ó d u l o , e n t r e o t r a s n o v e d a d e s , c r e ó tres f u n c i o n e s d e C S S p a r a
d e f i n i r v a l o r e s . E s t a s s o n : attr (), c a l c () y t o g g l e ().
F u n c i ó n calc()
L a f u n c i ó n c a l c () n o s p e r m i t e definir v a l o r e s C S S c o n el u s o d e
e x p r e s i o n e s m a t e m á t i c a s , e s decir, el v a l o r a d o p t a d o p a r a la p r o p i e d a d
e s el r e s u l t a d o d e u n a e x p r e s i ó n m a t e m á t i c a .
L o s o p e r a d o r e s m a t e m á t i c o s v á l i d o s s o n : + ( s u m a ) , - (resta), *
(multiplicación) y / (división) y las u n i d a d e s válidas e n el c á l c u l o
m a t e m á t i c o s o n las u n i d a d e s d e : l o n g i t u d , á n g u l o , t i e m p o , f r e c u e n c i a y
n ú m e r o s .
El u s o d e e s t a f u n c i ó n p a r a e s t a b l e c e r v a l o r C S S p e r m i t e m e z c l a r
d i f e r e n t e s u n i d a d e s . E s t o n o e s p o s i b l e c o n el u s o d e C S S 2 . 1 y
a n t e r i o r e s .
C o n s i d e r e los s i g u i e n t e s d o s e j e m p l o s p r á c t i c o s d e l u s o d e e s t a f u n c i ó n :
1 5 0
E j e m p l o 1:
H T M L
< d i v > < / d i v >
C S S
b o d y {
m a r g i n : 0 ;
p a d d i n g : 0 ;
d i v {
w i d t h : 9 0 % ; / * p a r a los n a v e g a d o r e s q u e n o a d m i t a n
calc () * /
w i d t h : calc ( 1 0 0 % - 1 0 0 p x ) ;
m a r g i n : 0 a u t o ;
h e i g h t : 2 0 0 p x ;
b o r d e r : 1 p x solid b l a c k ;
b a c k g r o u n d : l i m e ;
1 5 1
E n e s t e e j e m p l o , c e n t r a m o s u n e l e m e n t o e n la p a n t a l l a y d e f i n i m o s s u
a n c h o total igual a la d i m e n s i ó n d e la p a n t a l l a c o m p l e t a m e n o s 1 0 0 p x
r e s u l t a n d o e n u n e l e m e n t o elástico c o n m á r g e n e s a i z q u i e r d a y d e r e c h a
c o n s t a n t e s e i g u a l e s a 5 0 p x . S e a c u a l s e a la r e s o l u c i ó n d e p a n t a l l a los
m á r g e n e s laterales p e r m a n e c e n sin c a m b i o s . R e c u e r d e q u e d e b e
e s t a b l e c e r la a n c h u r a c o m o u n p o r c e n t a j e ( p o r e j e m p l o , 9 0 % ) sin
utilizar c a l c (), c o m o lo h a c e m o s c o n C S S 2 . 1 y a n t e r i o r e s r e s u l t a e n
m á r g e n e s elásticos ( e n el e j e m p l o : 5 % a c a d a l a d o ) y n o fijos.
E j e m p l o 2:
H T M L
< s e c t i o n i d = " c o n t a i n e r " >
< d i v class = " u n o " > < / d i v >
< d i v class = " d o s " > < / d i v >
< / s e c t i o n >
C S S
b o d y {
m a r g i n : 0 ;
p a d d i n g : 0 ;
.# c o n t a i n e r {
w i d t h : 9 0 % ;
1 5 2
h e i g h t : 3 0 0 p x ;
b o r d e r : n o n e ;
b a c k g r o u n d : y e l l o w ;
d i v {
w i d t h : c a l c ( 5 0 % - 2 0 p x - 2 e m ); / * p a r a s o p o r t e n a t i v o * /
m a r g i n : 0 1 0 p x ;
h e i g h t : 2 0 0 p x ;
b o r d e r : 1 e m solid b l a c k ;
f l o a t : left;
b a c k g r o u n d : l i m e ;
. d o s {
f l o a t : r i g h t ;
b a c k g r o u n d : r e d ;
E n e s t e e j e m p l o u s a m o s d o s e l e m e n t o s f l o t a n t e s c o n b o r d e s y
m á r g e n e s d e n t r o d e u n c o n t e n e d o r , o c u p a n d o c a d a u n o d e ellos el 5 0 %
1 5 3
d e l a n c h o d e l c o n t e n e d o r . U t i l i z a m o s la f u n c i ó n calc() p a r a ajustar los

e l e m e n t o s e n el c o n t e n e d o r .
F u n c i ó n attr()
L a e x p r e s i ó n attr () s e utili za p a r a r e c u p e r a r el v a l o r d e u n a t r i b u t o d e l
e l e m e n t o s e l e c c i o n a d o y ut ilizarlo e n la h o j a d e estilos. S e p u e d e utilizar
e n p s e u d o - e l e m e n t o s t a m b i é n y, e n e s t e c a s o , s e d e v u e l v e el v a l o r d e l
a t r i b u t o e n el e l e m e n t o d e o r i g e n d e l p s e u d o - e l e m e n t o .
S u sintaxis es: a t t r ( n o m b r e a t r i b u t o < t i p o > ? [,<fallback>].
N o m b r e a t r i b u t o el n o m b r e d e l a t r i b u t o e n el d o c u m e n t o H T M L d e l
e l e m e n t o a l q u e s e h a c e r e f e r e n c i a e n el C S S . T i p o e s u n a p a l a b r a q u e
r e p r e s e n t a c u a l q u i e r v a l o r d e a t r i b u t o o s u u n i d a d . Si el v a l o r
e s p e c i f i c a d o n o e s c o r r e c t o la e x p r e s ó n attr() n o s e r á válida . Si s e o m i t e
el v a l o r p r e d e t e r m i n a d o e s string.
E j e m p l o :
p : b e f o r e {
c o n t e n t : a t t r ( d a t a - f o o ) ;
 W o r l d 
P r o p i e d a d h y p h e n s
C o n el u s o d e C S S 2 . 1 y a n t e r i o r e s la ú n i c a m a n e r a d e c o n s e g u i r la
s e p a r a c i ó n d e p a l a b r a s e n u n t e x t o e r a f o r z a n d o la r u p t u r a d e la p a l a b r a
1 5 4
c o n el e l e m e n t o y u s a n d o el s i g n o m e n o s .
T a l s o l u c i ó n e r a m u y l i m i t a d a y s u p o s i b l e u s o e r a e n c a s o s m u y
c o n c r e t o s . L a p r o p u e s t a p a r a realizar la p a r t i c i ó n d e p a l a b r a s e n C S S 3 e s
la d e p r o p o r c i o n a r u n m e c a n i s m o c a p a z d e realizar la s e p a r a c i ó n t a n t o
m a n u a l c o m o a u t o m á t i c a . El a l g o r i t m o d e U n i c o d e p a r a el salto d e línea
p r o p o r c i o n a los c a r a c t e r e s U + 2 0 1 0 y U + 0 0 A D . U + 2 0 1 0 s e l l a m a H Y P H E N
y la n o r m a U n i c o d e d i s p o n e q u e e s e c a r á c t e r s i e m p r e s e r á visible
c u a n d o s e a r e n d e r i z a d o . U + 0 0 A D s e d e n o m i n a S O F T H Y P H E N (shy) y, a
d i f e r e n c i a d e l anterior, e s t e c a r á c t e r n o e s visible c u a n d o e s
r e n d e r i z a d o . S u o b j e t i v o e s indicar la p o s i c i ó n p r e f e r e n c i a l p a r a r o m p e r
la línea ( o p a l a b r a ) .
E n H T M L los c a r a c t e r e s p a r a H Y P H E N y S O F T H Y P H E N s o n los
siguientes: & n d a s h ; ó & # 8 2 1 1 ; y & s h y ; ó & # 1 7 3 ; r e s p e c t i v a m e n t e .
P r o p i e d a d h y p h e n s
L a p r o p i e d a d C S S h y p h e n s s e aplica a t o d o s los e l e m e n t o s H T M L y
a d m i t e los v a l o r e s n o n e | m a n u a l | a u t o , s i e n d o m a n u a l el v a l o r
p r e d e t e r m i n a d o .
E s t o s v a l o r e s t i e n e n los s i g u i e n t e s e f e c t o s :
N o n e : n o s e utiliza n i n g ú n g u i ó n , i n c l u s o e n las e t i q u e t a s q u e
c o n t i e n e n el c a r á c t e r & s h y ;
M a n u a l : s e a p l i c a r á n los g u i o n e s , c u a n d o s e a n e c e s a r i o , e n los
l u g a r e s d o n d e e s t u v i e r a el c a r á c t e r & s h y ; .
A u t o : s e a p l i c a r á n los g u i o n e s , c u a n d o s e a n e c e s a r i o , sin t e n e r
e n c u e n t a q u e a p a r e z c a o n o el c a r á c t e r & s h y ; .
1 5 5
L a d i r e c t i v a :: @ f o n t - f a c e
L a d irectiva @ f o n t - f a c e s e p r o p o r c i o n a e n el m ó d u l o F o n t s d e l C S S 3 y
s u o b j e t i v o e s especificar u n a f u e n t e p a r a s u u s o e n ciertas p a r t e s d e
u n a p á g i n a o e n t o d a la p á g i n a ( o e n t o d o el site) y t e n e r la g a r a n t í a d e
q u e la f u e n t e e s p e c i f i c a d a se r á r e n d e r i z a d a e n el n a v e g a d o r d e l u s u a r i o ,
y a s e a u n a f u e n t e i n s t a l a d a e n el s i s t e m a o p e r a t i v o o n o .
R e c u e r d e q u e c o n el u s o d e C S S 2 . 1 d e b e p r o p o r c i o n a r u n a lista d e
f u e n t e s q u e t e r m i n a n c o n u n a f u e n t e g e n é r i c a p a r a m o s t r a r s u s
textos. P o r e j e m p l o :
p {
f o n t - f a m i l y : " L u c i d a G r a n d e " , " L u c i d a S a n s " , V e r d a n a , s a n s - s e r i f ;
L a r e g l a C S S m o s t r a d a d e t e r m i n a q u e los p á r r a f o s s e a n r e n d e r i z a d o s
p r e f e r e n t e m e n t e utilizando el t i p o d e letra " L u c i d a G r a n d e " i n s t a l a d a
p o r d e f e c t o e n el s i s t e m a o p e r a t i v o M a c O S X.
Si el u s u a r i o e s t á v i e n d o la p á g i n a e n u n e n t o r n o d e W i n d o w s e s casi
s e g u r o q u e n o t e n d r á i n s t a l a d a la f u e n t e y e n e s t e c a s o e n t r a e n la
s e g u n d a o p c i ó n d e la lista d e f u e n t e s q u e e s " L u c i d a S a n s " i n s t a l a d a p o r
d e f e c t o e n el s i s t e m a o p e r a t i v o W i n d o w s .
¿ Y si a m b o s u s u a r i o s h a n d e s i n s t a l a d o las f u e n t e s " L u c i d a " d e s u

s i s t e m a o p e r a t i v o ? E n e s e c a s o s e utilizar á " V e r d a n a " y si fal la s e u s a r á
la ú l t i m a o p c i ó n d e la list a q u e e s u n a familia g e n é r i c a v ál ida p a r a
c u a l q u i e r s i s t e m a o p e r a t i v o . D e ahí, la n e c e s i d a d d e t e r m i n a r la lista c o n
u n a f u e n t e g e n é r i c a .
1 5 6
C o n el u s o d e la directiva @ f o n t - f a c e la d e p e n d e n c i a d e l s i s t e m a
o p e r a t i v o p a r a la r e p r e s e n t a c i ó n d e f u e n t e s s e a c a b ó .
P r i n c i p i o d e f u n c i o n a m i e n t o
L a i d e a c e n t r a l d e la política d e @ f o n t - f a c e e s decirl e al n a v e g a d o r d e l
u s u a r i o q u e el t i p o d e letra e s p e c i f i c a d o e n la h o j a d e estilo d e b e
b u s c a r s
e e n p r i m e r l u g a r e n el s i s t e m a o p e r a t i v o loc al y e n c a s o d e n o
s e r e n co n t r a d a la d e s c a r g a r á e n el e q u i p o local d e s d e u n a d i r e c c i ó n
w e b . E s decir, el d e s a r r o l l a d o r a loja el a r c h i v o d e la f u e n t e ( p o r lo
g e n e r a l n u n directorio e n el
e sitio) y p r o p o r c i o n a la d i r e c c i ó n d e
a l o j a m i e n t o e n las C S S .
C o n s i d e r e q u e h e m o s d e c i d i d o utilizar el t i p o d e letra " R e g e n c y S c r i p t F L F

R e g u l a r " (tipo d e letra q u e i m i t a la e s c ritura a m a n o ) e n n u e s t r o
p r o y e c t o . O b s e r v e las r e g l a s C S S a seguir:
@ f o n t - f a c e {
f o n t - f a m i l y : " R e g e n c y S c r i p t F L F R e g u l a r " ;
s r c : url ( " d i r e c c i ó n W e b p a r a d e s c a r g a d e la f u e n t e " ) ;
p { f o n t - f a m i l y : " R e g e n c y S c r i p t F L F R e g u l a r " , cursive;}
El n a v e g a d o r d e l u s u a r i o d e s c a r g a r á la f u e n t e d e s d e la d i r e c c i ó n q u e
figura e n el s r c y ut ilizará el t i p o d e letra p a r a h a c e r los p á r r a f o s e n el
d o c u m e n t o . Si el a r c h i v o n o s e e n c u e n t r a e n la d i r e c c i ó n e s p e c i f i c a d a s e
utiliza rá e n c u r s i v a la f u e n t e g e n é r i c a .
1 5 7
Sintaxis y t e r m i n o l o g í a
@ f o n t f a c e {
d e s c r i p c i ó n : v a l o r ;
d e s c r i p c i ó n : v a l o r ;
...
F o r m a t o
L o s f o r m a t o s d e f u e n t e s s o p o r t a d o s p o r los n a v e g a d o r e s e s t á n d a r s o n
.ttf, .otf, . s v g y .svgz.
V a l o r local
P a r a decirle al n a v e g a d o r q u e d e b e , a n t e s d e d e s c a r g a r el c ó d i g o
f u e n t e , revisar si e x i s t e e n el s i s t e m a local d e l u s u a r i o s e utiliza el v a l o r
local e n el src. O b s e r v e el s i g u i e n t e c ó d i g o :
@ f o n t - f a c e {
s r c : local ( " R e g e n c y S c r i p t F L F - R e g u l a r " ) , url ( " d i r e c c i ó n W e b p a r a

d e s c a r g a d e la f u e n t e " ) ;
1 5 8
V a l o r f o r m a t
L a e s p e c i f i c a c i ó n t a m b i é n p r o p o r c i o n a u n v a l o r p a r a la directiva,
l l a m a d o f o r m a t , c u y o o b j e t i v o e s i n f o r m a r el tipo d e f u e n t e . O b s e r v e lo
siguiente:
@ f o n t - f a c e {
s r c : local ( " R e g e n c y S c r i p t F L F - R e g u l a r " ) , url ( " d i r e c c i ó n W e b p a r a

d e s c a r g a d e la f u e n t e " ) f o r m a t ( " o p e n t y p e " ) ;
C o l o r e s e n C S S 3
A c t u a l m e n t e s e p u e d e n definir c o l o r e s utilizando v a l o r e s e n
C S S h e x a d e c i m a l , r gb, c o n p a l a b r a s c l a v e o b a s a d o s e n el S i s t e m a
O p e r a t i v o d e l u s u a r i o . C S S 3 c o n t e m p l a o t r a s f o r m a s d e definir los
c o l o r e s e n t r e ellas utilizando el c ó d i g o hsl y hsla.
H S L s o n las siglas d e H u e S a t u r a t i o n L i g h t n e s s ( t o n o , s a t u r a c i ó n , brillo).
H S L A s o n las siglas d e H u e S a t u r a t i o n L i g h t n e s s A l p h a ( t o n o , s a t u r a c i ó n ,
l u m i n o s i d a d , t r a n s p a r e n c i a alfa.)
L a sintaxis g e n e r a l d e C S S p a r a definir los c o l o r e s d e a c u e r d o c o n el
1 5 9
c ó d i g o d e hsl es: E { c o l o r : H S L (H, S % P % ) ; } d o n d e E e s el selector, H e s

u n v a l o r a n g u l a r ( d e 0 a 3 6 0 y s u s m ú l t i p l o s - e n la r u e d a d e
color), S % e s el p o r c e n t a j e d e s a t u r a c i ó n y L % e s el p o r c e n t a j e d e brillo.
E n el s i s t e m a h s l a es: E {color: H S L A (H, S % P % A);} s e i n c o r p o r a u n a

t r a n s p a r e n c i a alfa ( A oscila e n t r e 0 y 1 ) p a r a el color.
E j e m p l o :
U n d i v d e 4 0 0 x 1 0 0 p x t e n d r á f o n d o v e r d e :
C S S :
div.test-siete { w i d t h : 4 0 0 p x ; h e i g t h : 1 0 0 p x ; b a c k g r o u n d : hsl ( 1 2 0 ,
1 0 0 % , 1 3 % ) ; }
H T M L :
< d i v c l a s s = " t e s t - s i e t e " >
D I V c o n f o n d o d e c o l o r v e r d e , q u e s e d e f i n e e n el s i s t e m a H S L < / D i v > s e
d e f i n e e n el s i s t e m a H S L
S o m b r a s e n t e x t o . L a p r o p i e d a d t e x t - s h a d o w
El m ó d u l o d e C S S 3 e s t a b l e c e la p r o p i e d a d t e x t - s h a d o w c o n las
s i g u i e n t e s características:
1 6 0
N o m b r e : t e x t - s h a d o w
V a l o r : n i n g u n o | [ < s h a d o w > , ] * < s h a d o w >
Inicio: N i n g u n o
S e a p l i c a a: t o d o s l o s e l e m e n t o s y c o n t e n i d o s g e n e r a d o s
H e r e d a d o : S í
P o r c e n t a j e s : N o d i s p o n i b l e
M e d i o s : V i s u a l
L o s v a l o r e s c a l c u l a d o s : u n c o l o r t r e s p a s o s C S S
L a sintaxis g e n e r a l p a r a escribir u n a r e g l a C S S q u e c o n t i e n e e s t a
p r o p i e d a d e s la siguiente:
s e l e c t o r
t e x t - s h a d o w : m e d i d a - 1 m e d i d a - 2 m e d i d a - 3 color;
D ó n d e :
M e d i d a - 1 : s e c o m p e n s a la s o m b r a h a c i a la d e r e c h a (valor
positivo ) o h a c i a la i z q u i e r d a (valor n e g a t i v o ) ;
M e d i d a - 2 : s e c o m p e n s a la s o m b r a h a c i a a b a j o (valor positivo)
o h a c i a a r r i b a (valor n e g a t i v o ) ;
M e d i d a - 3 : e s el r a d i o p a r a el e f e c t o b l u r e n la s o m b r a ;
C o l o r : e s el c o l o r d e la s o m b r a .
L o s v a l o r e s d e m e d i d a - 3 y d e c o l o r s o n o p c i o n a l e s . Si s e o m i t e m e d i d a
3 signifi ca q u e n o h a b r á n i n g ú n e f e c t o d e d e s e n f o q u e e n l a s o m b r a . L a
o m i s i ó n d e c o l o r signi fica q u e la s o m b r a t e n d r á el m i s m o c o l o r q u e el
d e f i n i d o e n el t e x t o . L o s v a l o r e s m e d i d a - 1 y m e d i d a - 2 s o n o bligatorios.
1 6 1
El v a l o r d e l c o l o r p u e d e s e r d e c l a r a d o d e s p u é s d e las m e d i d a s , c o m o s e
m u e s t r a e n el e j e m p l o a n t e r i o r o a n t e s d e las m e d i d a s ,
i n d i f e r e n t e m e n t e .
C o m o e j e m p l o , c o n s i d e r e m o s el s i g u i e n t e c ó d i g o :
H T M L :
< h 1 > E n c a b e z a d o < / h 1 >
C S S :
h 1 {
f o n t - s i z e : 3 0 p x ;
c o l o r : b l a c k ;
t e x t - s h a d o w : 2 p x - 2 p x l i m e ;
El e f e c t o d e d e s e n f o q u e
El e f e c t o d e d e s e n f o q u e (Blur ) e s u n a caracte rís tic a p r e s e n t e e n
c u a l q u i e r e d i t o r d e i m á g e n e s q u e c o n s i s t e e n " b o r r a r " o " d e s e n f o c a r "
u n á r e a d e c o l o r sólido. V a m o s a aplicar el e f e c t o d e d e s e n f o q u e e n la
s o m b r a d e l e j e m p l o a n t e r i o r a ñ a d i e n d o u n r a d i o d e 1 0 p x p a r a e s t e f in,
c o m o s e m u e s t r a a c o n t i n u a c i ó n :
1 6 2
H T M L :
< h 1 > E n c a b e z a d o < / h 1 >
C S S :
h 1
f o n t - s i z e : 3 0 p x ;
c o l o r : b l a c k ;
t e x t - s h a d o w : 2 p x - 2 p x 1 0 p x l i m e ;
C o m b i n a n d o s o m b r a s
L a p r o p i e d a d t e x t - s h a d o w p e r m i t e la a p l i c a c i ó n d e distintas s o m b r a s
d e c l a r a n d o u n a lista d e g r u p o s d e v a l o r e s c o m o s e m u e s t r a e n los
e j e m p l o s a n t e r i o r e s , s e p a r a d o s p o r c o m a s . V e a el s i g u i e n t e e j e m p l o :
H T M L :
< h 1 > E n c a b e z a d o < / h 1 >
1 6 3
C S S :
h 1 {
f o n t - s i z e : 2 5 p x ;
b a c k g r o u n d : # 0 0 0 ;
p a d d i n g : 4 0 p x 1 0 p x ;
c o l o r : #fff;
t e x t - s h a d o w : 3 0 p x - 3 0 p x # 0 F 0 , 2 0 p x - 2 0 p x # f 0 0 , 1 0 p x - 1 0 p x # ff0;
C o m b i n a c i ó n d e e f e c t o s
L a c o m b i n a c i ó n d e v a l o r e s p a r a s o m b r a s c o n e f e c t o b l u r p u e d e
p r o v o c a r a l g u n o s e f e c t o s m u y i n t e r e s a n t e s c o m o el q u e s e m u e s t r a a
c o n t i n u a c i ó n :
H T M L :
< h 1 > E n c a b e z a d o < / h 1 >
C S S :
h 1 {
f o n t - s i z e : 2 5 p x ;
1 6 4
b a c k g r o u n d : # 6 6 0 ;
p a d d i n g : 2 0 p x ;
c o l o r : # 6 6 0 ;
t e x t - s h a d o w : 0 0 2 0 p x #fff, 0 - 1 0 p x 2 0 p x #fff,
0 1 0 p x 2 0 p x #fff, - 2 0 p x 0 4 0 p x #fff,
2 0 p x 0 4 0 p x #fff;
T r a n s i c i o n e s
El o b j e t i v o d e l m ó d u l o e s p r o p o r c i o n a r m e c a n i s m o s p a r a c a m b i a r el
estilo d e u n e l e m e n t o H T M L d e m a n e r a s u a v e y c o n t r o l a d a e n el
t i e m p o .
P r o p i e d a d e s p a r a transiciones:
t r a n s i t i o n - p r o p e r t y
E s t a p r o p i e d a d d e f i n e las p r o p i e d a d e s C S S q u e s e r á n a p l i c a d a s a las
transiciones. O b s e r v e los s i g u i e n t e s e j e m p l o s :
s e l e c t o r {
t r a n s i t i o n - p r o p e r t y : b a c k g r o u n d - c o l o r / / t r a n s i c i ó n e n el c o l o r d e
f o n d o
s e l e c t o r {
1 6 5
t r a n s i t i o n - p r o p e r t y : b a c k g r o u n d - i m a g e , c o l o r / / t r a n s i c i ó n e n la
i m a g e n d e f o n d o y c o l o r d e l t e x t o
s e l e c t o r {
t r a n s i t i o n - p r o p e r t y : all / / t r a n s i c i ó n p a r a t o d a s las p r o p i e d a d e s
e l e g i b l e s p a r a t r a n s i c i ó n
s e l e c t o r {
t r a n s i t i o n - p r o p e r t y : m a r g i n - l e f t , font-size, c o l o r / / t r a n s i c i ó n e n el
m a r g e n i z q u i e r d o , t a m a ñ o d e f u e n t e y el c o l o r d e t e x t o
t r a n s i t i o n - d u r a t i o n
E s t a p r o p i e d a d d e f i n e el t i e m p o d e d u r a c i ó n d e la t r a n s i c i ó n e n
s e g u n d o s . O b s e r v e los s i g u i e n t e s e j e m p l o s :
s e l e c t o r { t r a n s i t i o n - d u r a t i o n : 2 s }
t r a n s i t i o n - t i m i n g - f u n c t i o n
1 6 6
E s t a p r o p i e d a d d e f i n e la f o r m a c o m o la t r a n s i c i ó n a v a n z a e n el
t i e m p o . L o s v a l o r e s p o s i b l e s p a r a e s t a p r o p i e d a d s o n :
linear
e a s e
e a s e - i n
e a s e - o u t
e a s e - i n - o u t
b e z i e r - c u b i c
E n lí nea s g e n e r a l e s c a d a u n o d elos v a l o r e s d e f i n e u n a t a s a d e
a n i m a c i ó n a lo l a r g o d e l t i e m p o . P o r e j e m p l o : e a s e - i n d e f i n e u n a
t r a n s i c i ó n q u e c o m i e n z a l e n t a m e n t e y s e a c e l e r a e n el final.
O b s e r v e los s i g u i e n t e s e j e m p l o s
s e l e c t o r { t r a n s i t i o n - t i m i n g - f u n c t i o n : linear}
s e l e c t o r { t r a n s i t i o n - t i m i n g - f u n c t i o n : e a s e - i n - o u t }
s e l e c t o r { t r a n s i t i o n - t i m i n g - f u n c t i o n : b e z i e r - c u b i c ( 0 . 3 , 0 . 7 , 1 . 0 , 0 . 8 ) }
t r a n s i t i o n - d e l a y
E s t a p r o p i e d a d e s t a b l e c e el t i e m p o d e e s p e r a e n s e g u n d o s p a r a el inicio
d e la transición. O b s e r v e los s i g u i e n t e s e j e m p l o s :
s e l e c t o r { t r a n s i t i o n - d e l a y : 2 s }
1 6 7
t r a n s i t i o n
E s t a e s u n a f o r m aa b r e v i a d a p a r a las p r o p i e d a d e s d e t r a n s i c i ó n
m o s t r a d o s a n t e r i o r m e n t e . O b s e r v e los s i g u i e n t e s e j e m p l o s :
s e l e c t o r {transition: c o l o r 2 s e a s e 3 s } / / t r a n s i c i ó n d e c o l o r
e n 2 s , t i e m p o d e r e t a r d o d e 3 s
s e l e c t o r {transition: c o l o r 2 s linear, b o r d e r 2 s l i n e a r ; } / / t r a n s i c i ó n d e
c o l o r y el b o r d e e n 2s, a n i m a c i ó n linear
E j e m p l o :
O b s e r v e las e t i q u e t a s H T M L y las r e g l a s d e estilo p a r a h a c e r u n a

t r a n s i c i ó n d e e n l a c e a u n a p á g i n a W e b .
H T M L
< a h r e f = " d i r e c c i ó n w e b " class = " d e m o " > D i r e c c i ó n W e b < / a >
C S S
a . d e m o {
w i d t h : 2 0 0 p x ;
1 6 8
h e i g h t : 4 0 p x ;
m a r g i n : 2 0 p x 0 ;
t e x t - a l i g n : c e n t e r ;
p a d d i n g - t o p : 1 0 p x ;
b o r d e r : 8 p x solid;
b o r d e r - c o l o r : b l a c k ;
t e x t - d e c o r a t i o n : u n d e r l i n e ;
b o r d e r - r a d i u s : 1 0 p x ;
f o n t : b o l d 2 4 p x A r i a l , s a n s - s e r i f ;
d i s p l a y : b o l c k ;
b a c k g r o u n d : r e d ;
c o l o r : w h i t e ;
transition: all 2 s linear;
a . d e m o : h o v e r {
b a c k g r o u n d : b l a c k ;
c o l o r : y e l l o w ;
b o r d e r - c o l o r : g r e e n ;
1 6 9
transition: all 2 s linear;
C o n s t r u i r u n a plantilla c o n p r o p i e d a d e s C S S 3
¿ C ó m o f u n c i o n a ?
L a i d e a c e n t r a l d e la c o n s t r u c c i ó n d e u n a plantilla c o n el u s o d e las
p r o p i e d a d e s C S S 3 s e b a s a e n la c o n s t r u c c i ó n d e u n a rejilla e n la p a r t e
s u p e r i o r d e la plantilla q u e d e s e a m o n t a r . L a t é c n i c a d e c o n s t r u c c i ó n d e
la r e d q u e s e h a a d o p t a d o f u e la d e c o n s t r u i r u n e s q u e m a d e plantilla,
d i v i d i é n d o l o e n á r e a s d e c o n t e n i d o y l u e g o m a r c a n d o e s a s á r e a s y
c u a l q u i e r e s p a c i o e n t r e ellas.
E s t a s á r e a s d e c o n t e n i d o y la s e p a r a c i ó n s o n las d o s e n t i d a d e s
f u n d a m e n t a l e s p a r a las d e c l a r a c i o n e s d e estilo d e d i s e ñ o d e la
p lantilla. L a e s p e c i f i c a c i ó n W 3 C e s t a b l e c e q u e s e d e s i g n e a c a d a á r e a d e
c o n t e n i d o c o n u n a letra d e l a l f a b e t o (a, b, c, d, etc.) y las d i s t a n c i a s c o n
u n p u n t o (.). U n á r e a d e c o n t e n i d o p u e d e s e r r e p r e s e n t a d a p o r u n a o
m á s letras r e p e t i d a s , p o r e j e m p l o , a o a a o a a a o a a a a ..., t o d o s e s t o s
s í m b o l o s r e p r e s e n t a n el á r e a d e c o n t e n i d o a. S e p u e d e n utilizar t a n t o
l etras e n m i n ú s c u l a s c o m o e n m a y ú s c u l a s .
V a m o s a h a c e r u n a l e c t u r a C S S 3 , d e a c u e r d o c o n las directrices d e l
m ó d u l o , d e l d i a g r a m a q u e s e m u e s t r a a c o n t i n u a c i ó n :
a a
b c
d d
1 7 0
E s t o e s u n d i s e ñ o c o n u n a z o n a s u p e r i o r (aa), s e g u i d o d e d o s á r e a s u n a
al l a d o d e la o t r a (bc) y p o r d e b a j o o t r a á r e a (d), e s deci r, u n d i s e ñ o
clásico c o n p a r t e s u p e r i o r , d o s c o l u m n a s , s i e n d o u n a p a r a l a n a v e g a c i ó n
y o t r a p a r a el c o n t e n i d o p rincipal y el pie. A d v e r t e n c i a : la c a n t i d a d d e
letras r e p e t i d a s n o t i e n e r e l a c i ó n c o n el a n c h o d e las z o n a s . V a m o s a v e r
c ó m o c o n f i g u r a r el a n c h o .
E n el d i a g r a m a d e arriba, p a r a e s t a b l e c e r u n e s p a c i o e n t r e las d o s
c o l u m n a s (bc) t e n d r í a m o s el s i g u i e n t e d i a g r a m a :
a a a
b.c
d d d
L o s e s p a c i o s e s t á n r e p r e s e n t a d o s p o r p u n t o s (.). S ó l o t i e n e q u e i n s e r t a r
u n p u n t o e n t r e las letras q u e r e p r e s e n t a n las d o s c o l u m n a s y y a está.
O b s e r v e q u e i n t r o d u c i m o s o t r a letra e n la z o n a s u p e r i o r ( a a a ) y o t r a e n
el p i e d e p á g i n a ( d d d ) . E s t o s e d e b e a q u e t o d a s las filas d e b e n t e n e r el
m i s m o n ú m e r o d e c a r a c t e r e s (letras y / o p u n t o s ) .
U s t e d e s t á a h o r a e n c o n d i c i o n e s d e c o n s t r u i r el d i a g r a m a p a r a u n
d i s e ñ o d e tres c o l u m n a s c o n n a v e g a c i ó n s u p e r i o r horizontal, c o l u m n a s
verticales p a r a la n a v e g a c i ó n , el c o n t e n i d o principal y el p i e d e p á g i n a
d e p u b l i c i d a d .
R e g l a s g e n e r a l e s
C o m o p u e d e ver, u n d i s e ñ o p a r a plantilla e s u n a r e p r e s e n t a c i ó n gráfica

n o s ó l o d e la plantilla e n sí, s i n o t a m b i é n d e l p o s i c i o n a m i e n t o d e las
á r e a s d e c o n t e n i d o s . B a s á n d o n o s e n el d i a g r a m a m o s t r a d o a r r i b a e s
1 7 1
intuitivo r a z o n a r d e la s i g u i e n t e f o r m a : la c a b e c e r a o c u p a la p o s i c i ó n a,
la c o l u m n a d e n a v e g a c i ó n la p o s i c i ó n b, el c o n t e n i d o principal la
p o s i c i ó n c y la p o s i c i ó n d e p i e d e p á g i n a d . A d e m á s , h a y u n e s p a c i o
e n t r e las c o l u m n a s b y c.
E s t o t o d o e n l e n g u a j e d e h o j a s d e estilo q u e d a r í a e x p r e s a d o d e la
s i g u i e n t e f o r m a :
# c a b e c e r a { p o s i t i o n : a;}
# n a v e g a c i ó n { p o s i t i o n : b;}
# p r i n c i p a l { p o s i t i o n : c;}
# p i e { p o s i t i o n : d;}
L a s r e g l a s C S S q u e s e m u e s t r a n n o s o n s i m u l a c i o n e s . S o n reales . E s
e x a c t a m e n t e lo q u e s e d e c l a r a , s e e s c o g e u n a letra y e s t a a p a r e c e e n el
C S S . C u a l q u i e r letra, e n m a y ú s c u l a s o m i n ú s c u l a s , n o a c e n t u a d a , e s
válida.
O b s e r v e las r e g l a s C S S q u e s e i n d i c a n a c o n t i n u a c i ó n :
b o d y {
d i s p l a y : " a a a "
" b . c "
" d d d " ;
1 7 2
El c ó d i g o a n t e r i o r d i c e lo siguiente: el c o n t e n e d o r d e m i plantilla e s el
e l e m e n t o b o d y q u e t i e n e la s i g u i e n t e c o n f i g u r a c i ó n : u n a z o n a s u p e r i o r
( c a b e c e r a ) , s e g u i d a d e d o s á r e a s s e p a r a d a s ( n a v e g a c i ó n y c o n t e n i d o ) y
s e g u i d a p o r u n a z o n a ( p a r t e inferior) .
A h o r a v a m o s a v e r c ó m o e s t a b l e c e r las d i m e n s i o n e s d e las
c o l u m n a s . O b s e r v e la s i g u i e n t e regla.
b o d y {
" b . c "
" d d d "
1 5 0 p x 2 p x 8 4 8 p x ;
O p u e d e s e r c o m o s e m u e s t r a a c o n t i n u a c i ó n , q u e n o c a m b i a la sintaxis,
y e s m á s fácil d e ver:
b o d y {
" b . c "
" d d d "
1 5 0 p x 2 p x 8 4 8 p x ;
1 7 3
Si q u e r e m o s d a r l e u n e s p a c i a m i e n t o d e 2 p x e n t r e la p a r t e s u p e r i o r y las
d o s s i g u i e n t e s c o l u m n a s p o d e m o s h a c e r l o así.
b o d y {
" b . c " / 2 p x
" d d d "
1 5 0 p x 2 p x 8 4 8 p x ;
El p s e u d o - e l e m e n t o ::slot ()
Slot d e f i n e el á r e a total d e l c o n t e n i d o . C a d a letra d e la plantilla e s u n
slot.
C u a n d o e s t a b l e c e m o s el c o l o r d e f o n d o d e d o s c o l u m n a s a d y a c e n t e s s u
c o l o r s e r e v e l a a m e d i d a q u e la c o l u m n a c r e c e d e p e n d i e n d o así d e la
c a n t i d a d d e c o n t e n i d o q u e e n ella s e i n t r o d u c e . Si los c o l o r e s s o n
d i f e r e n t e s y el c o n t e n i d o t a m b i é n s e v a a e s t a r e n f r e n t a n d o a u n
p r o b l e m a c o n o c i d o c o n u n a c o l u m n a q u e s e e x t i e n d e h a s t a el p i e d e
p á g i n a t o d o c o l o r e a d a y o t r a q u e s e d e t u v o c o n lo q u e n o s e e x t e n d i ó
s u color.
E s el c o n o c i d o p r o b l e m a d e "falsas c o l u m n a s " q u e s e r e s u e l v e c o n la
i n s e r c i ó n d e i m á g e n e s .
E l p s e u d o - e l e m e n t o :: s l o t () t e r m i n ó c o n e s t e m o l e s t o p r o b l e m a . E l s l o t
c o n t i e n e t o d a el á r e a d e l l a y o u t c o n i n d e p e n d e n c i a d e la c a n t i d a d d e
c o n t e n i d o e n ella. D e e s t a m a n e r a :
1 7 4
b o d y : : slot ( b ) { b a c k g r o u n d : # ffc;}
b o d y : : slot (c) { b a c k g r o u n d : # e e e ; }
E j e m p l o d e m o s t r a t i v o :
V a m o s a n e c e s i t a r el p l u g i n d e j Q u e r y y t a m b i é n la b i b l i o t e c a j Q u e r y ,
q u e p o d e m o s d e s c a r g a r d e s d e Internet. U n a v e z q u e los t e n g a i n c l u y a
e n el h e a d d e s u p á g i n a lo siguiente:
<script
s r c = " h t t p : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y / 1 . 3 . 2 / j q u e r y . m i n . j s
" t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p t >
<script src = " j q u e r y . t p l _ l a y o u t 1 . 1 . 1 . j s " t y p e = " t e x t / j a v a s c r i p t " > < /

script>
<script t y p e = " t e x t / j a v a s c r i p t " >
$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
$ s e t T e m p l a t e L a y o u t (),. / / F u n c i ó n d e l p l u g i n
})
< / s c r i p t >
N u e s t r a p r o p u e s t a e s la c o n s t r u c c i ó n d e u n d i s e ñ o d e tres c o l u m n a s c o n
la p a r t e s u p e r i o r d e n a v e g a c i ó n h o r i z o n t a l y p i e d e p á g i n a . P a r a fines
d i d á c t i c o s a ñ a d i m o s el e s p a c i o s u p e r i o r e inferior d e las c o l u m n a s y
e n t r e c o l u m n a s .
1 7 5
D e la figura e s fácil d e d u c i r el s i g u i e n t e d i s e ñ o d e l l a y o u t .
. a a a a a .
. . . . . . .
. b b b b b .
. c.d.e.
. . . . . . .
. f.f.f.f.f.
1 7 6
L a p a r t e p e r t i n e n t e d e n t r o d e l H T M L s e m u e s t r a a c o n t i n u a c i ó n .
....

< d i v i d = " t o d o " >
< d i v i d = " t o p " >
< h 1 > C a b e c e r a < / h 1 >
< / d i v >
< d i v i d = " p r i n c i p a l " >
< h 2 > C o n t e n i d o p r i n c i p a l < / h 2 >
 C o n t e n i d o . . . . . 
< / d i v >
< ul i d = " n a v - h o r " >
< l i > H o m e < / a > < / l i >
< l i > A c e r c a d e n o s o t r o s < / a > < / li>
< l i > P o r t a f o l i o < / a > < / l i >
< l i > C o n t a c t a r < / a > < / l i >

< d i v i d = " n a v e g a c i ó n " >
1 7 7
< h 3 > N a v e g a c i ó n < / h 3 >
< ul >
< l i > < a h r e f = " # " > E n l a c e A < / a > < / l i >
< l i > < a h r e f = " # " > E n l a c e B < / a > < / l i >
< l i > < a h r e f = " # " > E n l a c e C < / a > < / l i >
< l i > < a h r e f = " # " > E n l a c e D < / a > < / l i >
< l i > < a h r e f = " # " > E n l a c e E < / a > < / l i >
< l i > < a h r e f = " # " > E n l a c e F < / a > < / l i >

< / d i v >
< d i v i d = " h e l p " >
< h 3 > S o c i o s < / h 3 >
 S o c i o 1 
 S o c i o 2 
 S o c i o 3 
 S o c i o 4 
 S o c i o 5 
< / d i v >
1 7 8
< d i v id = " p i e " >
 P i e d e p á g i n a 
< / d i v >
< / d i v >

< / h t m l >
L a s r e g l a s C S S p e r t i n e n t e s s o n :
b o d y {
m a r g i n : 0 ;
p a d d i n g : 0 ;
w i d t h : 1 0 0 % ;
f o n t : 6 2 . 5 % / 1 6 0 % s a n s - s e r i f ;
d i s p l a y : " . a a a a a , "
"......." / 0 . 5 e m
". b b b b b . "
".c.d.e."
"......." / 0 . 5 e m
1 7 9
".f.f.f.f.f."
* 1 8 e m . 2 e m m i n m a x ( 4 2 0 p x , 6 6 0 p x ) . 2 e m 1 6 e m *;
b a c k g r o u n d : # f 1 e 3 b 9 ;
/ * N o t a :
1 -) L a s e p a r a c i ó n e n los e x t r e m o s s e d e f i n e c o n u n a s t e r i s c o (*), e s
decir, elástica. C o n s e c u e n c i a : el d i s e ñ o s e c e n t r a e n la p á g i n a , sin
n e c e s i d a d d e m a r g i n : 0 a u t o ;
2 -) L a c o l u m n a principal e s elástica y v a d e l m í n i m o 4 2 0 p x al m á x i m o
6 6 0 p x . P r o p i e d a d m i n m a x * /
# p r i n c i p a l {
p o s i t i o n : d ;
t e x t - a l i g n : justify ;
p a d d i n g : 0 1 . 5 e m ;
f o n t - s i z e : 1 . 2 e m ;
# n a v - h o r {
p o s i t i o n : b ;
1 8 0
b a c k g r o u n d : # 4 6 9 0 d a ;
m a r g i n : 0 ;
p a d d i n g : . 5 e m ;
# n a v e g a c i o n {
p o s i t i o n : c ;
p a d d i n g : 0 1 0 p x ;
# h e l p {
p o s i t i o n : e ;
p a d d i n g : 0 1 0 p x ;
# p i e {
p o s i t i o n : f;
t e x t - a l i g n : c e n t r o ;
1 8 1
f o n t - s i z e : 1 . 1 e m ;
b o d y : : s l o t ( c ) {
b a c k g r o u n d : # e 8 f 1 f a ;
b o d y : : s l o t ( d ) {
b a c k g r o u n d : # fff;
b o d y : : s l o t ( e ) {
b a c k g r o u n d : # e 8 f 1 f a ;
1 8 2
C o n c l u s i o n e s
C S S e s u n p o t e n t e l e n g u a j e d e d i s e ñ o q u e le p e r m i t i r á ajustar los
d i s e ñ o s q u e u s t e d n e c e s i t e realizar e n p r á c t i c a m e n t e c u a l q u i e r p á g i n a
W e b .
C o n C S S los c a m b i o s e n el d i s e ñ o d e las p á g i n a s W e b s e p u e d e n realizar

d e u n a m a n e r a sencilla o r d e n a d a , a d e m á s d e q u e g r a c i a s al C S S
l o g r a m o s t e n e r u n m a y o r c o n t r o l s o b r e el d i s e ñ o y la e s t é t i c a d e n u e s t r a
W e b .
L o s p r i n c i p a l e s C M S i n c o r p o r a n p a r t e s d e c ó d i g o p a r a q u e u s t e d p u e d a
incluir s u s p r o p i o s C S S al s i s t e m a .
T a m b i é n e s p e r o q u e c o n e s t e li bro le h a y a c o n s e g u i d o d e s p e r t a r la
c u r i o s i d a d p a r a m e j o r a r s u w e b s i t e y p o d e r s e r u n g r a n d e s a r r o l l a d o r d e
w e b s i t e s q u e d e s t a q u e n p o r s u c a l i d a d visual y p o r s u ve rsatilidad y p o r
s u s e g u r i d a d al va lidar c o r r e c t a m e n t e los d a t o s q u e s e m a n e j a n e n s u
w e b .
1 8 3
1 8 4
R e f e r e n c i a B i b l i o g r á f i c a
P a r a la realización d e e s t e libro s e h a n u s a d o i m á g e n e s y s e h a n leído,
c o n s u l t a d o , c o n t r a s t a d o y t r a d u c i d o i n f o r m a c i ó n d e las s i g u i e n t e s
f u e n t e s d e i n f o r m a c i ó n :
Libros:
El libr o, L a G u í a d e H T M L 5 , C S S y J a v a s c r i p t d e A n d r é s S e r b a t
O c a ñ a .
A p r e n d e J a v a S c r i p t F á c i l m e n t e , d e A a r ó n R o j o B e d f o r d
H T M L a n d C S S : D e s i g n a n d B u i l d W e b s i t e s , d e J o n D u c k e t t
J u m p Sta rt C S S , d e L o u i s Lazaris
C S S : T h e D e f i n i v e G u i d e , d e Eric A . M e y e r
P á g i n a s w e b :
h t t p : / / w i k i p e d i a . c o m
h t t p : / / d e v e l o p e r . m o z i l l a . c o m
h t t p : / / w 3 c . o r g
1 8 5
L A A U T O R A
Alicia D u r a n g o
C o n 5 a ñ o s d e experiencia e n el m u n d o d e f o r m a c i ó n , Alicia e m p i e z a a
e scribir libros y a crear c u r s o s o n l i n e d e i n f o r m á t i c a p a r a s u s a l u m n o s . C o n
u n a a m p l i a experiencia laboral, Alicia G o n z á l e z es u n a profesional c o n
f o r m a c i ó n e n D e s a r r o l l o d e A p l i c a c i o n e s I n f o r m á t i c a s y A d m i n i s t r a c i ó n d e
S i s t e m a s I n f o r m á t i c o s , c o n m á s d e 8 a ñ o s d e experiencia e n el m u n d o d e la
i nformática, c o n a m p l i a experiencia e n los sectores d e f o r m a c i ó n ,
p u b l i c i d a d y desarrollo w e b , l l e v a n d o a c a b o tareas d e gestión, d i s e ñ o
g ráfico, p r o g r a m a c i ó n w e b y D i r e c t o r a d e publicidad.
1 8 6

Disen0We 0 2o Edicion

Enviado por

Direitos autorais:

Formatos disponíveis

Disen0We 0 2o Edicion

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Disen0We 0 2o Edicion

Enviado por

Direitos autorais:

Formatos disponíveis

Diseñ0We) ( 0 ( \

N I N G U N O | [ < S H A D O W > , ] * < S H A D O W > 1 6 1

E l a u t o r y editor n i e g a n e s p e c í f i c a m e n t e t o d a re sp onsabilidad p o r cualquier

T o d a s y t o d o s los n o m b r e s d e p r o d u c t o s m e n c i o n a d o s e n este libro s o n

E n e s t e e j e m p l o , el s e l e c t o r h 1 d i c e q u e el estilo s e aplica a los

< s t y l e t y p e = " t e x t / c s s " >

< h 1 > E s t a c a b e c e r a e s d e c o l o r v e r d e . < / h 1 >

< s t y l e t y p e = " t e x t / c s s " >

El t e x t o d e e s t e p á r r a f o t i e n e el t i p o d e letra " C o m i c S a n s M S " .

< s t y l e t y p e = " t e x t / c s s " >

< s t y l e t y p e = " t e x t / c s s " >

< p c l a s s = " d e r e c h a " >

< p c l a s s = " c e n t r o " >

N o t a : El a t r i b u t o d e clase, al igual q u e c u a l q u i e r o t r o atributo, s ó l o s e

< p class = " r i g h t " c l a s s = " c e n t e r " >

< s t y l e t y p e = " t e x t / c s s " >

< h 2 c l a s s = " c e n t r o " >

< p class = " c e n t r o " >

< p id = " p a r a 1 " >

Si trata d e aplicar e s t a r e g l a a u n e l e m e n t o < d i v > al q u e d a m o s v a l o r

< s t y l e t y p e = " t e x t / c s s " >

< d i v i d = " p a r a 1 " >

< h 1 i d = " p a r a 1 " > M e g u s t a la b u e n a m ú s i c a < / h 1 >

V a m o s a insertar c o m e n t a r i o s e n las d e f i n i c i o n e s C S S p a r a explicar el

< h 1 > L a s c a b e c e r a s s o n e l e m e n t o s d e l b l o q u e < / h 1 > t e x t o n o r m a l

< p > L o s p á r r a f o s s o n e l e m e n t o s d e l b l o q u e < / p >

< d i v > L o s e l e m e n t o s & l t ; d i v & g t ; y & l t ; t a b l e & g t ; t a m b i é n s o n

L o s e l e m e n t o s < b > & l t ; b & g t ; ( b o l d ) < / b > ,

< i > & l t ; i & g t ; (itálico)</i>,

< s t r o n g > & l t ; s t r o n g & g t ; ( t e x t o f u e r t e ) < / s t r o n g > ,

< c o d e > & l t ; c o d e & g t ; ( c ó d i g o d e c o m p u t a d o r ) < / c o d e >

T o d a s las h o j a s d e estilo C S S i n t r o d u j e r o n u n n u e v o a s p e c t o : los

< p s t y l e = " p o s i t i o n : a b s o l u t e ; t o p : 1 0 p x ; left: 3 0 p x " >

< p s t y l e = " p o s i t i o n : r e l a t i v e " >

C u a n d o g u a r d a m o s los estilos e n u n a r c h i v o e x t e r n o y los a p l i c a m o s a

L a s p á g i n a s q u e utilizan estilos C S S , a d e m á s d e s e r m á s fáciles d e

L o s estilos C S S n o s d a n m u c h a li bertad a la h o r a d e definir los estilos.

< s t y l e t y p e = " t e x t / c s s " >

b o d y { b a c k g r o u n d - i m a g e : url ( " i m a g e s / f o n d o . g i f " ) }

El n a v e g a d o r l e e las d e f i n i c i o n e s c o n t e n i d a s e n < s t y l e > y h a c e el

< s t y l e t y p e = " t e x t / c s s " >

b o d y { b a c k g r o u n d - i m a g e : url ( " f o n d o . j p g " ) }

L a d e f i n i c i ó n d e estilos ut ilizando el a t r i b u t o style n o s h a c e p e r d e r

El a t r i b u t o d e estilo a c e p t a casi t o d a s las p r o p i e d a d e s C S S . El s i g u i e n t e

< p style = "color: b l u e ; m a r g i n - l e f t : 2 0 p x " > E s t e e s u n p á r r a f o

< p s t y l e = " c o l o r : b l u e ; m a r g i n - l e f t : 2 0 p x " >

E n e s t e a p a r t a d o , el t i p o d e letra e s " s a n s - s e r i f "

< p s t y l e = " f o n t - f a m i l y : ' c o m i c s a n s m s ' " >

E n e s t e a p a r t a d o , el t i p o d e letra e s " C o m i c S a n s M S "

< / p > < / b o d y >

< l i n k rel = " s t y l e s h e e t " t y p e = " t e x t / c s s " h r e f = "estilos.css">

P e r o existe o t r a h o j a d e estilo i n t e r n a c o n las s i g u i e n t e s p r o p i e d a d e s

< s t y l e t y p e = " t e x t / c s s " >

El t e x t o d e los e l e m e n t o s < d i v > e s d e c o l o r azul.

< s t y l e t y p e = " t e x t / c s s " >

< p s t y l e = " c o l o r : r g b ( 2 5 5 , 0, 0 ) " >

< p s t y l e = " c o l o r : # F F 0 0 0 0 " >

< p s t y l e = " c o l o r : r e d " >

< p s t y l e = " c o l o r : # 0 0 0 0 F F " >

A d e m á s d e e s t a s tres m a n e r a s p o d e m o s utili zar o t r a f o r m a r g b b a s a d a