0091 Css Desde Cero PDF

TUTORIAL BÁSICO DEL PROGRAM ADOR W EB:
CSS DESDE CERO.

Objetivos
CSS es un lenguaje de est ilo que define la present ación de los document os HTM L. Por
ejemplo, con CSS podemos cambiar fuent es, colores, márgenes, t amaños, imágenes de
fondo, maquet ación, crear animaciones y ot ros efect os y más. Est e curso permit e
aprender los fundament os de CSS, imprescindible para t rabajar con páginas w eb hoy día.
Destinatarios
Cualquier persona con interés en aprender fundamentos que le permitan crear páginas web
usando CSS. Para realizar este curso, debes tener conocimientos previos de HTM L. Se
recomienda haber realizado el curso “ Tutorial básico del programador web: HTM L desde cero”
de aprenderaprogramar.com antes de seguir este curso.
Contenidos
 INTRODUCCIÓN A CSS. QUÉ ES Y PARA QUÉ SIRVE CSS. VERSIONES CSS. EL W3C.
 M ODELO DE CAJAS CSS. ESTILOS EN LÍNEA, INTERNO Y EXTERNO. TIPOS DE ELEM ENTOS.
 SELECTORES POR ID (#) Y POR CLASE(.). CONCEPTO DE HERENCIA Y DE CASCADA.
 SELECTORES AVANZADOS. PSEUDOCLASES. PSEUDOELEM ENTOS.
 COLORES Y FONDOS. FUENTES Y TEXTOS. UNIDADES DE M EDIDA. PROPIEDADES CSS.
 BORDES CSS. M ARGIN Y PADDING. PROPIEDADES BÁSICAS. EFECTOS AVANZADOS.
 ENLACES CON CSS. LISTAS CON CSS. TABLAS CON CSS. M ENÚS CON CSS.
 POSICIONAM IENTO. FLOAT Y CLEAR. M AQUETACIÓN EN COLUM NAS. DISEÑO FLUIDO.
 PREFIJOS CSS DE NAVEGADOR: CHROM E, FIREFOX, INTERNET EXPLORER, OPERA, SAFARI.
 EFECTOS CSS DE ÚLTIM A GENERACIÓN. USO DE SPRITES. ANIM ACIONES.
Duración
150 horas de dedicación efect iva, incluyendo lect uras, est udio y ejercicios.
Dirección, modalidades y certificados
El curso est á dirigido por César Krall, Responsable del Depart ament o de Producción de
aprenderaprogramar.com del port al w eb aprenderaprogramar.com. Se ofert a bajo la
modalidad w eb (grat uit o).
Para más información: cont act o@aprenderaprogramar.com

Indice del curso “Tutorial básico program
mador w eb: CSS
S desde cero”.
IND
DIC
CE DEL
D L CU
URS
SO
1. IN
NTRODUCCIÓ
ÓN A CSS. QU
UÉ ES Y PAR
RA QUÉ SIRVE
E CSS. VERSIIONES CSS. E
EL W 3C.
1.1. ¿Q
Qué es CSS? HTM L, cono
ocimient o pre
evio necesarrio.
1.2. ¿E
Es CSS un len
nguaje de pro
ogramación?
? ¿Para qué sirve?
s Difere
encias de HTM
M L, CSS, PHP
P, ASP...
1.3. Diferencias en
nt re CSS y HT
TM L. Front erra ent re CSS,, HTM L y pro
ogramación.
1.4. CS
SS en aplicacciones web Joomla, Word pal, phpBB... Plant illas, Te
dPress, Drup emplat es o Themes.
T
1.5. Em
mpezar a usa
ar CSS a partt ir de un document o HTM
M L con est ru
uct ura básica.
1.6. Ve
ersiones CSS
S. Algo de hisst oria y persp
pect iva. ¿Qu é es el W3C?
? Recomend aciones oficiiales.
1.7. Document ació
ón especifica
ación oficial CSS.
C W3scho
ools y W3foo
ols. Validació
ón CSS W3C validat
v or.
1.8. ¿Q
Qué necesit o para escrib
bir código CSS
S y crear pág
ginas web?
2. M ODELO DE CAJAS
C CSS. ESTILOS
E EN LÍNEA,
L INTER
RNO Y EXTER
RNO. TIPOS D
DE ELEM ENT
TOS.
2.1. De la est ruct ura

u HTM L y su semánt ica al modelo de
d cajas CSS. Element os b
block e inline
e CSS.
2.2. Esst ilos por deffect o, en líne
ea, int erno y ext erno. So
obreescrit ura
a de est ilos. l ink rel.
2.3. Archivos CSS. Coment ario s CSS.
3. ELECTORES POR
SE P ID (#) Y POR CLASE((.). CONCEPT
TO DE HEREN
NCIA Y DE CA
ASCADA.
3.1. Se
elect ores po r id. Select orres por class. Ejemplos.
3.2. Co
oncept o de herencia
h en hojas de est ilo CSS. ¿Qué
é es? Forzar herencia con
n inherit .
3.3. Co
oncept os: ca
ascada y here
encia CSS. Esst ilos de usua
ario. !importt ant . Ejemplo
os práct icos.
4. SE
ELECTORES AVANZADOS
A S. PSEUDOCL
LASES. PSEU DOELEM ENT
TOS. EJEM PL
LOS PRÁCTIC
COS.
4.1. Se
elect ores ava
anzados, pse
eudoclases y pseudoelem
ment os CSS.
4.2. firrst -child, nt h-child,
h last , not , -let t er -line, aft er, b efore.
4.3. Se
elect or unive
ersal. nt h-of--t ype y nt h-la
ast -child.
5. CO
OLORES CSS.
5.1. Co
olores HTM L y CSS. RGB decimal o po
orcent ual. Có
ódigos de co
olores hexade
ecimales.
5.2. W
Web safe colo
ors. Colores RGBA,
R HSL, HSLA.
H parencia CSS.. List a de col ores HTM L - CSS.
Transp
M ás inform ación: cont act o@aprenderap

o rogramar.com
Indice del curso “Tutorial básico programador web: CSS desde cero”.
6. FONDOS.
6.1. Color de fondo. Propiedad background-color CSS.

6.2. Definición de fondo CSS. background-image. Efect o fondo página w eb. background-repeat .
6.3. CSS background-posit ion, background-at t achment , clip, origin y size. Short and fondo. Ejemplos.
6.4. Definición de fondo CSS. background-image. Efect o fondo página w eb. background-repeat .
7. UNIDADES DE M EDIDA. PROPIEDADES W IDTH Y HEIGHT.
7.1. Unidades de medida CSS relat ivas o absolut as. in, cm, mm, pt , pc, pixel px, porcent aje, em, ex.
7.2. Propiedades CSS widt h y height . aut o (aut omát ico). Ejemplos práct icos y ejercicios resuelt os.
8. BORDES CSS. PROPIEDADES RELACIONADAS.
8.1. Tipos de borde CSS. border-st yle hidden, solid... Efect os 3D. border-t op right bot t om left .
8.2. Short and: not ación CSS abreviada. border-widt h (t hin, t hick) border-color (t ransparent ).
8.3. Propiedad out line.
9. M ARGEN (M ARGIN) Y RELLENO (PADDING). PROPIEDADES RELACIONADAS.
9.1. Concept o de margen y relleno CSS. Diferencias ent re margin y padding CSS (box model).
9.2. Padding y margin CSS. Top, right , bot t om, left . M argin negat ivo y cent rar con margin aut o.
10. POSICIONAM IENTO, M AQUETACIÓN Y DISEÑO CON CSS. POSITION, FLOAT, CLEAR Y M ÁS.
10.1. Propiedad posit ion CSS: st at ic, relat ive, absolut e, fixed. Top, right , bot t om, left . Ejemplos.
10.2. Propiedad display CSS. inline, block, none, list -it em. Ejercicios de ejemplo resuelt os.
10.3. Concept o float CSS. none, left , right y ¿cent rar?. Colocar t ext o alrededor de una imagen.
10.4. clear CSS bot h¿El t ext o no envuelve una imagen ht ml? Explicación a problemas.
10.5. Diseño web CSS dos, t res, cuat ro columnas con float ¿widt h en porcent ajes no funciona?
10.6. overflow CSS. scroll. overflow-x, overflow-y. Propiedad visibilit y (visible, hidden, collapse).
10.7. z-index CSS ¿no funciona? Superposición de element os t ipo capas, objet os, div o imágenes.
10.8. CSS vert ical-align middle Cent rar vert icalment e una imagen, t ext o, div, et c. Ejemplos.
10.9. Diseño líquido CSS (fluido) frent e a responsive-design.
10.10. Propiedades CSS max-w idt h, min-widt h, max-height , min-height .
11. FUENTES Y TEXTO.
11.1. CSS t ext -align, color, t ext -decorat ion, t ext -indent , whit e-space nowrap, pre, pre-wrap, pre-line.
11.2. CSS efect o sombra con t ext -shadow y blur, t ext -overflow clip, ellipsis.
11.3. Int erlineado: propiedad CSS line-height .
M ás información: cont act o@aprenderaprogramar.com

11.4. CSS t ext -t ransform y first -let t er, let t er-spacing y word-spacing.
11.5. Cort ar palabras largas con word-wrap.
11.6. CSS font -size (uso de larger, smaller).
11.7. font -weight o negrit a (bolder, light er).
11.8. font -st yle o cursiva it alic.
11.9. CSS font -family. t ipografía (t ipos de let ra). List a de t ipos.
11.10. font -variant (small-caps). Short and font .
11.11. @font -face CSS. Fuent es w eb grat uit as. Problemas.
11.12. Convert ir woff, eot , t t f, ot f, svg. Font convert ers.
12. ENLACES CSS.
12.1. Pseudoclases CSS link, visit ed, focus, hover y act ive. Est ilos y efect os en links.
13. LISTAS CSS.
13.1. List as CSS. list -st yle-t ype, list -st yle-posit ion (out side, inside), list -st yle-image.
13.2. Short and list -st yle.
13.3. M enú horizont al CSS o vert ical. Crear menús con efect os a part ir de list as CSS. Ejemplos.
13.4. M enú desplegable CSS horizont al. Efect o dropdown. Ejemplo de código (float , display…).
14. TABLAS CSS.
14.1. Est ilos y herencia CSS en t ablas. Widt h, height , font -size y overflow en t ablas. border-collapse.
14.2. Diseño de t ablas CSS. border-spacing, capt ion-side, empt y-cells.
14.3. Diseño de t ablas CSS. Colores de filas int ercalados alt ernos.
15. COM PATIBILIDAD Y PREFIJOS DE NAVEGADOR: CHROM E, FIREFOX, INTERNET EXPLORER,

OPERA, SAFARI.
15.1. Coment arios condicionales CSS. Problemas: compat ibilidad ent re navegadores.
15.2. St rict mode. Filt ros.
15.3. Prefijos CSS de navegador Chrome, Firefox, Int ernet Explorer, Opera, Safari.
15.4. Prefijos -webkit -moz -ms -o Ejemplos.
16. EFECTOS CSS DE ÚLTIM A GENERACIÓN. USO DE SPRITES. ANIM ACIONES.
16.1. Sprit e CSS: concept o. ¿Qué es, cómo crear y usar un sprit e? Ejemplos y código resuelt o.
16.2. Columnas CSS: column-count , column-widt h, columns, colum-gap y colum-rule. Ejemplos.
16.3. Efect o CSS esquinas redondeadas: border-radius. border-left -t op-radius. Círculo o elipse.
16.4. Efect o sombra CSS: box-shadow. Sombra int erior inset . Difuminado blur, spread. Ejercicios.
16.5. Degradados CSS. Efect o lineal y radial. linear-gradient .

16.6. Angulos CSS: unidades deg, grad, t urn, rad.

16.7. Efect os CSS. radial-gradient t ipo circle o ellipse.
16.8. Efect os CSS. t ransform: rot at e, scale, skew y t ranslat e. Rot ar, escalar, sesgar, t rasladar.
16.9. Animaciones CSS. t ransit ion-propert y, t ransit ion-durat ion, t iming-funct ion y efect o delay.
16.10. Animación CSS. Diferenciar t ransición y animación. @keyframes: fot ogramas o est ados clave.
16.11. Animat ion CSS. name, durat ion, delay, fill-mode, it erat ion-count .
16.12. Animat ion CSS. direct ion, t iming-funct ion, play-st at e.
16.13. cursor CSS. Tipos. Efect os hover: move, no-drop, resize, not -allow ed, crosshair, progress, wait .
17. M ÁS SOBRE CSS.
17.1. Ot ros aspect os de CSS.

17.2. ¿Qué hemos aprendido y qué no hemos aprendido con est e curso de CSS?
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:

ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=75& It emid=203

Orientación curso “Tutorial básico programador web: CSS desde cero”
ORIENTACIÓN SOBRE EL CURSO PASO A PASO “TUTORIAL BÁSICO DEL PROGRAM ADOR W EB: CSS
DESDE CERO”
CSS es un lenguaje diseñado para separar el cont enido de las páginas web de su present ación. Así, un
mismo cont enido podría verse de dist int as maneras o con dist int os aspect os aplicándole dist int os
est ilos CSS.
CSS no es un lenguaje de programación propiament e dicho, aunque a veces se lo denomina lenguaje de

programación coloquialment e. Est o es posiblement e debido a que muchas veces el lenguaje CSS se
mezcla de alguna manera con el HTM L o con lenguajes de programación como PHP. Est a mezcolanza
implica que a veces el código CSS est é junt o al HTM L o PHP, o que a la hora de desarrollar una w eb o
solucionar un problema en una web sean necesarios conocimient os t ant o de HTM L como de CSS como
de un lenguaje de programación propiament e dicho.
CSS es un lenguaje descript ivo, formado por una serie de at ribut os, valores y et iquet as que el
navegador int erpret ará de una u ot ra forma most rando dist int os aspect os para las diferent es et iquet as
que forman la est ruct ura de una página HTM L. Es decir, podemos obt ener muchos aspect os y diseños
para una misma página HTM L simplement e cambiando su hoja de est ilos.
Est e curso que est amos comenzando va dirigido a aquellas personas que quieran adquirir unos
fundament os básicos para crear hojas de est ilo con vist as a poder desarrollar en el fut uro páginas web
at ract ivas y de ciert a complejidad. No vamos a desarrollar un manual de referencia de CSS, sino un
curso básico paso a paso. No vamos a cont emplar t odos los aspect os de las hojas de est ilo CSS, sino
aquellos que consideramos básicos desde el punt o de vist a didáct ico, con vist as a que post eriorment e
la persona que lo desee amplíe sus conocimient os. Nuest ro objet ivo es ser claros, sencillos y breves, y
para eso t enemos que cent rarnos en det erminadas cuest iones de CSS y dejar de lado ot ras.
Como conocimient os previos para iniciar est e curso recomendamos (seguir la recomendación o no
queda a crit erio del alumno y/ o profesor que vayan a seguir el curso) est os: Ofimát ica básica (saber
copiar, pegar, mover y abrir archivos, et c.) y haber realizado el Curso básico de HTM L que se ofrece en
aprenderaprogramar.com (ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=cat egory& id=69& It emid=192).
Conocer algún lenguaje de programación sería un aspect o posit ivo.
Los conocimient os previos son, como hemos dicho, deseables pero no imprescindibles.
Aprender CSS requiere t iempo y esfuerzo. Para hacer ese recorrido más llevadero, t e recomendamos
que ut ilices los foros de aprenderaprogramar.com, herramient a a disposición de t odos los usuarios de
la web (ht t p:/ / www.aprenderaprogramar.com/ foros/ ), y que t e servirá para consult ar dudas y recabar
orient ación sobre cómo enfrent art e a los cont enidos. Ent re los miembros del port al web y ot ros
usuarios, t rat aremos de ayudart e para que el est udio t e sea más llevadero y seas capaz de adquirir los
conocimient os necesarios y avanzar como programador o diseñador web.
El t iempo necesario (orient at ivament e) para complet ar el curso incluyendo práct icas con ordenador,
suponiendo que se cuent a con los conocimient os previos necesarios, se est ima en 90 horas de
© aprenderaprogramar.com, 2006-2029
Orientación curso “Tutorial básico programador web: CSS desde cero”
dedicación efect iva o aproximadament e un mes y medio con una dedicación de 3 horas diarias de lunes
a viernes. Aprender a crear páginas web requiere dedicación y esfuerzo.
El curso ha sido generado paso a paso usando Windows como sist ema operat ivo y por ello cont iene
algunas indicaciones específicas para usuarios de Windows, pero t ambién puede ser ut ilizado en ot ros
ent ornos (Linux, M acint osh, et c.).
Est amos seguros de que con t u esfuerzo y la ayuda que t e podamos brindar est e curso t e result ará de
gran ut ilidad.
Próxima entrega: CU01003D

Concepto de CSS. Hojas de estilo en cascada.
DEFINICIÓN O CONCEPTO DE LENGUAJE CSS
CSS es un lenguaje ut ilizado en la present ación de document os HTM L. Un document o HTM L viene
siendo coloquialment e “ una página web” . Así, podemos decir que el lenguaje CSS sirve para dot ar de
present ación y aspect o, de “ est ilo” , a una página web. Est e lenguaje es principalment e ut ilizado por
part e de diseñadores y programadores web para elegir mult it ud de opciones de present ación como
colores, t ipos y t amaños de let ra, imágenes de fondo, bordes, et c.
La filosofía de CSS se basa en int ent ar separar lo que es la est ruct ura o cont enido y configuración básica
del document o HTM L de su present ación. Por decirlo de alguna manera: la página web sería lo que hay
debajo (el cont enido) y CSS sería “ un crist al de color” que hace que el cont enido se vea de una forma u
ot ra. Usando est a filosofía, result a muy fácil cambiarle el aspect o a una página web: bast a con cambiar
“ el crist al” que t iene delant e. Piensa por ejemplo qué ocurre si t ienes un libro de papel y lo miras a
t ravés de un crist al de color azul: que ves el libro azul. En cambio, si lo miras a t ravés de un crist al
amarillo, verás el libro amarillo. El libro (el cont enido) es el mismo, pero lo puedes ver de dist int as
maneras. CSS permit e cambiar el est ilo a los cont enidos de las páginas web.
Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas
t ípicas et iquet as HTM L como <H1> (h1 es una et iquet a en el lenguaje HTM L dest inada a most rar un
t ext o como encabezado, en t amaño grande). Pero t ambién hay funciones algo más complejas, como
int roducir espaciado ent re element os <DIV> (div es una et iquet a HTM L para ident ificar una
det erminada región o división de cont enido dent ro de una página web) o est ablecer imágenes de
fondo, bordes redondeados, et c..
CSS es muy int uit ivo y sencillo una vez se llega a aprender, ya que para su definición siempre se hace
uso de un ident ificador de et iquet a HTM L (como por ejemplo <H1>), y luego indicamos con qué aspect o
queremos que se muest ren t odas las et iquet as <H1> que aparezcan en un document o. Podemos definir
cómo queremos que se muest ren las dist int as part es del document o HTM L, pudiendo en cada caso
definir sus propiedades (color, t ipo de fuent e, t amaño, espacio de márgenes, bordes, imagen de fondo,
et c.) con algún det erminado valor deseado.
Vamos a ver primero lo que sería un ejemplo muy sencillo de aplicación de CSS, que t rat ará de una
página web o archivo HTM L donde t an solo t endremos un párrafo de t ext o. El t ext o est ará dent ro de
una et iquet a <p>. Dist inguiremos con est e ejemplo ent re cont enidos y present ación o aspect o.
Para seguir est e t ut orial es necesario que t engas conocimient os básicos de HTM L. Si no los t ienes, t e
recomendamos que realices primero el curso básico de HTM L disponible en la sección de cursos de
aprenderaprogramar.com (o si prefieres acceder direct ament e, puedes hacerlo a t ravés de est e enlace:
ht t p:/ / www.aprenderaprogramar.com/ index.php?opt ion=com_cont ent& view=cat egory& id=69& It emid=192).
Nuest ro document o ht ml cont endrá el siguient e t ext o de part ida (en est e caso se ha llamado
ejemplo.ht ml):
<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / ww w.w3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Ejemplo aplicación CSS - aprenderaprogramar.com</ t it le>
</ head>
<body>
<p>Text o de ejemplo para visualizar result ados </ p>
</ body>
</ ht ml>
Una vez creado el document o ejemplo.ht ml en nuest ro ordenador, lo abriremos con un navegador
web, obt eniendo un result ado que será similar a ést e:
Tenemos una página web que t an solo t iene un párrafo (“ Text o de ejemplo para visualizar result ados” ).
Est e aparece en color negro por defect o y nosot ros, para ver la ut ilidad de CSS deseamos most rar el
t ext o en rojo. En realidad con CSS podemos hacer cosas mucho más complejas, pero ahora sólo
queremos poner un ejemplo para most rar la ut ilidad de CSS.
Una vez hayamos creado un archivo con el est ilo para aplicar a los párrafos (durant e el curso
aprenderemos cómo hacer est o y muchas más cosas) podremos hacer que t odos los párrafos de una
página web se muest ren de una misma manera sin t ener que modificar párrafo a párrafo, sino
únicament e modificando el est ilo CSS que se debe aplicar a los párrafos. Como decíamos, int roduciendo
el código CSS adecuado podremos lograr que cambie el aspect o de nuest ra página web:
¿Hace falt a CSS para realizar est o? Ant iguament e no. Podíamos hacerlo simplement e usando HTM L:
<font color =" red" ><p> Text o de ejemplo para visualizar result ados</ p></ font >
Sin embargo, con est a escrit ura sólo est ábamos modificando el aspect o de un párrafo, mient ras que
con CSS podemos modificar el aspect o de t odos los párrafos de una página web, repart idos en cient os
de líneas y de archivos, “ aut omát icament e” . Con la evolución de HTM L, algunas formas sint áct icas que
servían para dot ar de aspect o a las páginas web han pasado a considerarse obsolet as o descat alogadas,
dejando que la present ación quede cont rolada de forma independient e a t ravés de CSS.
CSS hace que result e fácil cambiar la present ación ya que si ahora quisiéramos cambiar el color, fuent e,
t amaño, et c, de t odos los párrafos de nuest ra página web, t an solo deberíamos de cambiar las
propiedades en el archivo donde hayamos definido el est ilo para los párrafos, sin alt erar nada en la
página web. Est o es mucho más fácil, rápido y legible que t ener que est ar modificando t odas y cada una
de las et iquet as <p> que aparecieran en nuest ra página web.
Ahora bien, imaginemos que t enemos una página web con 3 et iquet as <p> pero no deseamos que
t odas t engan la misma present ación. CSS t iene previst o cómo poder aplicar dist int os est ilos a ciert os
párrafos o et iquet as. Durant e el curso veremos cómo. Est a imagen sería un ejemplo de uso de dist int os
est ilos para la et iquet a <p> de párrafos.
La forma de definición de est ilos CSS separa la present ación de la información en una página web. Es
muy út il porque t enemos los est ilos por un lado y los cont enidos por ot ro. Si en un moment o dado
queremos cambiar la forma en que se ve la página pero no sus cont enidos, únicament e t endríamos que
modificar los archivos css. Pero t ambién exist en est as ot ras formas de aplicar est ilos, lo veremos a lo
largo del curso.
Quizás los ejemplos que hemos vist o hast a el moment o t e result en muy sencillos y poco at ract ivos. A
cont inuación most ramos imágenes de lo que puede hacerse ut ilizando CSS a nivel avanzado, que como
verás puede ser realment e espect acular.
Fíjat e en las dos imágenes que most ramos a cont inuación y t rat a de ident ificar qué t ienen en común y
qué t ienen dist int o:
Podemos decir que t ienen en común un mismo t ext o, un mismo menú y posición de menú. En cambio
podemos decir que cambian los colores, t ipos y tamaños de let ra y las imágenes de fondo, t ant o
det alles decorat ivos como las flores o personas, como fondos que crean marcos para el t ext o o los
menús. Con un conocimient o avanzado de CSS podremos lograr efect os similares a est os que est amos
viendo y cambiar el aspect o de una página web con sólo un click de bot ón.

¿Para qué sirve
s CSS? ¿Es un
u lenguaje de programación?
?
PARA QU É SIRVE CSS
CSS es u n lenguaje que sirve para

p dot ar de
d present ación
a y aspe
ect o, de “ esst ilo” , a pág
ginas w eb
nt os HTM L). CSS no es u n lenguaje de
(documen d programa
ación. Podríamos decir q ue es un len
nguaje que
suele apa
arecer relacio óximo a un lenguaje de programaciión o que su
onado o pró uele colaborrar con un
lenguaje de
d programa
ación, pero no
n es un leng
guaje de prog
gramación p ropiament e dicho.
A veces o irás hablar de

d “ Lenguaje
es de program
mación HTM
M L y CSS” . Estt a expresión
n es, desde el punt o de
mal, incorrecct a, ya que ni
vist a form n HTM L ni CSS
C son leng
guajes de pro
ogramación. No obst antt e, a veces
coloquialm
ment e se usa
a el t érmino “ programacción CSS” .
Un lengua
aje de progra
amación es un
u lenguaje que
q se usa para
p realizar procesos de int erés a t ra
avés de un
ordenado
or o disposit ivvo elect rónicco, desde un
n cálculo par a un estudiant e o ingeni ero, a una co
ompra por
int ernet , pasando po
or cualquier cosa que se
s t e ocurra
a. Un lengua
aje de programación t ie
ene como
caract erísst icas básicass el tener la
a capacidad para “ t omarr decisiones”” o ejecut ar un proceso u ot ro en
función d e las circunsst ancias (por ejemplo dep d bot ón qu e pulse el ussuario), así co
pendiendo del omo el ser
capaz de repet ir proccesos repet id
das veces ha
ast a que se cumpla una condición. C
CSS no es un
n lenguaje
mit a cumplir est
que perm e as funcion
nes, por t antt o no es un l enguaje de programació
p ón aunque se
e use junt o
a lenguaje
es de programación.
n lenguaje q ue apareció para hacer más fáciles y con mejo r aspect o lo

CSS es un os desarrollo s w eb. Un
desarrollo
o w eb comprrende múlt ip
ples áreas de
e conocimien
nt o:
Análisis y
diseño
funcional
Aná
álisis y
Program
mación disseño
arqui t ect ural
Desarrollo
web
Di seño
Int egra
ación,
grá
áfico,
Testt ing
M aquuet ación
Sist emas
(servidores,
bases de
dat os)
© aprenderraprogramar.co
om, 2006-2029
¿Para qué sirve CSS? ¿Es un lenguaje de programación?
En la clasificación que hemos hecho, CSS est aría englobado dent ro del área de diseño gráfico y
maquet ación.
Los desarrollos w eb t ienen dimensiones muy variables. Podemos hablar desde una pequeña página
w eb para una empresa local hast a un gran port al para una empresa de ámbit o int ernacional. En ambos
casos podríamos decir que int erviene la programación w eb y el diseño w eb. Sin embargo, un pequeño
desarrollo puede ser llevado a cabo por una sola persona que abarque t ant o programación como
diseño, mient ras que un gran desarrollo requiere de un equipo de t rabajo más o menos amplio y con
dist int os especialist as, ya que en t orno a los desarrollos w eb hay diferent es áreas de conocimient o
implicadas (análisis, diseño, programación, sist emas, int egración, t est ing, et c.).
En un gran desarrollo exist en personas especializadas en las dist int as áreas, de modo que el
programador no suele t rabajar en el diseño (except o para hacer algún ret oque o cambio, o para
solucionar problemas). No obst ant e, sí result a convenient e que un programador w eb t enga los
conocimient os básicos de CSS ya que le result arán út iles y necesarios, por un lado para la solución de
problemas y por ot ro para int egrar cuest iones donde el diseño y la programación se ent remezclan.
Si miramos a los lenguajes o t ecnologías que hay en t orno a los desarrollos w eb podríamos hacer una
clasificación que comprende: HTM L, CSS, Bases de dat os, Servidores, Lenguajes de programación del
lado del client e (p.ej. Javascript ) y Lenguajes de programación del lado del servidor (p.ej. PHP).
HTM L
Lenguajes
del lado
CSS
del
servidor
Tecnologías
web
Lenguajes
Bases de
del lado
datos
del cliente
Servidores
HTM L y CSS son t ecnologías (o met alenguajes, ya que no puede considerárselos lenguajes de
programación) que int ervienen en práct icament e t odo desarrollo, grande o pequeño. Se encargan de
dot ar de una est ruct ura y present ación agradables a aquello que ve el usuario de páginas w eb.
¿Para qué sirve CSS? ¿Es un lenguaje de programación?
Los lenguajes de programación del lado del servidor realizan procesos en el servidor (comput ador
remot o que se encarga de enviar las páginas w eb a t ravés de int ernet ): podemos cit ar ent re est os
lenguajes Java (JSP), ASP.NET, PHP, o Perl, ent re los principales.
Los lenguajes de programación del lado del client e realizan procesos en el ordenador personal del
usuario (efect os visuales, cálculos, et c.): podemos cit ar ent re est os lenguajes Javascript , Java (applet s),
o VBScript , ent re los principales.
En cuant o a bases de dat os podemos nombrar M ySQL, SQLServer y Oracle, ent re las principales.
Las t ecnologías se combinan ent re ellas de muy diversas maneras. Podemos cit ar algunas
combinaciones bast ant e habit uales ent re lenguajes de programación y bases de dat os: Java + Oracle,
ASP.NET + SQLServer, PHP + M ySQL. Sea cual sea la combinación ut ilizada, en un desarrollo w eb
moderno siempre int ervendrá HTM L y CSS.
En resumen, CSS es un lenguaje para dot ar de present ación y est ilo a páginas w eb cuyos aspect os
básicos deben ser conocidos t ant o por programadores w eb como por diseñadores w eb o maquet adores
w eb. En la práct ica, muchas veces se ent remezcla el código de programación con el código HTM L y
código CSS, de ahí que coloquialment e se hable de “ programación w eb” para referirse a t odo est e
conjunt o, aunque formalment e ni HTM L ni CSS son lenguajes de programación.
Fíjat e que est amos t rat ando de dejar claro qué es y para qué sirve CSS ant es de empezar a est udiar est e
lenguaje porque si t enemos los concept os claros nos será mucho más sencillo el aprendizaje,
ahorraremos t iempo y comet eremos menos errores.

ht t p:/ / aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view =cat egory& id=75& It emid=203
Efectos CSS. La frontera en
ntre CSS, HTM L y programació
ón
EFECTOS CSS. UBICAR

R LA FRONTE
ERA
En el ant erior
e epígraf e del curso hemos
h indica
ado que CSS
S no es un lenguaje de p rogramación
n pero que
en ciert o sent ido se ent
e remezcla con ést os. A veces nos encont
e mos que se p uede lograr un mismo
rarem
ando HTM L, usando CSS
efect o usa S ó usando u n lenguaje de
d programación. ¿Por q ué t ant as fo
ormas para
hacer una a? ¿Dónde esst á la front era ent re cad a lenguaje?
a misma cosa
Est a pregunt a no es de uest a. Vamo s a ver con un

d fácil respu u ejemplo lo
l que puede
e ocurrir parra algo t an
sencillo co
omo aplicar algunos efecct os a un t exxt o. No obstt ant e, t en en
n cuent a que
e est e ejemp
plo relat ivo
a t ext o po
odría aplicarsse a ot ros co
oncept os com
mo bordes, márgenes,
m an
nimaciones, e
et c.
El lenguaje HTM L pe
ermit e aplica
ar algunos efect
e os visu ales al t ext o. Escribe o copia est e código y
guárdalo en un archivvo de nombre
e ejemplo1.h
ht ml.
<!DOCTY YPE HTM L PUBLIC " -/ / W3C/ / DTD

D HTM L 4.01 Transit ional/ / EN"
E " ht t p:/ / www w.w3.org/ TR/ h ht ml4/ loose.dt d"
d >
<ht ml>
<head>
<t itt le>Ejemplo HTTM L aprenderap programar.com m</ t it le>
<m et a name=" t ipo o_cont enido" cont
c ent =" t ext / ht ml;" ht t p-equ
uiv=" cont ent -t yype" charset =" ut
u f-8" >
</ head>
<body>
<p> >Negrit a: <st ronng>Quiero apreender a program mar</ st rong><// p>
<p> >It álica: <i>Quiiero aprender a programar</ i> ></ p>
<p> >Tachado: <st rike>Quiero
r aprrender a progra amar</ st rike><// p>
<p> >Color fuent e: <font color =" green"
g >Quiero aprender a pro ogramar</ font > ></ p>
</ body>
</ ht ml>
>
Con Javasscript podem

mos hacer alg
go parecido . Escribe o copia
c est e có
ódigo y guárrdalo en un archivo
a de
nombre ejemplo2.ht
e m
ml:
<!DOCTY YPE HTM L PUBLIC " -/ / W3C/ / DTD

D HTM L 4.01 Transit ional/ / EN" E " ht t p:/ / www w.w3.org/ TR/ h ht ml4/ loose.dt d"
d >
<ht ml>
<head>
<t itt le>Ejemplo Javvascript aprend eraprogramar.com</ t it le>
<m et a name=" t ipo o_cont enido" cont
c ent =" t ext / ht ml;" ht t p-equ
uiv=" cont ent -t yype" charset =" ut
u f-8" >
</ head>
<body>
<sccript >
varr t xt = " Quiero aprender
a a proggramar" ;
doccument .w rit e(" <p>Negrit a: " + t xt .bold() + " </ p>" );
doccument .w rit e(" <p>It álica: " + t xt .it alics() + " <// p>" );
doccument .w rit e(" <p>Tachado: " + t xt .st rike() + " </ p>" );
doccument .w rit e(" <p>Color fuentt e: " + t xt .font color(" green" ) + " </ p>" );
</ script >
</ body>
</ ht ml>
>
om, 2006-2029
Efectos CSS. La frontera entre CSS, HTM L y programación
Y por últ imo en vez de aplicar Javascript o simple HTM L, podemos usar CSS. Escribe o copia est e código
y guárdalo en un archivo de nombre ejemplo3.ht ml:
<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w.w 3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Ejemplo CSS aprenderaprogramar.com</ t it le>
<met a name=" t ipo_cont enido" cont ent =" t ext / ht ml;" ht t p-equiv=" cont ent -t ype" charset =" ut f-8" >
<st yle t ype=" t ext / css" >
#negrit a{font -w eight :bold;}
#it alica{font -st yle:it alic;}
#t achado{t ext -decorat ion: line-t hrough;}
#verde{color:green;}
</ st yle>
</ head>
<body>
<p>Negrit a: <span id=" negrit a" >Quiero aprender a programar</ span></ p>
<p>It alica: <span id=" it alica" >Quiero aprender a programar</ span></ p>
<p>Tachado: <span id=" t achado" >Quiero aprender a programar</ span></ p>
<p>Color fuent e: <span id=" verde" >Quiero aprender a programar</ span></ p>
</ body>
</ ht ml>
Haz doble click sobre cada uno de los archivos para visualizar el result ado en un navegador. El result ado
que obt enemos es algo similar a est o:
El único código que debemos ent ender por el moment o es el correspondient e al ejemplo 1, ya que es
código HTM L que ya debemos conocer. El código del ejemplo 2 y ejemplo 3 no t e preocupes si no lo
ent iendes ya que el objet ivo ahora no es comprender ese código, sino simplement e ver cómo podemos
alcanzar un mismo objet ivo usando dist int os lenguajes como HTM L, Javascript ó CSS.
Además si nos fijamos, el código Javascript y el código CSS est á dent ro de un document o HTM L (aunque
podrían est ar en archivos separados).
Todo est o nos puede llevar a pregunt arnos: ¿Por qué se ent remezclan unos lenguajes con ot ros? La
respuest a sería hist órica y t écnica: HTM L se convirt ió en la forma de crear páginas w eb, pero t enía
muchas limit aciones. En un moment o dado, se consideró que ent remezclar (embeber) lenguajes ent re
sí podía ser una buena opción t écnica para resolver problemas o hacer cosas que no era posible o
convenient e hacer con HTM L. Así, podemos embeber Javascript en HTM L ó embeber CSS en HTM L, o
embeber HTM L en PHP, et c. Por ello a veces ocurre que no hay una front era clara ent re lenguajes de
programación, HTM L y CSS. Est o, que puede result ar un t ant o confuso inicialment e, se va convirt iendo
en “ comprensible” a medida que se t rabaja y se aprende más sobre est os lenguajes.
Por ot ro lado, ¿por qué t ant as vías dist int as para hacer algo cuando quizás que solo hubiera una
manera de poner el t ext o en negrit a, o una sola manera de poner un color de fuent e, sería más simple?
Para est o podemos cit ar varios mot ivos:
a) M otivos históricos: a veces las cosas se empezaron a hacer de una manera y luego se pensó
que era mejor hacerlas de ot ra. Sin embargo, para evit ar que las páginas w eb exist ent es
dejaran de funcionar, se siguieron permit iendo formas de hacer las cosas “ ant icuadas” . Por
ejemplo la et iquet a <st rike> … </ st rike> en HTM L se considera deprecat ed (obsolet a, de uso no
recomendado) en HTM L 4.01 y no est á admit ida en HTM L 5. Sin embargo, se sigue usando.
M uchas formas de hacer las cosas se admit en aunque no est én recomendadas.
b) M otivos de independencia de tecnologías: HTM L es una cosa y Javascript es ot ra, aunque en la

práct ica nos encont remos con que Javascript se puede “ ent remezclar” (embeber) en HTM L.
Podríamos hacer cosas en Javascript y no querer usar ot ro lenguaje, es decir, podríamos t rat ar
de hacer cosas independient es sin “ ent remezclar” t ecnologías. Por ello lenguajes como
Javascript ó PHP incorporan posibilidades para hacer cosas que ya se pueden hacer de ot ra
manera. De est a forma t ienen la pot encialidad de ser más independient es.
c) M otivos de políticas de desarrollo y estándares: quizás no t e lo hayas pregunt ado nunca, pero
conviene t ener al menos una orient ación al respect o: ¿Quién define qué es un lenguaje como
HTM L, CSS, PHP, cómo se debe escribir, qué result ado debe generar cada et iquet a o
inst rucción, et c.? En general det rás de los lenguajes, aunque algunos fueron creados por
personas individuales, hay empresas, comunidades de desarrollo, asociaciones, consorcios
int ernacionales, comit és, et c. En ocasiones un grupo de personas no est á de acuerdo con la
forma en que se est á creando una especificación del lenguaje y forman grupos de t rabajo
alt ernat ivos que definen est ándares alt ernat ivos. A veces t riunfa un est ándar y el ot ro se
desecha, pero ot ras veces conviven dist int os est ándares que permit en hacer las cosas de
dist int as maneras. Para los creadores de páginas w eb est o result a negat ivo, pero ¡así es la vida!
d) Otros motivos: podríamos abundar en el por qué de que las cosas sean como son, pero con
t ener una idea general nos bast a.
Acost úmbrat e a pensar que los desarrollos w eb no son mat emát icas. Las cosas se pueden hacer de
muchas maneras, y de hecho muchas veces se hacen “ de mala manera” por desconocimient o, por
prisas, o por ser más fácil.
Acost úmbrat e a pensar que los desarrollos w eb usan dist int os lenguajes que muchas veces se
ent remezclan ent re sí hast a el punt o de ser difícil dist inguir en qué corresponde a un lenguaje y qué
corresponde a ot ro. Hay lenguajes comunes en los desarrollos w eb como HTM L, pero por ejemplo en
cuant o a lenguajes de programación no t odos los programadores usan el mismo.
Acost úmbrat e a encont rart e con que a veces las cosas no funcionan como una esperaría que lo
hicieran, no debido a que se haya escrit o mal el código o usado mal una inst rucción, sino debido a que
en el mundo de int ernet exist en dist int os est ándares y dist int as versiones. A veces aunque nos
esforcemos porque t odo se vea como nosot ros esperamos en t odos los navegadores o disposit ivos, es
difícil conseguirlo. Es un poco caót ico, pero es así.
En est e curso más que aprendernos t odas las inst rucciones, est ándares, et c. vamos a t rat ar de ser
capaces de razonar el por qué de las cosas, y a t rat ar de esforzarnos por saber cómo generar código
limpio, bien est ruct urado y de calidad.

CSS en gest ores de conten
nido como Joom
mla, W ordPress
s, Drupal…
CSS EN AP
PLICACIONES
S W EB
Ya hemoss dicho que CSS nos perrmit e separa

ar el cont en ido de una página w eb de su prese
ent ación o
aspect o. Una de las aplicacioness más ampliiament e extt endida de CSS
C est á en dot ar de un
u aspect o
at ract ivo a las aplicaciiones w eb, dent
d ro de lass que dest aca
an los Gest o res de Cont e
enidos o CM S (Cont ent
M anagem
ment Syst em
ms). Un CM S es soft w are
a que se inst ala en el
e servidor y sirve para
a publicar
cont enido
os en una página w eb fáccilment e.
pt o de aplicación w eb (programa que

El concep q se aloja
a en un servvidor remott o o host ing
g y al que
accedemo
os a t ravés de
d int ernet ) es muy am
mplio, de hec
cho con el paso
p de los años se ha hecho t an
amplio co
omo los prog
gramas de orrdenador o las
l act ividad es que realizza el ser hum
mano. Las ap
plicaciones
w eb se han
h populariizado en loss últ imos añ
ños gracias a que buen
na part e de est as aplica
aciones se
comenzarron a dist rib uir y ut ilizar de forma grat uit a, con una comuni dad de usua
arios y desarrrolladores
a en t orno a ellas.
de soft w are
M uchas de ue personas que no t ien

d est as apliicaciones sirrven para qu nen conocim
mient os de in
nformát ica
gest ionen
n páginas w eb
e como t ien das de come
ercio elect ró nico, foros, port ales de ccont enidos, periódicos
digit ales, et c.
Las aplicaciones w eb se
s podrían clasificar de varias
v manerras. De hecho ealizar una cl asificación
o es difícil re
debido a que los cam pos en que se
s ut ilizan las dist int as aplicaciones muchas
m vece
es se solapan
n. Vamos a
hacer una
a clasificació
ón común, que
q es basá
ándonos en el t ipo de página
p w eb para el que
e son más
habit ualm
ment e usadoss:
CLASIFICA
ACIÓN EJEM PLOS DESC
CRIPCIÓN
mla, Drupal, OpenCM S, Plone, WordPrress,

Joom
b2evvolut ion, Gee
eklog, Serendi pit y, Text pat t ern,
Orientt ados a crearr port ales w eb
e de muy
CM S M ade S
Simple, conccret e5, Con
nt ao,
Gestores de
d diferen
nt es t emát ica
as, desde un
n periódico
Imp ressPages, l
liveSit e, Nuccleus, PyroC
CM S,
Contenido
os digit al hast a una t i enda on-line o un blog,
TYPO hpM yFAQ, e107,
O3, Chamilo,, M oodle, ph
página
a personal, et cc.
M ah
hara, M ambo
o, ocPort al, PHP-Fusion,
P PHP-
P
Nukke, Tiki Wiki, Xoops,
X Zikula
dos para la ccreación de sist

Pensad s emas de
Foros y libros de php BB, SM F, flu
uxBB, M yBB, Vanilla Foru
ums, foros donde loss usuarios part icipan
visitas XM B Forums, GBo
ook, Lazarus Guest
G Book, int erca mensajes o para libros de
ambiándose m
visit as
om, 2006-2029
CSS en gestores de contenido como Joomla, W ordPress, Drupal…
CLASIFICACIÓN EJEM PLOS DESCRIPCIÓN
Pensados para mant ener un sist ema de

información ent re una comunidad de
M ediaWiki, DocuWiki, PmWiki, WikkaWiki,
W ikis usuarios. Est e sist ema puede ser generalist a
TikiWiki, PikiWiki
como w ikipedia o est ar especializado en un
área o campo de conocimient o concret o.
Tiendas y Pensadas para crear t iendas elect rónicas y

M agent o, Prest aShop, CubeCart , OpenCart ,
comercio galerías de product os dest inadas al
osCommerce, Tomat oCart , Zen Cart ,
electrónico comercio elect rónico.
Ext Calendar, phpScheduleit , WebCalendar, Permit en crear calendarios, galerías de

phpFreeChat , phpM yChat , DadaM ail, PHPList , imágenes, Chat s, Sist emas de envío de
Utilidades varias
Sit eRecommender, OpenX, OSClass, QuickSell correo elect rónico, sist emas de anuncios,
Classifieds, Help Cent er Live, Hesk, osTicket sist emas de soport e a usuarios
M ILLONES DE DESCARGAS, M ILLONES DE W EBS DISTINTAS
Vamos a cent rarnos ahora en lo que permit e most rar una aplicación w eb a los usuarios. Por ejemplo,
para un diario digit al diremos que exist e una part e denominada BackEnd donde escriben los art iculist as
y ot ra part e denominada Front End que es la página w eb en sí del diario. Aplicaciones w eb que pueden
servir para est e propósit o son Joomla, Drupal o WordPress. Si cient os de diarios digit ales ut ilizan
Drupal, por ejemplo, ¿Cómo consiguen t ener un aspect o diferent e unos de ot ros si el punt o de part ida
es siempre el mismo?
La respuest a est á en que est as herramient as incorporan código CSS avanzado mediant e el que se crean
aspect os dist int os. La aplicación w eb suele cont ar con una part e para la gest ión de cont enidos mient ras
que ot ra part e denominada plant illa, t emplat e, t heme, skin, et c. se encarga de cont rolar el aspect o.
El t emplat e o t heme act úa como una piel sobre los cont enidos. Fíjat e cómo aplicando un filt ro una
fot ografía puede cambiar:
Con CSS avanzado la idea es similar: aplicamos dist int os t ipos de fuent es, t amaños de fuent es,
imágenes de fondo, colores, et c. para conseguir dist int os aspect os. Fíjat e en est as imágenes, que
corresponden a t hemes o plant illas del gest or de cont enidos Drupal.
Aquí vemos cómo usando CSS se pueden conseguir muy dist int os aspect os. Est o ha permit ido el éxit o
de gest ores de cont enidos como Joomla, Drupal o WordPress, con los que se puede crear desde una
página dedicada al comercio elect rónico hast a una w eb de un rest aurant e o un periódico digit al.
Gracias a los t emplat es o t hemes t ambién se puede cambiar el aspect o de páginas w eb cada ciert o
t iempo.
Si t e fijas en las imágenes ant eriores se puede argument ar que realment e no t ienen el mismo cont enido
debajo. Efect ivament e, en est e caso no t ienen el mismo cont enido. Pero t en en cuent a que quizás el
aspect o de una peluquería deba ser un poco diferent e al aspect o de un rest aurant e.
En las siguient es imágenes t e most ramos un mismo cont enido con un cambio de t heme:
En est e caso el cont enido sí es el mismo (excluyendo el espacio publicit ario). Fíjat e en los cambios:
cambia la imagen de fondo que aparece en la cabecera de la w eb. Cambia el color de los element os
(let ras, fondos), cambia la forma en que aparece el menú, cambia el espaciado ent re líneas, et c. Pero la
información que hay debajo es la misma.
Todo est o es posible gracias a CSS, la t écnica y lenguaje que permit e separar cont enidos y present ación.
Realment e las páginas w eb t ienen una gran variedad de aspect os no solo gracias a dist int os colores e
imágenes, sino t ambién gracias a que las t écnicas CSS permit en crear muy dist int os aspect os.
Exist en muchos est udios de diseño y programación donde se t rabaja en la creación de t emplat es o
t hemes prediseñados. Hay muchos de dist ribución grat uit a, pero la mayoría de los t emplat es o t hemes
de calidad son de pago (cosa lógica, ya que t ienen un gran t rabajo det rás).
Hemos querido con est a aproximación al uso de CSS en aplicaciones w eb remarcar la import ancia que
ha adquirido est a t écnica en los desarrollos w eb. No vamos a ent rar de moment o en cuest iones
relacionadas con t emplat es o t hemes, sino a cent rarnos en cuest iones básicas de CSS. La realidad en
t orno a los t emplat es o t hemes de aplicaciones w eb es bast ant e compleja, ya que act ualment e se
t iende no sólo a permit ir cambiar el aspect o de un mismo cont enido, sino a permit ir complet ament e la
personalización de la present ación de páginas w eb (por ejemplo permit ir usar dos módulos lat erales y
una columna cent ral, o por el cont rario dos columnas cent rales sin módulos lat erales, et c.). Est o ya
supone el uso de programación al mismo t iempo que CSS, y t ambién suele suponer la part icipación de
dist int os especialist as (diseñadores, maquet adores, expert os en CSS, programadores, et c.) para la
creación de los t emplat es o t hemes profesionales de las aplicaciones w eb.
Lo primero es lo primero, así que em pecemos con los fundament os de CSS.

Empezar a usar
u CSS a parttir de un docum
mento HTM L bá
ásico
UN DOCU
UM ENTO HTM
M L BÁSICO
Para ver cómo

c CSS no
os sirve para dot ar de aspect o a un document
d o HTM
H L vamoss a part ir de un código
e represent a la est ruct u ra básica de una página web. En estt a est ruct ura
HTM L que a la página web
w queda
dividida en:
e cabecera con el t ít ulo
o y mensaje breve, men
nú, t ext o con
n algunas im ágenes, form
mulario de
cont act o y un pie de página
p con in
nformación sobre
s los autt ores o el cop
pyryght .
Crea un d ocument o HTM

H L con un edit or de t ext
e o como No
ot epad++ co
on el siguientt e cont enido
o:
<!DOCTYPE HTM L PUBLIC

C " -/ / W3C/ / DTD
D HTM L 4.01 Trransit ional/ / EN" " ht t p:/ / ww w .w3.org/ TR/ ht m
ml4/ loose.dt d" >
<!—Código
o base para el curso
c -->
<ht ml>
<head>
<t it le>Portt al web - apren
nderaprogramar.com</ t it le>
<met a cha
arset ="ut f-8" >
<met a nam
me=" descript io n" cont ent =" Po
ort al web apren
nderaprograma
ar.com" >
<met a nam
me=" keywords"" cont ent =" apre
ender, program
mar, cursos, librros" >
</ head>


<body>


<div>
<h1>Port al
a web aprenderaprogramar.co
om</ h1>
<h2>Didácct ica y divulgación de la progra
amación</ h2>
</ div>

<br / >

>
<div>


<div>
<div>M en ú</ div>
<hr/ >
<ul>
<li><a hreff=" #" >Inicio</ a></
a li>
<li> <a hre
ef=" libros.ht ml"" >Libros de pro gramación</ a>
> </ li>
<li> <a hre
ef=" cursos.ht mll" >Cursos de prrogramación</ a>
a </ li>
<li> <a hre
ef=" humor.ht m l" >Humor inforrmát ico</ a> </ li>
</ ul>
</ div>

om, 2006-2029
Empezar a usar CSS a partir de un documento HTM L básico


<div>


<div>
<p>Aprender a programar es un objet ivo que se plant ea mucha gent e y que no t odos alcanzan.</ p>
<p>Hay que t ener claro que <a href=" ht t p:/ / www.aprenderaprogramar.com" >aprender programación</ a> no es t area de un
día ni de una semana: aprender programación requiere al menos varios meses y, si hablamos de programación a nivel
profesional, varios años. No queremos con est o desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo
nuest ros primeros programas.</ p>
<p>Puedes seguir uno de <a
href=" ht t p:/ / www.aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=art icle& id=57& It emid=86" >nuest ros
cursos</ a> ent re los varios disponibles. Cuando haya que ut ilizar un edit or de t ext os recomendamos el uso de uno pot ent e y
sencillo como Not epad++, aunque son válidas ot ras alt ernat ivas como Crimson Edit or.</ p>
<a
href=" ht t p:/ / www.aprenderaprogramar.com/ index.php?opt ion=com_cont ent & view=art icle& id=205& cat id=57:herramient as-
informat icas& It emid=179" >
<img src=" ht t p:/ / i.imgur.com/ afC0L.jpg" alt =" Not epad++" t it le=" Not epad++, un út il edit or de t ext o" >
</ a>
<img src=" ht t p:/ / www.crimsonedit or.com/ images/ logo.jpg" alt =" Crimson" t it le=" Crimson, un edit or de t ext o alt ernat ivo" >
</ div>

<br/ >

<form met hod="get " act ion=" accion.ht ml" >
Si quieres cont act ar con nosot ros envíanos est e formulario relleno: <br / ><br / >
Nombre: <input t ype=" t ext " name=" nombre" / ><br / >
Apellidos: <input t ype=" t ext " name=" apellidos" / ><br / >
Dirección: <input t ype=" t ext " name=" direccion" / ><br / >
Correo elect rónico: <input t ype=" t ext " name=" correo" / ><br / >
M ensaje: <t ext area name=" mensaje" cols=30 rows=2></ t ext area><br / ><br / >
<input t ype=" submit " value=" Enviar" >
<input t ype=" reset " value=" Cancelar" >
</ form>

</ div>

</ div>

<br / > <br / > <br / >

<div>
<img src=" ht t p:/ / lh5.ggpht .com/ _PeVwghrmOec/ TM kzEonRrcI/ AAAAAAAAAHc/ IxL8g0fTYt k/ an_oliva_png.png" alt =" logo
apr" t it le=" Logo aprenderaprogramar.com" >
Copyright 2006-2038 aprenderaprogramar.com
</ div>

</ body>

</ ht ml>
El código ant erior es HTM L y lo usaremos a lo largo del curso para poner diferent es ejemplos, por lo
que lo denominaremos " código base del curso" . Para seguir est e curso debes ser capaz de comprender
t odo el código HTM L que hemos usado, su significado y sint axis. Si no comprendes el código ant erior no
cont inues avanzando, diríget e a la web aprenderaprogramar.com y en la sección cursos busca el “ Curso
básico del programador web: HTM L desde cero” y realízalo. Si no lo haces así no ent enderás o no le
sacarás t odo el part ido posible a est e curso.
Visualiza el document o HTM L en un navegador. Debes obt ener un result ado similar a est e (si t e falla
alguna imagen puedes cambiar las rut as y poner ot ra imagen que t ú desees):
En est e document o t enemos varios element os como et iquet as de t ít ulo h1 y h2, links, list as con
element os dent ro de las list as, imágenes, formularios, bot ones, t ext o, et c. Todo ello nos va a servir para
usar CSS y ver las posibilidades que nos ofrece CSS para dar format o a nuest ras páginas web. En est e
curso nos vamos a cent rar en t rat ar de aprender los aspect os más import ant es de CSS y la lógica de CSS.
El objet ivo será saber hacer un buen diseño de CSS, un buen uso de CSS y comprender lo que hacemos.
Por el cont rario, no vamos a t rat ar de aprender o conocer t odas las propiedades, posibilidades o
inst rucciones de CSS ya que si logramos comprender cómo funciona y su lógica, nos bast ará con realizar
búsquedas en int ernet para encont rar aquella propiedad o sint axis que podamos necesit ar en un
moment o dado. “ Aprende a pescar, no t e conformes con que t e den peces” .

De la estruc
ctura HTM L al modelo
m de caja
as CSS. Block e inline.
ORGANIZ
ZACIÓN CON CEPTUAL HT
TM L
En la ant erior
e ent rega
a del curso vimos
v el cód
digo HTM L co
orrespondien
nt e a una pá
ágina w eb se
encilla que
const aba de cabecera
a con el t ít ul o y mensaje
e breve, men
nú, t ext o con
n algunas im
mágenes, form
mulario de
cont act o y un pie de página
p con in
nformación sobre
s los autt ores o el co pyryght . HTM
M L podemos
s decir que
define un
na organizacción concep
pt ual: cada element o est ement o o, en últ ima
e á dent ro de ot ro ele
inst ancia, dent ro de la
a página w eb
b o documen
nt o HTM L.
La organi zación conccept ual que define HTM

M L para nuest ro ejemplo
o podríamoss verla t al y como se
refleja en el esquema 1.
e la organiza
Dent ro de ación que de
efine HTM L podemos
p señ
ñalar algunass cosas que result an sign
nificat ivas.
plo, en dist i nt as part es del document o HTM L encont ramos t ext o. No o
Por ejemp obst ant e, las
s et iquet as
dent ro de
e las que se encuent ra el
e t ext o inforrman en algunos casos del
d significad
do de dicho t ext o. Por
ejemplo el
e t ext o dentt ro de et iqu et as <h1> … </ h1> sabe orresponde a un t ít ulo p rinicpal. El
emos que co
t ext o den
nt ro de et iqu
uet as <li> … </ li> sabem u element o de una list a. El t ext o
mos que corrresponde a un
e element os <p> … </ p> sabemos qu e correspon de a un párrrafo. Hay oca
dent ro de asiones en qu
ue el t ext o
no aparecce dent ro de
e et iquet as con
c un signiificado explíc
cit o. Por eje
emplo un t exxt o dent ro de
d <div> …
</ div> es simplementt e el t ext o d ent ro de un cont enedorr o espacio dist
d int o de ott ros espacio
os, pero no
t enemos más informa
ación acerca de su comett ido.
Por ot ra part
p e en algunas part es aparece t exxt o suelt o sin
n est ar delim
mit ado por e
et iquet as, po
or ejemplo
dent ro de
el formulario
o aparece t ext
e o, sin est ar
a incluido dent
d ro de ett iquet as esp ecíficas. Sab
bemos que
dicho t extt o forma parrt e del formu
ulario, pero nada
n más.
Ot ra cuesst ión que no

os puede lla nción es qu e si bien la mayoría de
amar la at en e las et iquett as t ienen
element o de apert ura
a y cierre (po
or ejemplo <h1>
< … </ h1>), algunas et
e iquet as se abren y cierrran en un
mismo el ement o, com
mo <br/ >, mient
m ras que
e ot ras se in
ncluyen aparrent ement e como si solo
o t uvieran
apert ura, como es el caso
c de <img
g …>. Todas est
e as part icu
ularidades de
e HTM L debe
emos conoce
erlas.
M ODELO DE CAJAS
Ya hemoss vist o cómo concept ualm

ment e HTM L define una organización os los element os est án
n donde t odo
dent ro de
e un eleme
ent o mat riz (el elementt o body) y a su vez ca
ada elementt o puede t ener
e ot ros
element os
o dent ro de él y así sucessivament e.
d HTM L, l os navegad ores t ienen que realiza

A part ir del ar la int erprret ación del código y most
m rar en
pant alla una
u página w eb. Ahora
a bien, a part ir de un document
d o HTM L habríía dist int as formas
f de
present arr la informa
ación en pan
nt alla. Por ejemplo,
e po drían most rarse
r los succesivos elem
ment os de
izquierda a derecha,, o bien de ajo, o bien de derech a a izquier da… ¿Qué hacen los
e arriba aba
ores? Los na
navegado avegadores act
a úan segú das por t od os (o casi
ún unas regllas predefin idas acept ad
t odos) según la cual cada elemen e considera que est á delimit ado porr un rect áng
nt o HTM L se gulo o caja
invisible. De ahí que se hable de “ modelo de cajas”
c para la
a w eb.
om, 2006-2029
De la estructura HTM L al modelo de cajas CSS. Block e inline.
Esquema 1. Organización concept ual basada en HTM L
Cada caja puede ser o bien t ipo <<block>> que podríamos considerar como “ bloque a lo ancho” o bien
t ipo <<inline>> que podríamos considerar como “ element o dent ro de una línea” . Cada caja se coloca
dent ro de la pant alla de la siguient e manera:
- Una caja debajo de ot ra, si son element os block del document o HTM L del mismo rango o nivel
en la jerarquía. M uchas de las et iquet as HTM L se t rat an por defect o como element os block. Por
ejemplo los element os <div> … </ div> son element os block. Igualment e son element os block
los formularios <form> … </ form> o las list as <ul> … </ ul>.
En el siguient e esquema reflejamos algunos element os block dent ro de nuest ro ejemplo.
Si t e fijas, las cajas que hemos represent ado son las divisiones principales dent ro de “ la caja que lo
engloba t odo” que es la definida por <body> … </ body>.
- Una caja al lado de ot ra, de izquierda a derecha de acuerdo con el orden con que aparezcan en
el document o HTM L, si son element os inline del document o HTM L del mismo rango o nivel en
la jerarquía. Los element os se mant ienen uno al lado de ot ro (except o en el caso de que ya no
haya espacio para ubicarlos, en cuyo caso pasan a la siguient e línea). Algunas de las et iquet as
HTM L se t rat an por defect o como element os inline. Por ejemplo los element os <img> son
element os inline. Gráficament e en nuest ro ejemplo est o se visualiza porque dist int os
element os <img> se colocan uno al lado de ot ro y no uno debajo de ot ro como harían
element os block, como vemos a cont inuación.
- Una caja dent ro de ot ra, siendo la caja int erior la de menor rango o jerarquía. Puede haber
varias cajas dent ro de cada caja, según se defina en el document o HTM L. Por ejemplo dent ro de
la caja div que define la cabecera de nuest ra w eb de ejemplo hay dos cajas, una
correspondient e al t ít ulo principal <h1>… </ h1> y ot ra correspondient e al t ít ulo segundo <h2>
… </ h2>.
El siguient e esquema reflejaría el modelo de cajas del document o HTM L de forma similar a como lo
const ruye un navegador w eb como pueda ser Int ernet Explorer, Google Chrome o M ozilla Firefox,
Safari, et c.
Esquema 2. M odelo de cajas CSS
En est e esquema comprobamos que una página w eb puede t ener gran complejidad en su organización
est ruct ural y en su represent ación con modelo de cajas.
Hemos represent ado las cajas en general delimit adas con una línea cont ínua (que en el navegador se
vuelve invisible) except o aquellos element os de t ext o que no est án delimit ados por et iquet as
específicas, que const it uyen casos especiales que represent amos con línea discont ínua.
Como veremos a lo largo del curso, CSS nos servirá para aplicar est ilos (bordes, fondos, t ipos de let ra,
int erlineado, et c.) a t odas las cajas de un mismo t ipo si lo deseamos, o t ambién a cajas concret as para
las que deseemos t ener un t rat amient o especial.
EJERCICIO
Analiza el siguient e código HTM L y crea dos esquemas. Un esquema de organización ut ilizando llaves
como hemos vist o ant eriorment e, y ot ro esquema que refleje las cajas que int ervienen en el
document o HTM L, siguiendo el ejemplo vist o ant eriorment e.
<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / w w w .w 3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le>
<met a name=" descript ion" cont ent =" Port al w eb aprenderaprogramar.com" >
<met a name=" keyw ords" cont ent =" aprender, programar, cursos, libros" >
<met a charset ="ut f-8" >
</ head>
<body>
<p><a href=" principal.ht ml" t it le=" Página principal" >Ir a la pagina principal</ a></ p>
<h1>Novedades</ h1>
<p>Aquí presentamos las novedades del sit io.</ p>
<h3>Lanzamos el product o X-FASHION</ h3>
<p>Est e producto permit e est irar la piel hast a dejarla como la de un bebé.</ p>
<p><img src=" ht t p:/ / i.imgur.com/ t q5Bs.png" t it le=" Imagen del product o" alt =" imagen product o x-fashion" / ></ p>
<h3>M ejoramos el product o T-M OTION</ h3>
<p>Hemos lanzado una nueva versión del product o T-M OTION</ p>
<p><img src=" ht t p:/ / i.imgur.com/ SpZyc.png" t it le=" Imagen del proudct o t mot ion" alt =" imagen product o t mot ion" / ></ p>
</ body>
</ ht ml>
Para comprobar si t us respuest as son correct as puedes consult ar en los foros

aprenderaprogramar.com.

Formas de aplicar
a estilos CSS:
C por defectto, en línea, sob
breescritura.
ESTILOS POR
P DEFECTO
O
Podemos dar format o a nuest ros document oss HTM L de va

arias manera
as: incluyend
do propiedad
des CSS en
as líneas de HTM L (apli cación de est ilos en lín ea), en la part
las propia p e inicial del document o HTM L
(aplicació n de est iloss int erna) o en un arch
hivo de ext ensión
e .css independien
nt e del arch
hivo HTM L
(aplicació n de est ilos ext
e erna).
Ant es de escribir nu
uest ro prime
er código CS
SS remarqu emos una cuest
c ión imp
port ant e: al crear un
documentt o HTM L est e ya posee un
u est ilo. ¿Cu
uál? El est ilo por defect o que aplican
n los navegad
dores. Est e
est ilo porr defect o sue
ele compren der un t ipo de
d let ra, colo
or negro parra el t ext o y color blanco
o de fondo
para el t ext
e o. El est ilo
o por defect o para los en
nlaces (links) suele ser co
olor azul y su
ubrayado, au
unque est o
puede va
ariar según el
e navegado
or que ut iliccemos. Es im
mport ant e t ener
e est o e
en cuent a po
orque nos
podemos encont rar que ciert os element os se visualice
en de dist in
nt a manera en dos navegadores
diferent ess (por ejem plo Int ernett Explorer y M ozilla Fire
efox) debido
o a que un n
navegador aplique
a un
diferent e est ilo por de
efect o.
a el formularrio en el ejem
Considera mplo que ven
nimos usand
do para el de
esarrollo del curso (códig
go base del
curso). Fíjíjat e en la siguient e ima
agen cómo se visualiza el mismo código
c HTM L en dos navegadores
dist int os sin
s haber ap licado est iloss:
Podemos señalar algu

unas diferenccias:
a) En dor 2 el bot ón “ Enviar” aparece rem

n el navegad marcado con azul y es un poco más
n un borde a
p equeño que en el navega
ador 1.
n el navegad
b) En dor 2 la visua
alización dell t ext area co
orrespondien aje incluye u n scroll en
nt e al mensa
el lat eral dere
echo, que no
o exist e en el navegador 1.
1
c) O ras: por eje
Ot emplo la alt ura
u de la caja
a del t ext area queña en el navegador 2 que en el
a es más peq
n avegador 1.
om, 2006-2029
Formas de aplicar estilos CSS: por defecto, en línea, sobreescritura.
Aquí nos encont ramos con algo a lo que debemos acost umbrarnos como desarrolladores w eb. En
general, no es posible (o quizás sí sea posible, pero llevaría demasiado t iempo y sería demasiado
cost oso) conseguir “ exact ament e” la misma visualización en dist int os navegadores w eb.
M uchas personas pasan horas t rat ando de “ cuadrar” con exact it ud los element os de una página w eb y
muchas veces est e t rabajo, o part e de est e t rabajo, carece de sent ido, ya que al cambiar de navegador
(o de sist ema operat ivo con el mismo navegador) t odo lo que se había cuadrado puede aparecer
descuadrado, o al menos no exact ament e como se pensaba, dando lugar a grandes decepciones.
Nuest ra recomendación es no obsesionarse con pequeños det alles y, cuando se t rat e de desarrollos
import ant es, probar las w ebs en dist int os navegadores y ordenadores. Para est e curso empezaremos
t rabajando con un solo navegador ya que para el aprendizaje nos result a suficient e. Nosot ros usaremos
M ozilla Firefox, pero puedes usar ot ro si lo deseas. Cuando hayamos avanzado iremos explicando
algunos det alles o caract eríst icas específicas de los dist int os navegadores. Cuando t rat es de visualizar
las páginas w eb que const ruiremos durant e el curso t en en cuent a que puedes obt ener visualizaciones
dist int as de aquellas que most ramos nosot ros debido a que t u navegador no int erpret e exact ament e de
la misma manera el código. No t e preocupes ahora por los pequeños det alles, t rat a de aprender los
concept os e ideas que hay en t orno a CSS, más adelant e ya habrá t iempo de definir cómo se debe
manejar la problemát ica del dist int o comport amient o ent re navegadores.
ESTILOS EN LÍNEA
Una de las formas más simples e int uit ivas de dot ar de est ilos al código HTM L es usando el at ribut o
st yle que admit en la mayoría de las et iquet as HTM L.
Supón que sobre el código de ejemplo que est amos ut ilizando en el curso deseamos que el t ext o de los
element os del menú se muest re de color verde y el t ext o de los párrafos de color azul. Para aplicar un
est ilo en línea ut ilizaremos est a sint axis:
<nombreDeEt iquet a st yle = “ propiedadCSS : valorEst ablecido;” > … </ nombreDeEt iquet a>
En nuest ro caso para un párrafo usaríamos <p st yle =” color: blue;” > … </ p>
Para aplicar el color verde a los element os del menú, que est án en una list a, podemos probar a aplicarle
el at ribut o style y la propiedad color a la et iquet a <ul> … </ ul>. El código quedaría como sigue:
<ul style = "color: green;" >

<li><a href=" #" >Inicio</ a></ li>
<li> <a href=" libros.ht ml" >Libros de programación</ a> </ li>
<li> <a href=" cursos.ht ml" >Cursos de programación</ a> </ li>
<li> <a href=" humor.ht ml" >Humor informát ico</ a> </ li>
</ ul>
El result ado obt enido lo vemos a cont inuación:
Podremos comprobar que no hemos obt enido el efect o deseado. Queríamos poner el t ext o de los
element os del menú en color verde y sin embargo cont inúa en color azul. Sí podemos observar, sin
embargo, que las viñet as o iconos circulares que aparecen en el lat eral izquierdo han cambiado de color
negro a color verde. ¿Cómo explicamos est e comport amient o? Tenemos que pensar en el modelo de
cajas para comprender qué es lo que ocurre. El modelo de cajas para los element os del menú sería el
siguient e:
Caja de la lista <ul> … </ul>

Caja del elemento de lista Inicio <li> … </li>
Caja del elemento link <a> … </a>
Caja del elemento de lista Libros <li> … </li>

Caja del elemento de lista Cursos <li> … </li>

Caja del elemento de lista Humor <li> … </li>

En est e esquema t enemos cajas en t res niveles: la caja más ext erior correspondient e a la list a, las cajas
dent ro de la list a correspondient es a cada uno de los element os dent ro de la list a, y las cajas más
int eriores correpondient es a las et iquet as <a> … <a> que definen los link.
El navegador act úa aplicando est ilos desde los niveles más ext eriores hacia los niveles más int eriores,
de forma que el est ilo que se ve cuando exist en varios es el más int erior ent re t odos los posibles est ilos
que afect an a un element o.
En est e caso, t oda la list a se est ablece con color verde, lo cual afect a a las viñet as y al t ext o. En las
et iquet as <li> no exist e est ilo propio que cont radiga el color verde. Sin embargo, los element os link
t ienen un est ilo propio, un est ilo que en est e caso es incorporado por defect o por el navegador, según
el cual est os element os aparecen en color azul y subrayados. Est e es el últ imo est ilo que lee el
navegador y el que aplica a la caja de los element os <a> y est a caja al ser la más int erna es la que se
visualiza, most rándose el t ext o en color azul al est ar dent ro de las et iquet as <a> … </ a>.
Para resolver est e conflict o añadiremos est ilos que modifican el color para los links:
<ul style = "color: green;" >

<li><a href=" #" style = "color: green;”>Inicio</ a></ li>
<li> <a href=" libros.ht ml" style = "color: green;”>Libros de programación</ a> </ li>
<li> <a href=" cursos.ht ml" style = "color: green;” >Cursos de programación</ a> </ li>
<li> <a href=" humor.ht ml" style = "color: green;” >Humor informát ico</ a> </ li>
</ ul>
Ahora sí hemos conseguido el efect o deseado.
Fíjat e en que hemos mant enido el est ilo aplicado a la et iquet a <ul> … </ ul> par que el color de las
viñet as se mant enga en verde. Si no aplicáramos ese est ilo, el est ilo aplicado sería el est ilo por defect o
según el cual las viñet as se most rarían en negro.
Nos plant eamos ahora dejar las viñet as en color rojo y el t ext o del menú en color verde pero sin
subrayado. Para ello t endremos que añadir una propiedad al link que elimine el est ilo subrayado que
por defect o incorpora el navegador. Est a propiedad será t ext -decorat ion cuyos posibles valores son
none (ninguno), underline (subrayado), overline (línea superior), line-t hrough (t achado). El código será
el siguient e:
<ul style="color: red;" >

<li><a href=" #" style="color:green; text-decoration: none;" >Inicio</ a></ li>
<li><a href=" libros.ht ml" style="color:green; text-decoration: none;" >Libros programación</ a> </ li>
<li><a href=" cursos.ht ml" style="color:green; text-decoration: none;" >Cursos programación</ a> </ li>
<li><a href=" humor.ht ml" style = "color:green; text-decoration: none;" >Humor informát ico</ a> </ li>
</ ul>
Y el result ado:
Decimos que hemos sobreescrit o una propiedad CSS, en est e caso la propiedad de subrayado de los
links, reemplazándola por una nueva propiedad.
Hay una cosa que llama la at ención: vemos que el código CSS est á “ ent remezclado” o “ embebido”
dent ro del código HTM L. Por ejemplo en <ul st yle=" color: red;" > vemos que HTM L y CSS est án
ínt imament e relacionados, t ant o que result a difícil dist inguir qué es HTM L y qué es CSS. Est a es una
caract eríst ica a la que debes acost umbrart e, en los desarrollos w eb se ent remezclan dist int os lenguajes
o met alengajes. Podríamos decir que HTM L y CSS son sublenguajes de un supralenguaje: el lenguaje de
los desarrollos w eb.
EJERCICIO
A part ir del siguient e código:
<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01 Transit ional/ / EN" " ht t p:/ / ww w.w3.org/ TR/ ht ml4/ loose.dt d" >
<ht ml>
<head>
<t it le>Port al web - aprenderaprogramar.com</ t it le>
</ head>
<body>
<h1>Novedades</ h1>
</ body>
</ ht ml>
M odifica el código HTM L ant erior para cumplir con est os requisit os mediant e la aplicación de est ilos en
línea:
a) La et iquet a h1 debe most rar su t ext o en color rojo.

b) La et iquet a h3 con el t ext o relat ivo a X-FASHION debe most rar su t ext o en color verde.
c) La et iquet a h3 con el t ext o relat ivo a X-M OTION debe most rar su t ext o en color azul.
d) Todos los párrafos deben most rar su t ext o en color brow n (marrón).


Formas de aplicar
a estilos CSS:
C interno y en
e archivos css.
FORM AS DE APLICAR CSS
Ya hemoss vist o que exist en est i los por defe

ect o que ap lican aut om
mát icament e los navegad
dores w eb
cuando no
n hay est ilo
os especifica
ados, así co
omo que po
odemos emb
beber códig
go CSS en la
as propias
et iquet as de HTM L, “ en línea” . Vamos
V a ver ahora dos fo
ormas adicio
onales de ap
plicar est ilos CSS: en la
part e iniccial del docu
ument o HTM
M L (aplicació
ón de est ilos
s int erna o CSS int erno
o) o en un archivo
a de
ext ensión
n .css independient e del archivo
a HTM
M L (aplicación
n de est ilos ext
e erna o CSS
S ext erno).
Volvemoss a lo que he
emos denom
minado códig
go HTM L ba
ase para el desarrollo
d de
el curso, cód
digo HTM L
donde no se aplican est
e ilos.
grafe ant erio r vimos cóm o aplicábam

En el epíg mos est ilos CS
SS en línea co
on est e ejem
mplo:
<ul style=
="color: red;" >
<li><a hre
ef=" #" style=""color:green; text-decoratiion: none;" >In
nicio</ a></ li>
>
<li><a hre
ef=" libros.ht ml"
m style="colo
or:green; textt-decoration: none;" >Libro
os programaciión</ a> </ li>
<li><a hre
ef=" cursos.ht ml"
m style="co xt-decoration: none;" >Curs
olor:green; tex sos programación</ a> </ li>
>
<li><a hre
ef=" humor.ht ml" style = "c
color:green; te on: none;" >Hu
ext-decoratio umor informátt ico</ a> </ li>
</ ul>
CSS INTER
RNO
Vamos a ver ahora có

ómo podemo
os definir essos est ilos en
n la cabecer a del docum
ment o HTM L usando la
siguient e sint axis:
<head>
…
<style ty
ype="text/ css
s">
elementt oAfect adoPo
orElEst ilo {
propied ad1ParaEseTi poDeElementt os:valor;
…
propied adnParaEseTiipoDeElementt os:valor;
}
</ style>
>
</ head>
>
Las difere
ent es propied en poner en una misma línea o en di st int as líneas según se
dades y valo res se puede
prefiera (ssiempre sep arados mediiant e punt o y coma).
om, 2006-2029
Formas de aplicar estilos CSS: interno y en archivos css.
Dent ro de las et iquet as <head> … </ head> incluiremos una et iquet a de apert ura de declaración de
est ilos <st yle t ype=” t ext / css” >, a cont inuación colocaremos la definición de t ant os est ilos como
deseemos y cerraremos la declaración con </ st yle>. En HTM L 5 no es necesario especificar type
=” text/ css” pero de moment o seguimos recomendando que se use est a sint axis.
En nuest ro código de ejemplo el cambio de los element os del menú para que t engan el t ext o color
verde y el icono o símbolo de viñet a de color rojo se haría de est a forma:
<!—Código ejemplo para el curso -->
<ht ml>
<head>
<style type="text/ css">
ul {color:red;}
a {color:green; text-decoration: none;}
</ style>
</ head>
</ head>


<body>


<div>
<h1>Port al w eb aprenderaprogramar.com</ h1>
<h2>Didáct ica y divulgación de la programación</ h2>
</ div>

<br / >

<div>

<div>
<div>M enú</ div>
<hr/ >
<ul>
</ ul>
</ div>

<!—Aquí el resto del código del ejemplo -->
</ ht ml>
Puedes comprobar que hemos usado las mismas propiedades CSS y los mismos valores que usábamos
en línea.
Visualiza la página en t u navegador. El result ado para el menú será el mismo que cuando aplicamos CSS
en línea:
No obst ant e podrás comprobar que hay ot ros element os de la página w eb que t ambién se ven
afect ados, por ejemplo los links present es en el t ext o. Est o se debe a que hay una diferencia import ant e
ent re aplicar est ilos CSS en línea y aplicarlos como CSS int erno en la cabecera <head> … </ head> del
document o HTM L. Al aplicar est ilos en línea, t enemos que repet ir la aplicación de est ilos en cada una
de las líneas que queramos modificar y en cada ocasión afect amos a únicamente una línea. Con la
aplicación de est ilos int erna nos bast a con declarar una vez el est ilo y el t ipo de element o al que se
aplica, y aut omát icament e se aplicará a todos los element os de ese t ipo exist ent es dent ro de la página
w eb. Est o permit e que en una página w eb de gran ext ensión nos ahorremos t ener que escribir
múlt iples veces la definición de est ilos (una en cada línea), ya que una sola declaración inicial nos
bast ará, lo cual es una vent aja bast ant e evident e.
Sin embargo ahora surge una cuest ión adicional: es posible que t engamos dos o más list as de t ipo <ul>
y en algunos casos, por ejemplo menús, queramos aplicar un est ilo, y en ot ros casos, por ejemplo list as
de element os dent ro de un art ículo periodíst ico, queramos aplicar ot ro est ilo. También es posible que
deseemos que los element os del menú sean links con t ext o verde y sin subrayado, pero queramos
mant ener el rest o de links como t ext o azul con subrayado. Tal y como hemos hecho la definición de
est ilos no conseguimos hacer est o, ya que est amos modificando todas las list as y todos los links
present es en el document o. CSS permit e resolver sat isfact oriament e est a problemát ica para aplicar
est ilos específicament e allí donde queremos. Veremos cómo próximament e.
CSS EXTERNO
Aunque el CSS int erno nos permit e unificar en una declaración t odos los est ilos para un archivo ht ml,
seguimos t eniendo el problema de t ener que repet ir la definición de est ilos en la cabecera de cada uno
de los archivos ht ml de nuest ro desarrollo w eb. Si el desarrollo t iene pocos archivos quizás sea menos
problemát ico, pero cuando el desarrollo t iene cient os o miles de archivos sí se conviert e en un
verdadero problema, ya que cada vez que int rodujéramos cambios habría que hacerlo en los cient os o
miles de archivos de que const ara el desarrollo.
Para solvent ar est a solución se ideó la declaración ext erna de CSS, basada en declarar los est ilos CSS en
un archivo independient e que puede servir como referent e para dot ar de est ilos a decenas, cient os o
miles de archivos ht ml, que únicament e deberán invocar el nombre de archivo ut ilizando una sint axis
específica. De est e modo un cambio en los est ilos habrá que hacerlo únicament e en el archivo de est ilos
correspondient e, lo cual supone una gran vent aja. Incluso un cambio complet o de los est ilos de una
página w eb se puede conseguir simplement e sust it uyendo el archivo correspondient e.
Vamos a generar un archivo de est ilos independient e. Para ello abre Not epad++ (o el edit or de t ext o
que est és usando) y crea un archivo con el siguient e cont enido:
/ * Coment ario en CSS est ilos aprenderaprogramar.com* /
ul {color:red;}
a {color:green; t ext -decorat ion: none;}
Seguimos usando las mismas propiedades CSS y los mismos valores que hemos usado en la forma CSS
en línea y en la forma CSS int erna.
Los cont enidos que se encuent ren ent re los símbolos / * …. * / serán considerados coment arios y se
pueden usar para int roducir información del aut or del archivo, versión, et c. así como para escribir
aquellas aclaraciones sobre los est ilos que se consideren necesarias. Un coment ario puede comprender
una o varias líneas según se desee.
Elige Guardar Como… y guarda el archivo con un nombre y ext ensión css, por ejemplo est ilos.css.
Asegúrat e que la ext ensión del archivo sea css. No es válido si no t iene est a ext ensión.
En nuest ro archivo HTM L eliminaremos la definición de est ilos int erna y dejaremos sólo la invocación al
archivo escrit a con la siguient e sint axis:
<head>
…
<link rel="stylesheet" type="text/ css" href="rutaDelArchivo.css">

</ head>
link es una et iquet a que se usa en HTM L para est ablecer vínculos ent re un document o HTM L y ot ros
recursos como una imagen de icono o una hoja de est ilos CSS. En est e caso se indica con la propiedad
rel (relación o relat ionship) que el document o HTM L debe usar los est ilos definidos como t ext o/ css en
un archivo con el nombre indicado. Ten en cuent a que si como rut a de archivo indicas simplement e el
nombre del archivo, ést e debe encont rarse en la misma carpet a en que se encuent re el document o
HTM L. Si el archivo CSS se encuent ra en ot ra carpet a deberás indicarlo escribiendo una URL complet a u
bien una URL relat iva que det ermine la rut a.
Nosot ros ubicaremos de moment o el archivo CSS en la misma carpet a que el archivo HTM L. En el
archivo HTM L t endremos lo siguient e:
<ht ml>
<head>
<link rel="stylesheet" type="text/ css" href="estilos.css">
</ head>
<!—Aquí el resto del código …. -->

...
Ahora procedemos a visualizar el archivo HTM L en nuest ro navegador. Si se est á cargando la hoja de
est ilos correct ament e deberemos obt ener el mismo result ado que habíamos obt enido con la aplicación
de est ilos int erna. Prueba a hacer dist int os cambios en el archivo css y visualiza los result ados.
¿QUÉ TIPO DE CSS USAR?
En la siguient e t abla hacemos un resumen de las caract eríst icas de los dist int os t ipos de CSS que hemos
vist o hast a el moment o:
DECLARACIÓN
ARCHIVOS AFECTADOS CSS SE APLICA A
CSS
En línea Uno, aquel donde se realiza la declaración Una línea de código
Uno, aquel en cuya cabecera se realiza la Todos los element os del archivo en los que
Interna
declaración result e de aplicación el est ilo
Todos los element os de los archivos

Externa Todos los archivos que invoquen el archivo css afect ados en que result e de aplicación el
est ilo
¿Cuál de est as formas de aplicar CSS es mejor? ¿Cuál usar? En primer lugar cabe hacer una reflexión
sobre qué forma de aplicar CSS hará nuest ros desarrollos w eb más fácilment e mant enibles y apt os para
ser modificados con poco esfuerzo. Parece claro que es la declaración ext erna la que mejor independiza
los est ilos del cont enido y la que menor número de modificaciones implicará en general. Por ello es la
forma de t rabajar con CSS a la que debemos acost umbrarnos.
No obst ant e, cuando t rabajes con desarrollos w eb comprobarás que t ambién son de uso frecuent e la
aplicación de est ilos en línea o int erna. En algunos casos est o es debido a desconocimient o de la
persona que realiza el desarrollo o a la forma de funcionamient o del programa con el que se ha creado
la página w eb, pero en ot ros casos obedece a que se ha querido hacer así.
En ocasiones se opt a por hacer modificaciones en línea porque se buscan efect os punt uales que sólo se
quieren aplicar en un punt o concret o y en ningún ot ro. En ocasiones se opt a por hacer definiciones CSS
int ernas porque se quiere afect ar muy punt ualment e a un archivo y a ningún ot ro. Y en ot ros casos, se
usan los est ilos en línea o int ernos simplement e “ por las prisas” o “ por ser lo más rápido” .
A efect os del navegador, una declaración en línea t iene precedencia sobre una declaración int erna, y a
su vez una declaración int erna t iene precedencia sobre una declaración ext erna. Por t ant o podríamos
t ener CSS sobreescrit o varias veces: la declaración ext erna puede ser sobreescrit a por la int erna, y ést a
a su vez por la en línea. El navegador aplicará el orden:
Declaración en línea > Declaración interna > Declaración externa
Podría ocurrir que los est ilos que visualicemos en el navegador est én definidos “ a t rozos” de modo que
part e de lo que se visualiza se debe a las declaraciones CSS ext ernas, part e a las declaraciones CSS
int ernas y part e a declaraciones en línea. Est o en general será indeseable, ya que hará difícil de
mant ener el desarrollo w eb, no se sabrá con cert eza cómo se generan los est ilos y el desarrollo puede
t erminar convirt iéndose en un caos difícil de mant ener. También puede dar lugar a visualizaciones
incorrect as o erróneas.
A modo de resumen y como recomendación: mant én los est ilos de forma ext erna, lo más
ordenadament e posible y sin ut ilizar redefiniciones int ernas ni en línea. Usa est e t ipo de definiciones
(int erna o en línea) exclusivament e cuando result e necesario y coment a adecuadament e el código.
Trabajar ordenadament e será algo que a la larga t e result ará vent ajoso, t ant o a t i mismo como a ot ras
personas que t engan que t rabajar en desarrollos donde t ú hayas part icipado.
EJERCICIO 1
M odifica el código HTM L most rado a cont inuación para cumplir con est os requisit os mediant e la
aplicación de est ilos int ernos:
a) Todas las et iquet as h1 deben most rar su t ext o en color rojo.

b) Todas las et iquet as h3 deben most rar su t ext o en color verde.
c) Todos los párrafos deben most rar su t ext o en color brow n (marrón).
<ht ml>
<head>
</ head>
<body>
<h1>Novedades</ h1>
</ body>
</ ht ml>

EJERCICIO 2
M odifica el código HTM L del ejercicio ant erior para cumplir con est os requisit os mediant e la aplicación
de CSS ext erno definido en un archivo independient e, donde debes incluir al menos un coment ario:
a) Todas las et iquet as h1 deben most rar su t ext o en color azul.

b) Todas las et iquet as h3 deben most rar su t ext o en color orange (naranja).
c) Todos los párrafos deben most rar su t ext o en color brow n (marrón).


Selectores CSS.
C Id. Aplicarr CSS a una partte de una págin
na w eb.
SELECTOR
RES CSS
Hemos esst udiado cóm

mo aplicar esst ilos CSS a t odas las et i quet as HTM
M L de un t ipo
o, por ejemp
plo a t odos
los párraffos, t odas lass list as, t odo
os los links, et
e c. Pero en numerosas ocasiones
o o queremos que t odas
no
las et ique
et as de un t ipo t engan un
u mismo esst ilo, sino ap
plicar dist intt os est ilos a una et iquett a o a una
part e de una
u página w eb. Para el lo además del
d select or de ave que ya conocemos
d et iquet a o palabra cla
exist en ott ros select or es, ent re loss más usadoss t enemos lo s select ores por id y los sselect ores de
e clase.
es de et iquett a o palabra clave t ipo ett iquet a {prop

mos primero los select ore
Recordem piedad:valorr;}:
a aplicar col or rojo al t ext o de t odas

ul {color:rred;} suponía s las list as de
e t ipo ul del document o HTM L, es
decir, a t odas
o las et iqu
uet as <ul> … </ ul>.
a {color:green; t ext -d ecorat ion: n one;} supon ía aplicar co

olor verde y sin
s subrayad
do a t odos lo
os links del
documentt o HTM L, es decir, a t oda
as las et iquet as <a> … <// a>.
De la mism
ma forma se
e pueden usa
ar como sele
ect or ot ras et iquet as HTM
M L como divv { }, span { }, p { }, et c.
pero supo
oniendo que se apliquen a t odos los element
e os d e ese t ipo.
R POR ID
SELECTOR
Trat aremo
os ahora de
e aplicar est ilos a sólo una
u part e d e una págin
na w eb o do
ocument o HTM L. Est o
implica do
os cosas:
a) En
n el document o HTM L, habrá
h que ide
ent ificar la part
p e del doccument o a la que querem
mos aplicar
essos est ilos in
ncluyendo un
n at ribut o pa
ara la et iquet a que delim
mit a el fragm
ment o de cód
digo donde
q ueremos ap licar est ilos. Por ejemplo
o si queremo
os aplicar est ilos dent ro de un cont enedor
e div
a sint axis serría <div id=” nombreIden
la n t ificat ivoEleg
gido” > … </ div>.
d Si quisiiéramos apli car est ilos
só
ólo a un párrrafo la sint axxis sería <p id
d=” nombreId
dent ificat ivo Elegido” > … </ p>
b) En os t endremo s que declarar los est il os a aplicarr a ese frag

n la declaracción de est ilo gment o de
có
ódigo realiza
ando la decla
aración usand
do est a sint axis.
a
#nombr eIdent ificat ivo

oElegido {
propieda
ad1ParaEseTi poDeElementt os:valor;
propieda
propieda
…
propieda
adnParaEseTi poDeElementt os:valor;
}
edades se p ueden defin

Las propie nir en una so
ola línea si se
e prefiere assí, el único rrequisit o es separarlas
con punt o y coma.
om, 2006-2029
Selectores CSS. Id. Aplicar CSS a una parte de una página w eb.
Con un ejemplo lo veremos más claro. Part imos del código base HTM L que est amos usando para el
curso, en el cual t enemos un menú. Vamos a elegir un nombre para ident ificar ese menú. Podríamos
elegir como nombre <<menu>> (usaremos nombres sin t ildes). Ahora mismo solo t enemos un menú,
pero en el fut uro es posible que exist an ot ros, por eso vamos a preferir elegir como nombre
<<menu1>>. En el document o HTM L vamos a ident ificar el menú con el at ribut o id aplicado al
cont enedor div dent ro del cual est á el menú. El código es est e:
<ht ml>
<head>
<link rel="stylesheet" type="text/ css" href="rutaDelArchivo.css">
</ head>

<body>

<div>
</ div>
<br / >
<div>

<div id="menu1">
<div>M enú</ div>
<hr/ >
<ul>
</ ul>
</ div>

</ ht ml>
Hemos incluido <div id=” menu1” > en el cont enedor div que delimit a nuest ro menú.
En el archivo css ext erno, en nuest ro caso denominado est ilos.css, vamos a definir que ese fragment o
de página w eb (el menú) t enga el t ext o verde y fondo gris. Para ello escribiremos lo siguient e:
/ * Curso CSS est ilos aprenderaprogramar.com* /
#menu1 {
color:green;
background-color: DarkGray;
}
Si lo preferimos podemos escribir la declaración en una sola línea, obt eniendo el mismo result ado. Es
decir, podemos escribir #menu1 {color:green; background-color: DarkGray; }. Est o result a más
compact o y ahorra espacio, pero t ambién puede ser menos claro a la hora de leer. Algunos
programadores o diseñadores prefieren el est ilo compact o y ot ros diferenciando líneas.
El result ado obt enido será similar a est e:
Analicemos ahora el result ado obt enido: se ha aplicado el fondo gris a la caja que define el cont enedor
div. Se ha aplicado color verde al t ext o y a las viñet as de la list a exist ent e en el menú. Sin embargo, los
links del menú mant ienen su color azul y subrayado, a pesar de que hemos indicado que el color verde
debería de aplicarse a t odo el cont enedor. ¿Por qué ocurre est o? CSS no aplica la misma import ancia a
t odas las reglas o est ilos que se especifican. En est e caso la regla o est ilo que hemos definido no supera
en la escala de import ancia CSS a la regla por defect o según la cual los links son de color azul y
subrayado.
Para resolver est e conflict o hemos de especificar que queremos que los element os <a> … </ a> (links)
dent ro del bloque de código con ident ificador menu1 se muest ren aplicando la regla de est ilo definida
para el menú. M odifica el archivo css escribiendo el siguient e código y visualiza la página w eb:
#menu1, #menu1 a {color:green; background-color: DarkGray; }
M ediant e la sint axis #nombreIdent ificat ivoElegido element oAfect adoPorElEst ilo {…} est amos
especificando “ explícit ament e” que deseamos aplicar esa regla de est ilo al element o indicado (en
nuest ro caso los links, <a> … </ a>) dent ro de un bloque de código definido por un ident ificador. De est a
forma el navegador le concede preferencia o mayor import ancia al est ilo definido que al est ilo por
defect o de los links. El result ado en est e caso es que se muest ra el t ext o de los links en color verde
(pero se sigue mant eniendo el subrayado porque no hemos sobreescrit o est a propiedad de los links):
Vamos a especificar ahora que los links del menú no aparezcan subrayados. Para ello modificaremos
nuest ro archivo css dejándolo con est a línea:
#menu1, #menu1 a { color:green; background-color:DarkGray; t ext -decorat ion:none;}
Ahora sí t enemos el menú en color verde y sin subrayado, ya que hemos sobreescrit o la propiedad t ext -
decorat ion que est aba dando lugar a la aparición del subrayado:
Es int eresant e de lo vist o hast a ahora razonar cómo CSS t rabaja con unos órdenes de precedencia o
jerarquía de reglas CSS. No t e preocupes de conocerlos con exact it ud, ya que a lo largo del curso y a
medida que vayas cogiendo experiencia irás aprendiendo más al respect o. También t en en cuent a que
los órdenes de precedencia pueden cambiar según los navegadores o según las versiones CSS. Por t ant o
más que saber con exact it ud los órdenes de precedencia nos int eresa el ser capaces de int erpret ar por
qué ocurren las cosas y la forma de t rabajar de CSS y su filosofía.
APLICAR ESTILOS DIFERENCIADOS DENTRO DE UN SELECTOR ID
El código que hemos vist o ant eriorment e se puede escribir t ambién de est a manera:
#menu1 {color:green; background-color: DarkGray; t ext -decorat ion:none; }
#menu1 a {color:green; background-color: DarkGray; t ext -decorat ion:none; }
El efect o con est e código sería el mismo que con el ant erior. Realment e en est e caso no t endría int erés
escribir la especificación para menu1 {…} y para menu1 a {…} por separado ya que result a más
compact o escribirlo en una línea. Sin embargo sí t iene int erés en el caso de que deseemos aplicar un
est ilo general al menú y sobreescribir o especificar est ilos diferenciados para los element os <a> … </ a>
dent ro del menú.
En nuest ro caso vamos a hacer lo siguient e: est ableceremos como color general para el menú rojo y
como fondo gris. Como fondo para los links (element os a) dent ro del menú no especificaremos
ninguno, el color lo est ableceremos en verde y eliminaremos el subrayado. Escribe est e código y
visualiza el result ado:
#menu1 {color:red; background-color: DarkGray; t ext -decorat ion:underline; }
#menu1 a {color:green; t ext -decorat ion:none; }
En est e caso t enemos como color de los element os del menú rojo, pero los links se muest ran en verde
porque para los element os a el color ha sido sobreescrit o y el navegador elige el est ilo más int erno.
Prueba a est ablecer dist int as propiedades para #menu1 y para #menu1 a. Posiblement e t e encuent res
que en algunos casos los result ados no son t al y como esperas. Ten en cuent a que el navegador t iene
que resolver sobre el orden de import ancia de las reglas, las sobreescrit uras, est ilos por defect o, et c. lo
cual hace que el proceso adquiera ciert a complejidad. En ocasiones se producen conflict os en la
definición de est ilos que el navegador t rat ará de resolver, aunque en algunos casos quizás no pueda
resolver el problema y simplement e ignore los est ilos que ent ran en conflict o. Iremos hablando sobre
est as sit uaciones a medida que vayamos viendo ejemplos.
¿CUÁNDO UTILIZAR SELECTORES POR ID?
El at ribut o id nos permit e darle un nombre específico a una part e de un document o HTM L definida por
una et iquet a HTM L, diferenciándola de las demás. En general est e at ribut o se ut iliza para poner
nombres a dist int as part es de un document o HTM L, por ejemplo menu, art iculo, formulario, foot er, et c.
de modo que cada part e de la w eb est á ident ificada con un nombre único. No es recomendable aplicar
el mismo nombre id a dist int as part es de una w eb, ni siquiera aunque sean del mismo t ipo. Un id debe
ser único, por lo t ant o ese nombre debe aparecer solo una vez en el document o HTM L. Si queremos
aplicar un mismo est ilo en dist int as part es de la w eb ut ilizaremos el at ribut o class, que explicaremos
más adelant e.
No es obligat orio ident ificar t odas las part es de una w eb con ids. Puede haber part es del document o
HTM L con ident ificador y ot ras part es que carezcan de él. Incluso la t ot alidad de la w eb puede carecer
de ident ificadores id.
El uso del símbolo # combinado con el at ribut o id permit e aplicar CSS a part es muy concret as de una
página w eb y se usa sobre t odo cuando se quieren diferenciar part es est ruct urales del document o
HTM L como el menú o el foot er, y en general aplicado a element os <div> … </ div> que act úan como
cont enedores. Aunque se podría aplicar a et iquet as más específicas como <p> est o no es habit ual ya
que supondría est arle poniendo un nombre único a un párrafo y un párrafo en general no t iene t ant a
import ancia dent ro de una w eb como para ponerle un nombre específico. No obst ant e, t en en cuent a
que exist e la posibilidad de usar est e at ribut o sobre cualquier et iquet a HTM L.
EJERCICIO
Analiza el siguient e código HTM L. En él encont rarás t res et iquet as div. Haz lo siguient e:
a) Est ablece at ribut os id para cada una de ellas con valores <<novedades>> para la primera,
<<xFashion>> para la segunda y <<t M ot ion>> para la t ercera.
b) Usando CSS est ablece como color de t ext o el rojo (red) para los element os h1 que se encuent ren
dent ro del element o con id <<novedades>>.
c) Usando CSS est ablece como color de t ext o el verde para los element os h3 que se encuent ren dent ro
de los element os con id <<xFashion>> y <<t M ot ion>>.
d) Usando CSS est ablece como color de fondo para el element o con id <<novedades>> el amarillo
(yellow ).
<ht ml>
<head>
</ head>
<body>
<div>
<h1>Novedades</ h1>
</ div>
<div>
</ div>
<div>
</ div>
</ body>
</ ht ml>


Selectores CSS:
C class. Aplic
car CSS a una parte
p de una pá
ágina w eb.
SELECTOR
RES CSS
mos cómo ap
Ya sabem plicar est ilos CSS a t odas las et iquett as HTM L de
e un t ipo, o bien a una part e del
on un nom bre único (id). Pero muchas
documentt o HTM L co m vece os aplicar u na misma
es querremo
definición e dist int os l ugares de un
n de est ilos en e Para ello además del select or de et iquet a o
na página w eb.
palabra clave que ya conocemos y del select or
o # por id, podemos de
efinir est ilos para aplicarrlos donde
deseemoss mediant e el
e at ribut o cl ass.
R POR CLASS
SELECTOR S
Trat aremo
os ahora de odamos apl icar en dife
e definir est ilos que po erent es luga
ares de una página o
proyect o w eb, allá do nde nosot ro
os deseemos. Para ello ha
aremos dos cosas:
c
a) n el document o HTM L, habrá

En h que ide
ent ificar la part
p e del doccument o a la que querem
mos aplicar
essos est ilos in
ncluyendo un
n at ribut o pa
ara la et iquet a que delim
mit a el fragm
ment o de cód
digo donde
q ueremos ap licar est ilos. Por ejemplo
o si queremo
os aplicar est ilos dent ro de un cont enedor
e div
la
a sint axis se
ería <div cla
ass=” nombre voElegido” > … </ div>. S
eIdent ificat iv Si quisiéram
mos aplicar
esst ilos sólo a un párrafo
o la sint axiss sería <p class=”
c nomb
breIdent ificatt ivoElegido” > … </ p>.
Po
odemos com
mprobar que
e la sint axis es
e casi igual a la emplea
ada con el at ribut o id, pero
p ahora
ussando el t érm
mino class.
b) En
n la declaracción de est ilo
os t endremo s que declarar los est il os a aplicarr a ese frag
gment o de
có
ódigo realiza
ando la decla
aración usand
do est a sint axis.
a
.nombre
eIdent ificat ivo
oElegido {
propieda
propieda
propieda
propieda
propieda
propieda
…
propieda
}
M ient ras que para el id el símbolo

o CSS que se
e empleaba era
e la almoha
adilla ó #, pa
ara los class el símbolo
CSS que empleamos
e e el . (punt o).
es o
Las propie
edades se pu
ueden definiir en una sol a línea o agrrupándolas como
c nosot rros queramo
os, el único
requisit o es separarlas con punt o y coma.
om, 2006-2029
Selectores CSS: class. Aplicar CSS a una parte de una página w eb.
Con un ejemplo lo veremos más claro. Part imos del código base HTM L que est amos usando para el
curso, en el cual t enemos un menú, t res párrafos, dos imágenes y un formulario. Vamos a definir un
est ilo CSS consist ent e en poner fondo naranja, t ext o en negrit a y el t ext o un 100 % del t amaño normal
con el fin de aplicarlo en dos punt os de nuest ra página w eb: al primer párrafo y al t ext o “ Si quieres
cont act ar…” del formulario. A est e est ilo vamos a llamarlo “ dest acado” y lo definimos en nuest ro
archivo css de est a forma:

.dest acado { background-color: orange; font -w eight :bold; font -size:100%; }
Ahora t enemos que aplicar est ilos CSS en las part es del document o HTM L que nos int eresan, el primer
párrrafo:
<p class="destacado" >Aprender a programar es un objet ivo que se plant ea

mucha gent e y que no t odos alcanzan.</ p>
Hemos indicado de est a forma que la caja cont enedora definida por las et iquet as <p> … </ p> del primer
párrafo verá su est ilo afect ado por las reglas CSS que hemos definido.
Pero en el caso del formulario t enemos un problema. El código inicial es est e:
<form met hod=" get " act ion=" accion.ht ml" >
Si quieres cont act ar con nosot ros envíanos est e formulario relleno: <br / ><br / >
Nombre: <input t ype=" t ext " name=" nombre" / ><br / >
M ensaje: <t ext area name=" mensaje" cols=30 row s=2></ t ext area><br / ><br / >
</ form>
Y el t ext o al que queremos aplicar el est ilo dest acado es “ Si quieres cont act ar con nosot ros…” . ¿Cuál es
el problema? Que dicho t ext o no t iene una caja específica, sino que es un t ext o “ suelt o” dent ro de ot ra
caja, en est e caso la caja inmediat a que lo enmarca es la caja del formulario. Podemos verlo en est e
esquema:
Si queremos aplicar est ilos t enemos que hacerlo sobre et iquet as delimit adoras (una caja) y ahora
mismo solo disponemos de <form> … </ form>. Si escribimos <form class=" dest acado" met hod=" get "
act ion=" accion.ht ml" > el result ado sería est e:
Obviament e el est ilo se aplica a t oda la caja del formulario, y no sólo al t ext o que nosot ros deseamos.
¿Qué solución podemos darle? Hemos de crear una caja específica para el t ext o ya que es sólo al t ext o
a quien queremos aplicarle el est ilo “ dest acado” . Est o podemos hacerlo de varias maneras: con un
párrafo <p> … </ p>, con un cont enedor <div> … </ div> o con un divisor <span> … </ span>. Las
diferencias ent re las opciones son que el párrafo es un element o de t ipo block que lleva asociados un
est ilo predet erminado por el navegador. div es un element o que crea una división o caja y es de tipo
block, t ambién ocupará la página w eb a t odo lo ancho. div en principio no lleva est ilos predet erminados
asociados. Por últ imo span es un element o que crea una división inline , por t ant o no abarca t odo el
ancho de la página sino el espacio ocupado por aquello que cont iene (en est e caso el espacio ocupado
por el t ext o) y t ampoco t iene est ilos predet erminados asociados. Fíjat e en la diferencia ent re aplicar un
est ilo a un element o block o a un element o inline.
Elegiremos aquel element o divisor que nos parezca más adecuado en función de los crit erios de diseño.
En nuest ro caso vamos a opt ar por un divisor <p> … </ p>
El código del formulario en el document o HTM L nos queda así:
<form met hod=" get " act ion=" accion.ht ml" >
<p class="destacado" >Si quieres cont act ar con nosot ros envíanos est e formulario relleno:</ p> <br / ><br
/ >Nombre: <input t ype=" t ext " name=" nombre" / ><br / >
M ensaje: <t ext area name=" mensaje" cols=30 row s=2></ t ext area><br / ><br / >
</ form>
Ejecut a el código. La visualización obt enida debe ser la t ipo block que hemos indicado ant eriorment e.
EJERCICIO
a) Est ablece at ribut os class para cada una de ellas con valores <<principal>> para la primera, y
<<secundario>> para la segunda y la t ercera.
b) Usando CSS est ablece como color de t ext o el rojo (red) y t amaño de fuent e el 150% respect o de lo
normal para los element os cuyo valor class sea <<principal>>.
c) Usando CSS est ablece como color de t ext o el verde para los element os y t amaño de fuent e el 110%
respect o de lo normal para los element os cuyo valor class sea <<secundario>>.
d) Usando CSS est ablece como color de fondo para los párrafos dent ro de element os cuyo at ribut o class
sea <<secundario>> el amarillo (yellow ).
<ht ml>
<head>
</ head>
<body>
<div>
<h1>Novedades</ h1>
</ div>
<div>
</ div>
<div>
</ div>
</ body>
</ ht ml>


Herencia CS
SS: concepto. Palabra
P clave in
nherit.
HERENCIA
A EN CSS
Hemos vi st o cómo ap
plicar est iloss CSS a t oda
as las et ique
et as HTM L d e un t ipo, o bien a una part e del
documentt o HTM L co n un nombrre único (id),, o bien en dist
d int as parrt es de un d
document o o proyect o
w eb usan
ndo class. Un
na caract erísst ica int eresa
ant e de CSS es cómo no
os permit e d efinir est ilos
s en clases
superiore
es o clases pa
adre que se van
v t ransmit iendo hacia las subclasess o clases hij as.
DEFINIR CLASES
C QUE SOLO SEAN APLICABLES
S A ETIQUETA
AS ESPECÍFIC
CAS
Part imos del código q ue hemos utt iliado en la ant erior ent rega del cursso. En concre
et o habíamo
os definido
ombre era “ dest
una clase CSS cuyo no d acado” y cuyo código
o era:
/ * Curso CSS est ilos ap

prenderaprogramar.com* /
.dest acad
do { backgrou nd-color: oran
nge; font -w eig
ght :bold; fontt -size:100%; }
Podemos definir que una clase so

olo sea aplica
able a una ett iquet a espe
ecífica. Por ejjemplo si mo
odificamos
el código que define l a clase dest acado
a y escriibimos:
/ * Cu
urso CSS est ilo
os aprenderap
programar.com
m* /
p.desst acado{ backg
ground-color:: orange; font -w eight :bold; font -size:100
0%; }
Ahora el est
e ilo dest accado sólo su rt e efect o cu
uando va en una et iquett a p, en cam bio en ot ras
s et iquet as
como div,, span, a, et c.
c no t endría efect o.
Est o nos permit iría ussar el mismo e clase y obtt ener dist intt os efect os ssegún en qu é et iquet a
o nombre de
mos la clase. Por
aplicáram P ejemplo::
/ * Currso CSS est iloss aprenderaprrogramar.com

m* /
p.destt acado { backg
ground-color: orange; font -w
- eight :bold; font -size:100
0%; }
div.de
est acado {backkground-colorr: blue; font -w
w eight :bold; fo
ont -size:100%
%; }
Ahora si definimos
d un
n párrafo con
n el at ribut o class = “ destt acado” su fo
ondo será na
aranja. En ca
ambio si es
un diviso r div con el
e at ribut o class
c = “ dest acado” su fondo será azul. Prueb
ba a ejecut ar
a código
comproba
ando est as d iferencias.
DEFINIR SUBESTILOS
S DENTRO DE UNA CLASE
Podemos definir que

e det erminad
das cajas de
ent ro de ot ra
r principal t engan est i los diferenciados. Por
ejemplo, podemos qu
uerer que lo
os párrafos de clase “ de
est acado” t engan
e fondo
o naranja, pe
ero que si
om, 2006-2029
Herencia CSS: concepto. Palabra clave inherit.
dent ro del párrafo hay un link (et iquet as <a> … </ a>) dicho link t enga un est ilo específico, por ejemplo
que t enga fondo amarillo y un t amaño un 20% superior a lo normal. Para ello escribiríamos:

p.dest acado{
background-color: orange;
font -w eight :bold;
font -size:100%; }
p.dest acado a { background-color: yellow ;
font -size:120%;
}
Con la declaración p.dest acado a { … } est amos indicando que los links dent ro de párrafos con est ilo
dest acado est arán en negrit a (por herencia del est ilo general aplicable a la clase dest acado) y t endrán
fondo amarillo y t amaño de let ra un 20% superior a lo normal (ya que hemos sobreescrit o las
propiedades de color de fondo y t amaño de let ra de la clase padre).
Si quisiéramos definir un est ilo dest acado para los párrafos, ot ro para los div, pero el mismo subest ilo
para los links que est én t ant o dent ro de párrafos como dent ro de divs escribiríamos lo siguient e:

p.dest acado{ background-color: orange; font -w eight :bold; font -size:100%; }
div.dest acado { background-color: blue; font -w eight :bold; font -size:100%; }
p.dest acado a, div.dest acado a { background-color: yellow ; font -size:120%; }
Con la declaración p.dest acado a, div.dest acado a { … } aplicamos el mismo est ilo a los link dent ro de
párrafos o div que lleven el at ribut o class = “ dest acado” .
Se observa una cosa: podemos definir est ilos agrupando el código de dist int as maneras. Podemos
repet ir código pero t ambién podemos crear clases padre que agrupen las caract eríst icas comunes y
definir en clases hijo las caract eríst icas específicas. Veamos el siguient e código:

.dest acado {font -w eight :bold; font -size:100%;}
p.dest acado {background-color: orange;}
div.dest acado { background-color: blue; }
p.dest acado a, div.dest acado a {background-color: yellow ; font -size:120%; font -w eight :light er; }
Est e código define: una clase padre o superclase <<dest acado>> según la cual la let ra será negrit a y el
t amaño de let ra normal (100 %). Las clases hijas <<p.dest acado>> y <<div.dest acado>> aport an las
caract eríst icas de la clase padre (por herencia) más algunas ot ras caract eríst icas adicionales (añadidas)
o dist int as (sobreescrit ura de propiedades de la clase padre), y las clases hijas de las hijas
<<p.dest acado a>> y <<div.dest acado a>> t ienen las caract eríst icas de la clase padre y de la clase abuela
con algunas caract eríst icas adicionales o dist int as.
Observamos aquí una propiedad import ant e de CSS: la herencia o t ransmisión de caract eríst icas de
clases ant ecesoras a clases sucesoras o de clases padre a clases hija.
CONCEPTO DE HERENCIA CSS
La herencia CSS permit e evit ar la repet ición de código en t odas las subclases que derivan a part ir de una
clase superior. La herencia se aplica t ant o a est ilos de et iquet as HTM L (por ejemplo t odas las et iquet as
son subet iquet as de la et iquet a padre body, de modo que un est ilo aplicado a body será heredable por
el rest o de et iquet as HTM L) como a select ores id o class.
Est o nos da alguna pist a sobre práct icas CSS que son habit uales ent re programadores o diseñadores CSS
experiment ados: si aplicamos algunos est ilos básicos como un t ipo de let ra (propiedad CSS font -family)
a la et iquet a body y t odas las ot ras et iquet as son herederas del est ilo de body, habremos conseguido
definir el t ipo de let ra en t oda la página w eb en una simple línea, sin necesidad de t ener que est ar
repit iendo el est ilo en múlt iples ocasiones para párrafos, div, span, forms, et c.
Ejemplo de declaración de est e t ipo:
body {font -family: Arial, sans-serif; }
En un document o HTM L t odo t iene ascendient e except o el element o ht ml. Así body hereda de ht ml, div
hereda de body y <<div a>> (link dent ro de un cont enedor div) hereda de div. En nuest ro caso el est ilo
<< p.dest acado a>> hereda de <<p.dest acado>> y <<p.dest acado>> hereda de <<dest acado>>.
Sin embargo no t odas las propiedades se heredan. Por ejemplo la propiedad font -family es heredable,
pero los márgenes (propiedad margin) no se heredan except o si se indica explícit ament e que deben
heredarse. ¿Por qué unas propiedades se heredan y ot ras no? Los creadores de CSS pensaron que sería
út il que algunas propiedades se heredaran porque suelen mant enerse const ant es dent ro de una caja.
Por ejemplo lo más normal es usar un t ipo de let ra en un cont enedor y no mezclar dist int os t ipos de
let ra. En cambio, ot ras propiedades era poco lógico que se heredaran, como los márgenes, ya que por
ejemplo las fot ografías dent ro de un art ículo normalment e t enían un margen dist int o al que t enía el
propio art ículo respect o a su cont enedor o los párrafos. Nos encont ramos así con que la herencia de
propiedades se rige en ciert a manera por el “ sent ido común” . No obst ant e, en la especificación oficial
de CSS encont raremos que cuando se define una propiedad se est ablece un at ribut o denominado
“ inherit ” que puede est ar est ablecido en “ yes” o en “ no” según la propiedad de que se t rat e. Así font -
family es una propiedad cuyo valor inherit es “ yes” : est a propiedad se hereda. En cambio la propiedad
margin t iene un valor inherit “ no” , lo cual significa que no se hereda. M ás adelant e abordaremos las
propiedades CSS, explicaremos cómo consult ar la document ación oficial CSS y est udiaremos est a
circunst ancia con más det alle.
Hay algunas curiosidades en t orno a la herencia. Por ejemplo no t odos los navegadores responden
exact ament e igual en cuant o a la herencia. Podrías encont rart e algún navegador donde no se genera
herencia de una propiedad mient ras que en ot ro sí.
Ot ra curiosidad es algo que hemos coment ado: hemos dicho que la propiedad background-color se
t ransmit e por herencia. Sin embargo la definición del est ándar CSS dice que background-color t iene un
valor inherit “ no” . ¿Cómo se explica est o? Lo veremos más adelant e cuando hablemos de las
propiedades CSS, pero bast e decir que el color de fondo por defect o para t odos los element os es el
t ransparent e. Al t ener el padre un color y superponer el hijo t ransparent e el efect o visual es que se
hereda el color del padre, aunque formalment e no es así.
FORZAR LA HERENCIA CON INHERIT
Hay una manera explícit a para indicar que la propiedad que se debe aplicar es la heredada del est ilo
padre. Considera el código con que venimos t rabajando en el que t enemos un menú. Supón que el
menú lo hemos ident ificado con <div id=" menu1" >:
<ht ml>
<head>
<link rel=" st ylesheet " t ype=" t ext/ css" href=" est ilos.css" >
</ head>
</ head>
<body>
<div>
</ div>
<br / >
<div>

<div id=" menu1" >
<div>M enú</ div>
<hr/ >
<ul>
</ ul>
</ div>

</ ht ml>
Escribe est a definición en el archivo est ilos.css y visualiza el result ado:

body {font -family: Arial, sans-serif;}
#menu1{ color: red; t ext -decorat ion:none;}
Se obt iene algo similar a est o:
Vemos que el color rojo no est á siendo aplicado por la et iquet a a (link) dent ro del element o con id
menu1, y est o a pesar de que la propiedad color es heredable (su valor inherit = yes). La propiedad t ext -
decorat ion t ampoco est á siendo aplicada. En est e caso t ext -decorat ion no es heredable (inherit = no).
En realidad que sea heredable o no no est á t eniendo efect o aquí ya que las propiedades por defect o del
element o <<a>> sobreescriben a las propiedades que hubiéramos definido en nuest ro est ilo menu1. Ya
sabemos que podemos sobreescribir la propiedad de color y no subrayado del element o <<a>> dent ro
de menu1 por ejemplo escribiendo est e código (ejemplo A):

#menu1 a { color: red; t ext -decorat ion:none;}
Que más sint ét icament e podemos escribir así (ejemplo B):

#menu1, #menu1 a { color: red; t ext -decorat ion:none;}
Conociendo la palabra clave inherit t ambién podríamos obt ener el mismo efect o así (ejemplo C):

#menu1 a { color: inherit ; t ext -decorat ion:inherit ; }
En est e caso hemos indicado que los links dent ro de menu1, los hijos <<menu1 a>>, deben t ener un
color y un t ext -decorat ion t al como se haya definido en el padre, <<menu1>>.
El result ado con (A), (B) o (C) será algo similar a est o:
El uso de inherit puede t ener algunas desvent ajas:
a) Algunos navegadores (en especial más ant iguos) puede que no reconozcan la palabra clave
inherit , con lo cual seguirían most rando los links dent ro del menú en color azul y subrayados.
b) Puede hacer el código menos claro o menos fácil de ent ender, en especial si t enemos que
recorrer varios niveles de herencia hast a comprobar desde dónde viene una propiedad. En est e
caso la sobreescrit ura puede result ar más clara.
c) Podemos caer en la t ent ación, como se ha hecho en el ejemplo ant erior, de aplicar inherit a una
propiedad que en CSS t iene valor inherit = no. Es decir, aplicar herencia CSS a una propiedad
que de acuerdo con la document ación oficial CSS no t iene herencia. Est o puede generar
confusiones y hacer el código difícil de comprender y mant ener. Sobreescribiendo la propiedad
no habría lugar a dudas.
Por ello en general no usaremos la invocación de est ilos de element os padre con inherit except o en
circunst ancias excepcionales. Est o no quit a que debamos conocer su significado pues podemos
enfrent arnos a t ener que analizar o modificar hojas de est ilo que hayan sido generadas por ot ras
personas.
RESUM EN
Las clases CSS pueden ser aplicadas a et iquet as específicas (por ejemplo que la clase solo sea aplicable a
<p> … </ p>) o a et iquet as de cualquier t ipo, según hagamos la definición de reglas CSS.
También pueden definirse los est ilos de modo que un mismo nombre de clase dé lugar a la aplicación
de dist int as reglas en función de en qué et iquet a se aplique, por ejemplo que una clase dé lugar a un
fondo naranja si se aplica en una et iquet a <p> y a un fondo azul si se aplica en una et iquet a <div>.
Las et iquet as HTM L o est ilos CSS definidos present an herencia de est ilos para aquellas propiedades
que t ienen un valor inherit “ yes” . La herencia puede no producirse si exist e sobreescrit ura del est ilo por
part e de algún element o, o si una propiedad t iene valor inherit no.
Puede forzarse la herencia desde un element o padre escribiendo en el código CSS del element o hijo
nombreDeLaPropiedad: inherit , aunque en general será preferible sobreescribir la propiedad en lugar
de indicar herencia con inherit por ser más claro.
EJERCICIO
a) Est ablece at ribut os class para cada una de ellas con valores <<principal>> para la primera, y
<<secundario>> para la segunda y la t ercera.
b) Usando CSS est ablece como color de t ext o el rojo (red) y t amaño de fuent e el 130% respect o de lo
normal para los element os h1 que se encuent ren dent ro de un element o cuyo valor class sea
<<principal>>.
c) Usando CSS est ablece como color de t ext o el verde y t amaño de fuent e el 110% respect o de lo
normal para los element os h3 que se encuent ren dent ro de un element o cuyo valor class sea
<<secundario>>.
d) Usando CSS est ablece como color de fondo el amarillo (yellow ) para los element os span que se
encuent ren dent ro de element os h3 que se encuent ren dent ro de element os cuyo at ribut o class sea
<<secundario>>.
e) Est ablece como t ipo de fuent e para t odo el document o HTM L el t ipo Arial.
<ht ml>
<head>
</ head>
<body>
<div>
<h1>Novedades</ h1>
</ div>
<div>
<h3>Lanzamos el product o <span>X-FASHION</ span></ h3>
</ div>
<div>
<p>Hemos lanzado una nueva versión del product o <span>T-M OTION</ span></ p>
</ div>
</ body>
</ ht ml>


Referenciarr CSS con cualquier atributo HTM
H L.
REFERENC
CIAR CON CU
UALQUIER ATRIBUTO
A
Sabemos que podemo

os aplicar esst ilos CSS a part
p ir de una
a et iquet a HT
TM L (referen
nciar por t ag
g), o bien a
part ir de una part e de
el documentt o HTM L con
n un nombre
e único (refe
erenciar por id), o bien a part ir del
at ribut o class
c (referen
nciar por cla
ase). A part irr de CSS3 se int rodujo la
a posibilidad
d de referenc
ciar est ilos
mediant e cualquier att ribut o de el ement os HT
TM L.
Los at ribu
ut os son parámet ros associados a una
u et iquet a HTM L y qu
ue t ienen u n valor con cret o. Por
ejemplo en
e <div classs=” dest acad o” > … </ di v> el at ributt o class del cont enedorr div t iene como valor
“ dest acad
do” . Pero enccont ramos muchos
m ot ross at ribut os en el código HTM
H L. Algun os ejemplos son:
Ejemp
plo código Etique
eta Atribu
uto V
Valor del atriibuto
<a href=" lib

bros.ht ml" >Libro
os de programa
ación</ a> <a> … <// a> hreff libros.ht ml
m
<img src=" ht
h t p:/ / i.imgur.ccom/ afC0L.jpg" alt =" Not epad+
++" <img …> src ht t p:// / i.imgur.com / afC0L.jpg
t it le=" Not ep
pad++, un út il edit
e or de t ext o"" >
<img src=" ht
++" <img …> alt Not epad+
++
t it le=" Not ep
e or de t ext o"" >
<img src=" ht
++" <img …> t it le
e Not ep
pad++, un út ill edit or de
t it le=" Not ep
e or de t ext o"" > t ext o
<input t ype=" t ext " name=" nombre" / > <input …> t ype
e t ext
<input t ype=" t ext " name=" nombre" / > <input …> nam e nombre
<input t ype=" submit " valu e=" Enviar" > <input …> t ype
e submit
Con CSS podemos

p apl icar est ilos a t odos los element os de
e un t ipo que
e cumplan t e
ener ciert o at ribut o. La
sint axis a emplear es:
Nombre
eElement oHTM
M L[ selectorDe
eAtributo] {
propieda
propieda
…
propieda
}
om, 2006-2029
Referenciar CSS con cualquier atributo HTM L.
Como select or de at ribut o t enemos dist int as posibilidades. A cont inuación señalamos algunas:
Selector de atributo Ejemplo CSS Observaciones
input [name] { background-color: red;} Selecciona t odos los element os que t ienen el
at ribut o nombreAt ribut o, independient ement e
p[t it le] {background-color: yellow ;}
[nombreAt ribut o] de su valor. En el ejemplo, t odos los input s que
Not a: no puede haber espacio ent re el lleven name t endrán fondo rojo y t odos los
nombre de element o y el corchet e. párrafos que lleven t it le t endrán fondo amarillo.
Selecciona t odos los element os cuyo

nombreAt ribut o es valor. En el ejemplo, se pone
input [name=" correo" ]{background- fondo amarillo y t amaño de let ra 75% a t odos los
[nombreAt ribut o = " valor" ]
color: yellow ; font -size:75%;} element os input con at ribut o nombre =
“ correo” . Si el input no t iene nombre ó este no
es “ correo” , no se aplica.

a[href^ =" ht t p:/ / w w w .aprender" ] nombreAt ribut o comienza por valor. En el
[nombreAt ribut o^ =" valor" ] {background-color: yellow ; font - ejemplo, se pone fondo amarillo y t amaño de
size:75%;} let ra 75 % a t odos los links cuyo at ribut o href
comienza por ht t p:/ / w w w .aprender

a[href* =" aprenderaprogramar" ] nombreAt ribut o cont iene a valor. En el ejemplo,
[nombreAt ribut o* =" valor" ] {background-color: pink; font - se pone fondo rosado y t amaño de let ra 125 % a
size:125%;} t odos los links cuyo at ribut o href cont iene
aprenderaprogramar.

a[href$=" .com" ], a[href$=" 6" ] nombreAt ribut o t ermina en valor. En el ejemplo,
[nombreAt ribut o$=" valor" ] {background-color: pink; font - se pone fondo rosado y t amaño de let ra 125 % a
size:125%;} t odos los links cuyo at ribut o href t ermina en
.com ó en 6.
Los select ores ^ , * y $ t ienen aquí un uso similar al que se da en ot ros lenguajes para crear lo que se
denomina expresiones regulares: expresiones que siguen un det erminado pat rón (como empezar por…,
t erminar por…, cont ener…, et c.).
Escribe código CSS ut ilizando est os select ores y pruébalos sobre el document o HTM L base que est amos
usando para el curso. Recuerda no dejar espacios ent re el nombre de element o y los corchet es, es
decir, a[href$=" 6" ] es correct o pero a [ href$=" 6" ] no es correct o por cont ener espacios.
EJERCICIO
Crea una regla de est ilos para aplicar la propiedad font -family: Arial a t oda la página w eb. Crea ot ra
regla que afect e a t odas las et iquet as de imagen (<img …>) que t engan at ribut o “ t it le” y aplícales las
siguient es propiedades CSS: border-st yle:solid, border-w idt h: 5px y border-color: Light Salmon. Aplica
est a regla al código HTM L base que est amos usando para el curso a t ravés del archivo est ilos.css con el
que est amos aplicando est ilos a est e document o HTM L y visualiza los result ados.
Referenciar CSS con cualquier atributo HTM L.
SOLUCIÓN
El código a incluir en el archivo est ilos.css sería el siguient e:

body {font -family: Arial;}
/ * Aplicamos un borde especial a las imágenes que t ienen at ribut o t it le* /
img[t it le]{border-st yle:solid; border-w idt h: 5px; border-color: Light Salmon;}
Not a: si t u navegador no reconoce Light Salmon escribe #FFA07A en lugar de Light Salmon. Es decir,
escribiríamos border-color: #FFA07A;
El result ado al visualizar el document o HTM L en el navegador debe ser similar a est e, donde vemos las
imágenes que t ienen at ribut o t it le con un borde color salmón:
SELECTORES BÁSICOS FRENTE A ESPECIALES
La mayoría de las páginas w eb se pueden t rabajar con los select ores básicos basados en et iquet as
HTM L, at ribut os id y class. En general ot ros select ores t ienen menor uso, en part e porque pueden
complicar la dificult ad de comprensión de una hoja de est ilos. Rest ringiremos por t ant o su uso a casos
en que sea especialment e necesario y coment aremos adecuadament e el código CSS cuando los
ut ilicemos.

Selectores avanzados
a CSS.. Pseudoclases..
SELECTOR
RES AVANZA
ADOS CSS
Además de
d los selectt ores básico
os (por et iqu
uet a, por id o por classs) y de los sselect ores b asados en
at ribut os HTM L, disp
ponemos de ormas más de est ablecer crit erios de selecció
e algunas fo ón para la
n de est ilos CSS:
aplicación C select ore
es especialess y pseudocl ases CSS.
an los símbol os >, + y ~ pa

Hay selectt ores especi ales que usa ara especificcar la relación
n ent re elem
ment os.
Como sele
ect or de at ri but o t enemo
os dist int as posibilidades
p s. A cont inua
ación señalam
mos algunas:
S
Selector Ejemplo CSS
C Observa
aciones
Selecciona t odos
o los elemen
nt os de t ipo elemHijo que
div > ul
u { background -color: red;} est án cont enidos
e en un element o elemPadre
direct ament e (sin que existt an ot ros elem
ment os ent re
div > p.dest acado {b
background-
ambos). En el
e ejemplo, t o dos las list as t ipo ul que
elemPadre > elemHijo color: pink;}
est én dent ro de un div t end
drán fondo roj o, t odos los
mg[src$=" .png"" ]
div > im a clase sea desst acado y est én
párrafos cuya n dentro de
{backg
ground-color: blue;
b } un div t endrá
án fondo rosa y t odas las im
mágenes t ipo
png dent ro de
e un div t endrán fondo azul .
Selecciona t o dos los elemen

nt os de t ipo ele
emSiguient e
que est én exxact ament e desspués de un elemAnt erior
(sin ot ros el ement os ent re
e ellos) y que
e t engan al
elemAnt eri or + elemSiguie
ent e p.destt acado + p { colo
or: green;} ento padre qu
mismo eleme ue ést e. En el
e ejermplo,
aquellos párrrafos que est é
én just o despu
ués de ot ro
párrafo cuya clase sea dest acado t endrán el t ext o de
color verde.
Selecciona t odos los element os de t ipo

uacion que ap
elemAcont inu parezcan desp
pués de un
elemAnt erior (pudiendo exisst ir element os int ermedios
elemAnt eri or ~ elemPost erior
e p.destt acado ~ p{ colo
or: green;} ent re ellos) y que t engan a
al mismo elem
ment o padre
que ést e. En el ejemplo, aq
quellos párrafo s que est én
después de u n párrafo cuya clase sea dest acado y que
t engan el mismo cont enedo r t endrán colorr verde.
Es importt ant e t ener en cuent a que

q las regla
as que usan > solo se aplican cuand
do exist e un
na relación
direct a pa
adre – hijo ó cont enedo
or – cont enid
do sin que exist
e an cajass int ermedias ent re los element
e os
indicados. Por ejempl o div ul se ap
plica a una li st a incluso si
s el element o ul est á den
nt ro de un diivisor span
int ermediio ent re la lisst a y el div. En
E cambio di v > ul no se aplica
a a una list a si est á d
dent ro de un
n span. Las
reglas + sólo
s se aplica
an ent re “ he
ermanos” (element os co
on un mismo
o padre, por ejemplo do
os párrafos
dent ro de
e un div seríían hermano
os cuyo pad re es el div)) al hermano
o just o desp
pués del ind icado. Por
as reglas ~ se aplican ent re herm
últ imo la manos a t o dos los herrmanos que
e se encuen
nt ren con
post erioriidad al indica
ado incluso aunque
a est én separados por elementt os int ermed
dios.
om, 2006-2029
Selectores avanzados CSS. Pseudoclases.
PSEUDOCLASES CSS
Exist en algunos element os especiales que se pueden seleccionar con lo que en CSS se denominan
pseudoclases, que son ident ificadores especiales que van precedidos por dos punt os. Ent re las
pseudoclases disponibles t enemos las siguient es:
Pseudoclase Ejemplo CSS Observaciones
Selecciona el primer element o dent ro de una serie de

element os del t ipo t ipoElem. En el ejemplo, allí donde
t ipoElem:first -child li:first -child {font -size: 200%;}
haya una serie de element os li, el primero de ellos
t endrá el doble de t amaño de fuent e normal.
Selecciona el últ imo element o dent ro de una serie de

element os del t ipo t ipoElem. En el ejemplo, allí donde
t ipoElem:last -child li:last -child {font -size: 200%;}
haya una serie de element os li, el últ imo de ellos
t endrá el doble de t amaño de fuent e normal.
Selecciona un element o si es hijo único, es decir, si es

el único element o dent ro del cont enedor t ipoElem. En
div.dest acado img:only-
el ejemplo se seleccionan las imágenes que est én
t ipoElem:only-child child{border-st yle:solid; border-
dent ro de cont enedores div cuya clase sea dest acado y
w idt h:10px;}
dent ro de los cuales exist a únicament e una imagen y
le aplica un borde de anchura 10 píxeles.
Selecciona el element o número number dent ro de una

serie de element os de t ipo t ipoElem. No puede haber
li:nt h-child(3) {font -size: 200%;} element os int ermedios de ot ro t ipo en la serie. En el
t ipoElem:nt h-child(number) p.dest acado:nt h-child(2) {font - ejemplo, el t ercer element o de una serie de li tendría
size: 50%;} el doble del t amaño normal de fuent e y el segundo
element o dent ro de una serie de párrafos con clase
dest acado t endría el 50 % del t amaño normal.
Selecciona t odos los element os de t ipo Elem1 que no

p:not (.dest acado) {color:
Elem1:not (t ipoElem2) sean de t ipo t ipoElem2. En el ejemplo, se seleccionan
yellow ;}
t odos los párrafos cuya clase no sea dest acado.
t ipoElem::first -let t er p::first -let t er {font -size: 300%;} Selecciona la primera let ra de t ipoElem
t ipoElem::first -line p::first -line {color:red} Selecciona la primera línea de t ipoElem
Posiciona al final del element o t ipoElem permit iendo

h1::aft er {cont ent :" * * * " ;
t ipoElem::aft er añadir cont enido usando cont ent :” cont enidoDeseado”
background-color: yellow ;}
con las propiedades que se indiquen.
Posiciona al principio del element o t ipoElem

h1::before {cont ent :" ---" ; color: permit iendo añadir cont enido usando
t ipoElem::before
blue;} cont ent :” cont enidoDeseado” con las propiedades que
se indiquen.
Escribe código CSS ut ilizando est os select ores y pruébalos sobre el document o HTM L base que est amos
usando para el curso.
No deben exist ir espacios al escribir est as declaraciones. Por ejemplo li:nt h-child(3) {font -size: 200%;} es
válido pero li : nt h-child (3) {font -size: 200%;} no es válido por exist ir espacios.
Si el número referenciado con nt h-child no exist e, la regla no t endrá efect os. En lugar de first -child se
puede usar nt h-child(1) alt ernat ivament e.
Exist en más pseudoclases CSS que iremos est udiando a lo largo del curso.
COSAS QUE PUEDEN OCURRIR…
Quizás con el código que hemos ido probando en lo que llevamos de curso hayas encont rado algún
select or o fragment o de código que no t e ha funcionado como cabía esperar. Quizás hayas pensado que
has hecho algo mal, o que hay algún error en los cont enidos del curso. M uchas veces no será ni una
cosa ni ot ra. El mot ivo de que muchas veces no se obt enga el result ado esperado es la dist int a
respuest a de los dist int os navegadores (Int ernet Explorer, M ozilla Firefox, Chrome, Opera, Safari, et c.)
ant e det erminado código. A lo largo del curso iremos est udiando cómo resolver, en la medida de lo
posible, est os problemas. Pero como ya hemos indicado en alguna ocasión, en el mundo de los
desarrollos w eb los cambios y novedades son const ant es y no queda ot ra que t ener paciencia, t rat ar de
adquirir experiencia y mant enerse act ualizado a t ravés de cursos, int ernet , libros, revist as, et c.
Pondremos un ejemplo relacionado con lo ant erior. Hay una pseudoclase que es ::select ion cuya
inclusión en el est ándar CSS se ha discut ido y es permit ida por algunos navegadores pero por ot ros no.
La sint axis sería del t ipo p::select ion { color: gold; background-color: red; } y daría lugar a que cuando el
usuario hace una selección dent ro de un element o p, aquello seleccionado aparezca de color oro y con
fondo rojo. Al no haberse est andarizado, es posible que no se reconozca la sint axis por el navegador y
que no se pueda ver est e efect o, o bien que los dist int os navegadores t engan dist int as sint axis para
aplicar est os efect os y haya que escribir una línea específica de dist int a manera para cada navegador.
Al igual que con est a pseudoclase puede ocurrir algo similar con ot ros element os CSS. Sería ideal que
t odos los navegadores funcionaran igual, pero en la práct ica nos encont raremos pequeñas o grandes
divergencias ent re ellos.
Ot ra cosa que puede ocurrir con ciert a frecuencia es que est emos analizando el código css de una w eb
o aplicación w eb y encont remos código que no hayamos est udiado. En ese caso t enemos que acudir a
nuest ro conocimient o general sobre CSS para int erpret ar que por ejemplo div:empt y seleccionará los
element os div que no t engan hijos o cont enedores int ernos, mient ras que input :checked {background-
color: green;} aplicará color de fondo verde a aquellos element os input con el at ribut o
checked=" checked" . Sin embargo, buena part e de est e código puede que no sea soport ado por muchos
navegadores.
Algunas personas dicen: ¡Est o de los desarrollos w eb es caót ico! Quizás no sea para t ant o, en realidad
hay un grado de est andarización bast ant e amplio, pero sí es verdad que en algunos moment os puede
parecer un t ant o caót ico.
EJERCICIO
Dado est e fragment o de código HTM L que est amos usando como base para el curso:
<ul>
</ ul>

Definir que est a list a es de clase (class) especial. La clase especial no t endrá est ilos especificados. En
cambio, deberá definirse que los element os li dent ro de la list a ul de clase especial t engan color de
fondo gris para los element os impares (primero, t ercero, quint o, sépt imo…) y color de fondo rosa para
los element os pares (segundo, cuart o, sext o, oct avo…).
Indicar los cambios en el document o HTM L y el código a incluir en el archivo css.
SOLUCIÓN
En el archivo HTM L escribiremos: <ul class=" especial" >
El cont enido del archivo css puede ser el siguient e:

ul.especial li:nt h-child(1) {background-color: grey;}
ul.especial li:nt h-child(2) {background-color: pink;}
ul.especial li:nt h-child(3) {background-color: grey;}
ul.especial li:nt h-child(4) {background-color: pink;}
Dado que solo t enemos 4 element os en la list a solo definimos los cuat ro primeros hijos.
Pero como queremos indicar que se apliquen los est ilos a t odos los element os impares y pares sería
más correct o usar est a definición:

ul.especial li:nt h-child(odd) {background-color: grey;}
ul.especial li:nt h-child(even) {background-color: pink;}
El result ado será similar a est e:

Selectores avanzados
a CSS.. Combinacione
es. Ejemplos y ejercicios.
EJEM PLOS
S SELECTORE
ES CSS
o del curso h emos ido est udiando disst int os t ipos de select ore
A lo largo es que nos p
permit en ind
dicar en un
archivo csss a qué ele
ement os del código HTM
M L se debe aplicar
a una regla.
r práct ica los select ores
En la p
pueden aparecer
a com
mbinados un
nos con ot r os: vamos a ver ejemp de select ores que nos
plos reales d
podemos encont rar en páginas w eb.
e
SELECTOR
R UNIVERSAL
L
Se usa el símbolo * como select or

o universal. Est e select or
o afect a a t odos
o los elem
ment os dentt ro de una
página w eb. Suele usarse
u para anular los márgenes o espaciadoss predet erm
minados que
e ut iliza el
or. Un ejemp lo sería el sig
navegado guient e:
* {
margin: 0 ; padding: 0;; color: green
n; t ext -decorrat ion:none;
}
Est a regla
a est ablece las propieda
ades de marrgin y paddin
ng en 0 pixe
eles para t od
dos los elem
ment os, su
color en verde
v y la pro
opiedad t extt -decorat ion con valor no
one.
Un aspect o int eresan

nt e del selecct or universa
al es que para las propie
edades que se indiquen
n anula los
or defect o q ue t engan lo
valores po os element o s HTM L para
a esas propie
edades. Por ejemplo los t ít ulos h1,
los párraffos, et c. t ien
nen unos má
árgenes y co
olores por de
efect o. Usan
ndo el selectt or universall podemos
anularlos (como en ell ejemplo estt ableciendo su valor a ce
ero) o est ab lecerlos a un
n valor inicia
al concret o
a t odos (com
igual para mo en el ejem
mplo se est ablece
a el co lor verde o que no existt a decoració
ón para los
o no se consigue si esa d efinición se hace usando
t ext os). Esst e result ado o body { … }
En la sigu ient e imagen

n vemos el result
r ado de aplicar esa definición
d de
el select or un
niversal para
a el código
e est amos ussando como base de ejem
HTM L que mplo para el curso.
om, 2006-2029
Selectores avanzados CSS. Combinaciones. Ejemplos y ejercicios.
Vemos que al aplicar las propiedades margin y padding 0 usando el select or universal, t odos los
element os aparecen “ apelot onados” al carecer del espaciado que incorpora el navegador por defect o.
Sin embargo, sí se aprecian algunos espacios. ¿Por qué? Porque t enemos definidos algunos salt os de
línea con et iquet as <br/ >. Est os salt os de línea siguen exist iendo.
M ÁS SELECTORES
Algunos select ores adicionales respect o a los que hemos vist o son est os:
Selector Ejemplo CSS Observaciones
Selecciona los element os de t ipo t ipoElem dent ro de

una serie cont ando desde el últ imo hast a la posición
li:nt h-last -child(2) {font -size:
t ipoElem:nt h-last -child(num) indicada por num. En el ejemplo, los penúlt imos
200%;}
element os li dent ro de una serie t endrán t amaño de
fuent e el doble de lo normal.
Selecciona los element os de t ipo t ipoElem dent ro de

li:nt h-of-t ype(odd) {font -size: una serie y a los que son de t ipo sel les aplica los
200%; color: red;} est ilos indicados. En el ejemplo los element os li
t ipoElem:nt h-of-t ype(sel)
li:nt h-of-t ype(even) {font -size: impares t endrán t amaño de fuent e doble del normal y
100%;} color rojo, mient ras que los pares t endrán t amaño de
fuent e normal y el color que corresponda.
Recuerda que en algunos navegadores es posible que no se obt engan los result ados deseados.
EJEM PLOS DE CÓDIGO CSS Y SU INTERPRETACIÓN
Hast a ahora hemos t rabajado con select ores normalment e de forma independient e: select ores por
et iquet a, por id, por clase, por at ribut o, select ores avanzados específicos, et c. Cuando nos enfrent emos
al desarrollo del código CSS de una w eb, o cuando t engamos que analizar una hoja de est ilos
desarrollada por ot ra persona, nos encont raremos que los select ores aparecen combinados de dist int as
maneras.
A cont inuación vamos a most rar ejemplos reales de código CSS y a int erpret ar el significado de los
select ores que se ut ilizan.
Selector Observaciones aprenderaprogramar.com
Select or universal. Afect a a t odos los element os de la w eb y sobreescribe

* { …}
los est ilos por defect o.
Select or que afect a a t oda la w eb pero no sobreescribe algunos est ilos por
ht ml { … }
defect o.
Select or que afect a a cualquier elemento con at ribut o class =

body.cont ent pane { … }
“ cont ent pane” que est é dent ro de <body> … </ body>
Selector Observaciones aprenderaprogramar.com
#mainout { … } Select or que afect a a cualquier element o con id = “ mainout ”
.padding { …} Select ores que afect an a element os con class = “ padding” .
Select or que afect a a element os con id = “ slo” sit uados dent ro de

h3 #slo { … } element os h3. Por ejemplo <h3 >Port al w eb para aprender programación
<span id="slo" > aprenderaprogramar.com</ span></ h3>
Afect a a element os cuya clase sea “ input box” que se encuent ren dent ro de
.find form .search .input box { … } element os cuya clase sea “ search” que se encuent ren dent ro de element os
form que se encuent ren dent ro de element os de clase “ find” .
Afect a a element os cuya clase sea “ input box” ó “ search” ó “ find” y a

.find, form, .search, .input box { … } element os <form> … </ form>. Nót ese que la diferencia con el ant erior
select or es que en est e caso los element os est án separados por comas.
Afect a a element os <label> … </ label> que se encuent ren dent ro de un

.search label { … }
element o con class = “ search” .
Afect a a element os cuya clase sea searchint ro que se encuent ren dent ro
.find .searchint ro { … }
de element os cuya clase sea find.
Afect a a <span> … </ span> que se encuent ren dent ro de element os con
.syndicat e-module span { … }
class = “ syndicat e-module”
fieldset a { … } Afect a a links (<a> … </ a>) dent ro de <fieldset > … </ fieldset >
Afect a a element os img dent ro de links, a element os fieldset y a element os

a img, fieldset , img { … }
img.
fieldset { … } Afect a a element os <fieldset > … </ fieldset >
Afect a a element os <fieldset> … </ fieldset> que est én dent ro de

#form-login fieldset { … }
element os con id = “ form-login”
Afect a a list as ul dent ro de element os con id = “ login” ó list as ul dent ro de

#login ul, #form-login ul { … }
element os con id = “ form-login”
.input box, .regist rat ion input , .login Afect a a element os con class = “ input box” ó element os input que est én
dent ro de ot ro con clase “ regist rat ion” ó element os input que est én
input , .cont act -form input ,
dent ro de ot ro con clase “ login” ó element os input que est én dent ro de
#jform_cont act _message, input {
ot ro con clase “ cont act -form” o element os con id =
…} “ jform_cont act _message” ó element os input .
EJERCICIO
Indicar el ámbit o de aplicación de los select ores que se indican:
Selector Ambito de aplicación
.header { … }
.find form .search .but t on { … }
.find, form, .search, .but t on { … }
.header label { … }
#cohe, #cobo { … }
.syndicat e-module img { … }
#form-login p { … }
#login br { … }
#login .but t on { … }
label.invalid { … }
div.it emComment sForm form

input #submit Comment But t on
#s5_bot t om_menu_w rap ul.menu li {

…}
.module_round_box ul.menu ul a {
…}
SOLUCIÓN
Selector Ambito de aplicación
.header { … } Afect a a element os cuya clase sea “ header” .
Afect a a element os cuya clase sea “ but t on” y est én dent ro de element os
.find form .search .but t on { … } cuya clase sea “ search” y est én dent ro de un <form> … </ form> que est é
dent ro de un element o cuya clase sea “ find” .
Afect a a element os cuya clase sea “ but t on” ó “ search” ó “ find” ó est én
.find, form, .search, .but t on { … }
dent ro de un <form> … </ form>.
Afect a a element os <label> … </ label> que se encuent ren dent ro de un

.header label { … }
element o con class = “ header” .
#cohe, #cobo { … } Afect a a element os con id = “ cohe” ó element os con id = “ cobo”
Afect a a <img … > que se encuent ren dent ro de element os con class =
.syndicat e-module img { … }
“ syndicat e-module”
#form-login p { … } Afect a a párrafos que est én dentro de element os con id = “ form-login”
Afect a a element os <br/ > que est én dent ro de element os con id = “ form-
#login br { … }
login”
Afect a a element os con class = “ but t on” que estén dent ro de element os con
#login .but t on { … }
id = “ login”
Afect a a element os con class = “ invalid” que est én dent ro de <label> …

label.invalid { … }
</ label>.
Afect a a element os con id = “ submit Comment But t on” que est én dent ro de
div.it emComment sForm form
element os <input > … </ input > que est én dent ro de element os form que
input #submit Comment But t on
est én dent ro de un div cuya clase sea “ it emComment sForm” .
Afect a a element os li que se encuent ren dent ro de un element o ul cuya clase

#s5_bot t om_menu_w rap ul.menu li {
sea “ menu” y que se encuent ren dent ro de un elemento con id =
…}
“ s5_bot t om_menu_w rap”
Afect a a links que se encuent ren dent ro de list as ul que se encuent ren dent ro
.module_round_box ul.menu ul a {
de ot ras list as ul cuya clase sea “ menu” y que se encuent ren dent ro de
…}
element os cuya clase sea “ module_round_box” .

Cascada CSS
S: concepto. im
mportant, espec
cificidad.
CASCADA
A EN CSS
En epígrafes ant eriore

es del curso hemos vist o cómo funciona la herencia CSS y có
ómo los elem
ment os de
rango infe
erior hereda
an las propie
edades CSS de
d element os
o de rango superior. Po
or ejemplo un
u párrafo
<p> … </ p>
p hereda la
as propiedad
des de color definidos p ara <body> … </ body>. Sin embargo, algunas
des no se heredan y en algunas propiedade
propiedad es como el color de lo
os link apre
eciábamos
peculiarid
dades.
unst ancia co n la que no s t endremo s que famili arizar es la exist encia d

Una circu de conflict os
s ent re las
declaracio or ejemplo si est amos t ra
ones CSS. Po abajando con
n un archivo CSS ext erno
o podemos in
ncluir en él
una decla
aración p {fo
ont -color: bl ue;}. Pero podría
p suced er que com o CSS int ern
no ent re las et iquet as
<head> … </ head> se
e encont rara una declaración p {font -color:
- red;}.. Y t ambién p
podría suced
der que en
un párraffo concret o dent ro del document
d o HTM L apare
eciera una d eclaración como <p st ylle = “ font -
color: yel low ;” . Est as declaracione
es suponen un conflict o o “ colisión de
d est ilos” p
para el naveg
gador, que
ha de deccidir qué est i lo aplicar.
Ya comen
nt amos que de
d forma gen
neral el nave
egador aplica
a el crit erio de
d precedenccia:
Declaració
ón en línea > Declaración
n int erna > Declaración
D ext
e erna
Est o pode
emos verlo como una cascada
c de forma
f que el
e navegadorr va recorrie
endo la casc
cada hast a
llegar al nivel
n más baj o posible.
CS
SS externo
(arc
chivos .css)
CSS inteerno
(dentro de <head>)
<
CSSS en línea
(uso de
d style="…"")
CSS de us
suario
(opción en
navegaddor)
ncluido en el
Hemos in e esquema la opción “ CSS de usu ario” para reflejar
r que algunos navegadores
permit en definir al usuario est iloss propios.
om, 2006-2029
Cascada CSS: concepto. important, especificidad.
ESTILOS DE USUARIO CSS
A t ravés de una opción de menú de algunos navegadores, se puede definir por ejemplo que el t ext o se
debe most rar de un t amaño det erminado o de un color det erminado. Cuando el usuario elige est as
opciones normalment e anula aquello que ha sido definido por el aut or de la página w eb, de modo que
sus opciones prevalecen respect o a cualquier ot ro t ipo de declaración. Est a sit uación no es habit ual, de
hecho quizás la mayoría de los usuarios la desconocen o no la usan. Su empleo quizás se limit a a
personas con problemas de vist a para poner t amaños de fuent e grandes o colores específicos que les
facilit en la visión, o a usuarios avanzados que t ienen un gran dominio de las opciones de configuración.
A pesar de su relat ivo poco uso, como programadores w eb debemos t ener const ancia de ello porque es
posible que t engamos que resolver problemas donde est a configuración afect e a la solución del
problema.
Aprovechando que hablamos de opciones de configuración de los navegadores, cit aremos t ambién que
algunos navegadores permit en configurar opciones relat ivas a los est ilos por defect o. Ya hemos dicho
que cuando un document o HTM L carece de est ilos aplicados, en realidad sí t iene lo que podríamos
denominar est ilos básicos o est ilos por defect o que aplica el navegador. Por ejemplo, una navegador
recién inst alado puede t ener un t amaño de fuent e por defect o de 12 pixeles, pero en aquellos
navegadores que lo permit en, est e parámet ro podría cambiarse y est ablecerse en 16 pixeles a t ravés de
las opciones de configuración del navegador. También algunos navegadores permit en configurar ot ros
parámet ros adicionales. Est e es uno de los mot ivos por los que es recomendable no confiar en los
est ilos por defect o cuando se crean páginas w eb, sino especificar t odos los parámet ros desde nuest ra
hoja de est ilos para asegurarnos de que se aplican exact ament e las reglas CSS que nosot ros deseamos.
ORIGEN, IM PORTANCIA Y ESPECIFICIDAD
Nos encont ramos con que exist en dist int os t ipos de CSS como el predefinido por el navegador, el
definido por el aut or de la página w eb (que puede ser ext erno, int erno o en línea) ó el definido por el
usuario en la configuración de su navegador. A su vez, las reglas pueden ent rar en conflict o (que una
regla diga una cosa y ot ra regla una cosa dist int a) y no sólo a nivel navegador – aut or – usuario, sino en
lo que para nosot ros es la definición CSS principal, la que escribimos cuando creamos una w eb. Por
ejemplo en un archivo css ext erno podemos t ener una regla body {color: red;} y ot ra regla p { color:
blue;} y ot ra regla #dest acado {color: yellow ;}. Si en el document o HTM L nos encont ramos algo así
como <p id=” dest acado” > … </ p> ¿Qué est ilo aplica el navegador ent re los t res posibles?
Todas est as sit uaciones se denominan sit uaciones de conflict o o colisión y CSS define una forma de
resolución de conflict os o colisiones. A est e mecanismo de resolución de conflict os se le denomina
“ cascada” . La cascada se basa en det erminar t odas las reglas que son de aplicación a un element o y que
ent ran en conflict o, en ordenar esas reglas en base a unos crit erios y most rar como result ado en el
navegador la regla que haya quedado en primer lugar, a la que denominamos “ regla ganadora” .
El mecanismo es similar a la asignación de “ pesos” a cada regla CSS para lograr la ordenación.
Supongamos que la regla body {color: red;} t iene peso 45 sobre 100 para ser aplicada a los párrafos que
la regla p { color: blue;} t iene peso de 55 para ser aplicada a los párrafos y que la regla #dest acado
{color: yellow ;} t iene peso 70 para ser aplicada a un párrafo con id = “ dest acado” . Cuando el navegador
se encuent ra un párrafo dent ro del document o HTM L ve las reglas que le son de aplicación y el peso de
cada una, aplicando como regla ganadora la que mayor peso t enga.
¿Cómo se det erminan los pesos y el orden que se asigna a las reglas, es decir, cómo se det ermina qué
regla “ gana” cuando hay varias reglas que ent ran en conflict o?
Las reglas de resolución de conflict os son complejas y no t odos los navegadores responden de la misma
manera. Por ello en cursos de aprendizaje de CSS no recomendamos un est udio en profundidad, sino
conocer las reglas básicas y la filosofía del procedimient o de cascada.
El navegador sigue un proceso similar al siguient e para la resolución de colisiones de est ilos:
1) Crea una list a con t odas las reglas que son de aplicación direct a o indirect a por herencia a un
element o concret o. Cuant o más direct a o próxima est é la regla al element o, ant es se coloca. La
proximidad viene dada por cuán próxima est á la regla a una definición direct a del element o
afect ado. Por ejemplo si un element o div con id=” menu1” t iene un párrafo con class=” it ems”
ent re #menu1 {…} y .it ems {…} la regla ganadora a la hora de aplicar est ilo al párrafo es .it ems {
… } porque es la que más direct ament e define el element o. En est e ejemplo menu1 define al
element o indirect ament e a t ravés del div, mient ras que it ems define direct ament e la clase del
párrafo y por ello result a ganadora.
Ot ro ejemplo: para un párrafo dent ro de un div, una regla que hereda de div est á más próxima
que una regla que hereda de body. Si exist iera una regla direct a relat iva a los párrafos, est a iría
en primer lugar ant es que las demás debidas a herencia.
Si exist e una sola regla direct a relat iva al element o que se est á evaluando, se aplica y t ermina el
proceso de cascada.
2) Si exist e más de una regla con igual nivel de proximidad, se dividen las reglas por origen en base
a si se t rat a de est ilos de usuario, predefinidos del navegador, est ilos de aut or, y en caso de
est ilos de aut or si son css ext erno, int erno o en línea. Se ordenan en base al origen.
Básicament e se colocan primero las declaraciones en línea, luego las int ernas y luego las
ext ernas.
3) Se dividen las declaraciones de reglas en declaraciones import ant es y declaraciones normales.

Las declaraciones import ant es son las que est án escrit as como:
nombreElement o {propiedad: valor !important ;}
Si dos declaraciones son iguales y una lleva !import ant y la ot ra no, prevalece la que lleve !import ant
incluso aunque la ot ra aparezca con post erioridad. Por ejemplo si en un archivo css escribimos:
div {color:blue !import ant ;}
div {color: pink; }
Podría pensarse que los element os div t endrán color rosa por aparecer est a regla en últ imo lugar y
sobreescribir a la ant erior. Sin embargo, no ocurre así porque la palabra clave !import ant hace que esa
declaración prevalezca sobre ot ra igual que no lleve la palabra clave !import ant . El significado de
!import ant en est e caso sería similar a “ est a regla sobreescribe a cualquier ot ra que defina la misma
propiedad para el mismo element o y no es sobreescribible” .
Si en un archivo css ext erno t enemos la declaración p {color:blue !import ant ;} y en el document o HTM L
t enemos en línea <p st yle=” color:red;” > … </ p> la palabra clave !import ant anulará la precedencia del
origen, de modo que el t ext o se verá de color azul. El significado de !import ant quedaría ampliado a
“ est a regla no es sobreescribible y anula la precedencia debida al origen” .
Algunos navegadores ant iguos no reconocen la palabra clave !import ant . Ent re los navegadores
modernos, no t odos aplican exact ament e el mismo significado a la presencia de est a palabra clave.
Teniendo en cuent a el origen y si exist e o no la palabra clave !import ant , las reglas se ordenan
sit uándose en primer lugar las declaraciones de est ilos en línea, except o cuando una regla de aplicación
direct a al element o lleva la palabra clave !import ant . Si exist e una regla ganadora, se aplica.
4) Si no exist e una regla ganadora, para las reglas en conflict o se valora un parámet ro
denominado especificidad. Est aríamos en el caso de que exist an reglas que definan
direct ament e un element o y que ent ren en conflict o. Por ejemplo est as dos reglas:
body div.dest acado p {color: cyan;}

div.dest acado p {color: yellow ;}
Definen direct ament e el est ilo para párrafos que se encuent ren dent ro de element os div cuyo at ribut o
class sea “ dest acado” . No hay una regla ent re las dos que defina más direct ament e el valor de la
propiedad para ese t ipo de element o, por lo que hay que proceder a una resolución de conflict o. Est a
resolución se hace con el procedimient o de cálculo de especificidad que explicaremos más adelant e. La
regla con mayor especificidad será la que se most rará al visualizar la w eb.
Ot ro ejemplo de conflict o sería en un párrafo con id=” at elier” y est a declaración en un archivo css:
p {color: red; t ext -decorat ion:none;}

#at elier {color: yellow ;}
Ambas reglas son de aplicación direct a al párrafo, por lo que la regla ganadora se det ermina mediant e
el cálculo de especificidad.
5) Si se llega a que dos reglas t ienen igual especificidad, igual import ancia e igual origen y se
cont radicen, prevalecerá la que est é escrit a en últ imo lugar (crit erio de orden o de
sobreescrit ura).
EJERCICIO
En el archivo CSS ext erno a un document o HTM L encont ramos est a declaración:
.magicTit le {
margin:0px;
w idt h:20px;
height :30px;
color:green !import ant ;
border-st yle: hidden !import ant ;
}
Por ot ro lado dent ro del código HTM L t enemos el siguient e código:
<div class=" magicTit le" st yle=" border:1px solid blue; color: blue;" >
Aprendiendo a programar
</ div>
Responde a las siguient es pregunt as:
a) ¿Se most rará un borde para el div? ¿Por qué?
b) ¿Con qué color se most rará el t ext o, con color verde o con color azul? ¿Por qué?
c) ¿Se respet arán los valores de w idt h y height definidos en el archivo CSS ext erno o quedarán
anulados? ¿Por qué?


Cálculo de especificidad.
e U de !import ant.
Uso
CÁLCULO DE LA ESPEC
CIFICIDAD
El mecaniismo de casccada CSS dett ermina que cuando dife

erent es reglas son de apl icación a un element o
ést as se ordenan
o en base
b a unos crit erios. Si con el crit errio de proxim
midad o de o
origen no se ha podido
e conflict o ent re reglas se
resolver el s valora lo que mina especif icidad. La especificidad para
q se denom p reglas
que aplica
an igual de direct amentt e a un elem
ment o es un valor numérico que ut illiza el naveg
gador para
ordenar r eglas que en
nt ran en confflict o.
La especi ficidad se puede

p calcul ar como un
n número qu
ue const a d e cuat ro díg
git os ABCD en el cual
t enemos:
er dígito: t om
A o prime ma valor 1 cu
uando el est i lo se declara
a en línea o cero
c en caso cont rario.
ndo dígito: se
B o segun e calcula sum
mando 1 porr cada ident ifficador de t i po id que af ect e a un ele
ement o. Si
una decla
aración es #m
menu1 #it em
m1 {…} el valo
or del segun do dígit o de
e especificida
ad para est a regla será
2, result ad
do de sumarr 1+1, una un
nidad por cad
da id que afe
ect e al eleme
ent o.
C o terce r dígito: se calcula sum ando 1 por cada clase o pseudoclas

se que afectt e a un elem
ment o. Por
ejemplo .dest acado { … } aport a un valor 1, mient ras qu
ue .dest acad o .especial .suit er { … } aport a un
valor 3 result ado de sumar 1+1+1 , una unidad
d por cada cla
ase o pseudo
oclase.
o dígito: se calcula
D o cuarto c suma
ando 1 por ca
ada element o HTM L o psseudoelemen
nt o que aparrezca en la
declaració
ón. Por ejem
mplo ul li a { … } aport a u n valor 3, re
esult ado de sumar
s 1+1+1
1, una unidad
d por cada
element o HTM L refer enciado.
Valor
V por Valor por
Valor poor Valor por atrib
butos class o e
elementos
atributo sty
yle atributtos id pseeudoclases simples
Una vez det

d erminado
o cada dígit o,
o se obt iene
e un valor nu
umérico (porr ejemplo 01
112) que pod
demos ver
como el peso
p de la re
egla. “ Gana” la regla con
n mayor peso
o. Es int eresant e fijarse en que el us
so de st yle
siempre ganará
g a cua
alquier comb
binación de reglas, lo cu
ual nos dice que habit ua
alment e los est ilos en
línea gana
arán. Una w eb bien consst ruida debe
e prescindir en
e general del
d uso de esst ilos en líne
ea, aunque
comproba
arás que porr un mot ivo u ot ro es fr ecuent e enc
cont rarlos cu
uando se ana
alizan desarrrollos w eb
exist ent ess. Después de
d los est iloss en línea, lo s est ilos deffinidos para un id result a
an ganadores respect o
al rest o. Finalment
F e, las clases o pseudoclase
es ganan a la
a definición de est ilos pa
ara element os
o simples
HTM L.
mos ant eriorm

Como vim ment e, la palabra clave ! import ant p uede int rodu
ucir excepcio
ones.
om, 2006-2029
Cálculo de especificidad. Uso de !important.
EJERCICIO RESUELTO
Supongamos que t enemos el siguient e código HTM L:
<div> <!—Ejemplo aprenderaprogramar.com-->

<div class=" dest acado" >
<p> Aprender a programar es un objet ivo que se plant ea mucha gent e y que no t odos alcanzan.</ p>
… </ div> … </ div>
Si en un archivo css t enemos las siguient es declaraciones, det erminar cuál es la punt uación por
especificidad cuando proceda, cuál es la regla ganadora, de qué color se visualizará el t ext o y por qué:
Puntuación
Declaraciones Regla ganadora, color del texto y por qué
especificidad
body {color: grey;}

.dest acado {color: green;}
div.dest acado {color: blue;}
div.dest acado p {color: yellow;}
div:first -child {color: magent a;}
body {color: grey;}
body {color: grey;}


.dest acado {color: green
!import ant ;}

p {color: blue;}

p {color: blue !import ant ;}
SOLUCIÓN AL EJERCICIO PLANTEADO
Not a: no t odos los navegadores responden igual a la palabra clave !import ant , por lo que podrías
encont rar algunos navegadores en que la respuest a no fuera exact ament e como hemos indicado.
Declaraciones Puntuación Regla ganadora, color del texto y por qué
1ª regla: no aplica direct ament e, si hiciéramos el cálculo body

aport a 1 al cuart o dígit o. Tot al 0001
body {color: grey;} No 2ª regla: body, div y p aport ant 1+1+1 = 3 al cuart o dígit o y
.dest acado aport a 1 al t ercer dígit o. Tot al 0013
body div.dest acado p {color: cyan;} 0-0-1-3
3ª regla: no aplica direct ament e. Si lo calculáramos, 0010
.dest acado {color: green;} No
4ª regla: no aplica direct ament e. Si lo calculáramos, 0011
div.dest acado {color: blue;} No
5ª regla: div y p aport an 1+1=2 al cuart o dígit o y .dest acado
div.dest acado p {color: yellow;} 0-0-1-2 aport a 1 al t ercer dígit o. Tot al 0012
div:first -child {color: magent a;} 0-0-1-1 6ª regla: la pseudoclase first -child aport a 1 al t ercer dígit o y div
aport a 1 al cuart o dígit o. Tot al 0011
Gana: la regla 2, el t ext o se vería de color cyan.
Gana: la única regla que, por herencia, afect a. El t ext o se vería

body {color: grey;} No
de color gris. Si calculáramos la especificidad sería 0001
body {color: grey;} No Gana: la segunda regla por ser la más próxima. El t ext o se vería
.dest acado {color: green;} 0-0-1-0 de color verde.
Gana: la primera regla. Aunque la segunda regla lleva la palabra

clave !import ant es menos direct a. La primera regla afect a
.dest acado {color: green !import ant ;} No direct ament e al element o p por lo que t iene prevalencia.
.dest acado {color: green;} No Gana la primera regla, el t ext o se verá de color cyan.
p {color: blue;} 0-0-0-1
Gana la t ercera regla: hay dos reglas que afect an direct ament e
al element o p, la primera y la t ercera. Al t ener la t ercera la
.dest acado {color: green;} No declaración !import ant significa que se sobreescriben el rest o de
p {color: blue !import ant ;} reglas, independient ement e de su valor de especificidad y
!important
origen.
CÓM O USAR !IM PORTANT EN CSS
Considera una declaración de est e t ipo. Pruébala sobre el código HTM L de prueba que est amos usando
para el curso:
body div.dest acado p {color: cyan; t ext -decorat ion:underline;}
p {color: red !import ant ;}
Aquí apreciamos dos cosas no del t odo correct as. En primer lugar, por convenio los programadores y
diseñadores w eb suelen poner las declaraciones más generales en primer lugar y las más específicas a
cont inuación, t ant o más abajo en el archivo o definición css cuant o más específicas sean. Est o facilit a el
análisis y comprensión de hojas de est ilo. Por t ant o cambiaríamos el orden de la declaración y
pondríamos en primer lugar la declaración más general relat iva a párrafos en general y en segundo
lugar la ot ra declaración, más específica.
En segundo lugar, si queremos que los párrafos sean rojos: ¿Para qué declarar un color de párrafo cyan
que luego anulamos con una declaración con la palabra clave !import ant ? En un archivo CSS con cient os
de líneas est as declaraciones generan confusión y dificult an el análisis del código. Cuando vemos cosas
de est e t ipo analizando páginas web en general corresponden a que la persona que generó el código no
t enía claros los concept os de CSS ó a que se han realizado correcciones apresuradas en el código
dejando inconsist encias. El problema est á en que cuando una hoja de est ilos se manipula múlt iples
veces añadiendo en cada ocasión más inconsist encias, se vuelve incoherent e e inmanejable.
El código ant erior queda más correct o así. Comprueba que obt ienes el mismo result ado:
p {color: red;}
body div.dest acado p {t ext -decorat ion:underline;}
Sólo debería usarse !import ant en casos concret os y en los que result a est rict ament e necesario. Usar la
palabra clave !import ant con frecuencia anulando est ilos repet idos es sínt oma de un mal código CSS.
En general, para personas que se est án iniciando con CSS recomendamos no usar !import ant en el
código, posponiendo su uso para cuando se haya adquirido experiencia y un mayor nivel de dest reza.
CONCLUSIONES SOBRE LA CASCADA CSS
El orden final con que se ordenan reglas en conflict o se basa en un proceso denominado “ cascada” . El
proceso es complejo, las reglas van cambiando en el t iempo y pueden exist ir diferencias ent re
navegadores. Por ello no result a de int erés aprender t odas las reglas del proceso de cascada ni est ar
realizando cont inuament e cálculos para det erminar precedencias. Sin embargo, sí result a de int erés
comprender el concept o y las reglas básicas porque nos puede ayudar a resolver problemas que
aparezcan en la visualización de páginas w eb. Con est o, más la aplicación de sent ido común y la
experiencia que iremos ganando a medida que t rabajemos con CSS, será suficient e para crear páginas
w eb con un código CSS de calidad.

Colores HTM
M L y CSS. RGB, hexadecimale s. Ejemplos.
COLORES EN HTM L Y CSS
Como es obvio,
o ent re los aspect o s import ant es
e de las pág
ginas w eb t enemos el co
olor. El color int erviene
en el at ra
act ivo y faci lidad de lectt ura que pu ede t ener una
u página w eb. No vam
mos a hablarr ahora de
cómo se deben
d comb
binar los colo
ores, sino de
e cómo se pu
ueden especcificar colore
es usando HT
TM L y CSS.
Hay dist in
nt as manera
as de ponerr nombre a un color: n ot ación RGB
B, códigos h exadecimale
es, uso de
nombres específicos, et c.
CÓDIGOS
S RGB DECIM
M ALES
Los color es en los monit

m ores de dadores per sonales y d isposit ivos m
e los ordend móviles com
mo t ablet s,
smart pho
ones, et c. se forman por combinació n de t res co
olores básico s: rojo (Red)), verde (Gre
een) y azul
(Blue). La combinació r de est os t res colores en inglés es RGB y así se
ón de las let ras e denomina al sist ema
de const r ucción de co
olores basado
o en indicar la proporció no de est os t res colores. Hay ot ros
ón de cada un
sist emas como
c el CM YK
Y que son de
d aplicación
n en el diseño
o y la indust ria de edición, pero
r gráfica y d p no en
los desarrrollos w eb.
Un color con
c el sist em
ma RGB se escribe en CSS
S así:
rgb (cant id
dadDeRojo, cant
c idadDeV
Verde, Cant id
dadDeAzul)
La cant ida
ad de cada color
c se exprresa ent re un
n valor mínim
mo que es ce
ero y un valo
or máximo q ue es 255.
Si se indiccara un núm ero menor que
q cero se consideraría
c e indica un n úmero mayo
cero, o si se or que 255
se conside
eraría 255. El ( 0, 0) es el negro y el color rgb (25
E color rgb (0, 55, 255, 255
5) es el blanc
co. El color
rojo será el rgb (255, 0,
0 0), el verd e rgb (0, 255
5, 0) y el azull (0, 0, 255).
a complet a d e rojo y verd

La mezcla de sin azul da
a lugar al am
marillo: rgb (2
255, 255, 0).
La mezcla
a complet a d e verde y azul sin rojo da
a lugar al cya
an: rgb (0, 25
55, 255).
El rest o de
d colores se
e const ruyen
n mezclando
o est os colorres básicos: por ejemplo
o el rgb (255
5, 100, 15)
sabemos que será un color rojizo--amarillent o porque hay mucho rojo,, algo de verd
de y poco azul.
Sobre el código
c de prrueba HTM L que est amo
os usando p ara el curso , en concrett o vamos a fijarnos
f en
nuest ra lisst a de eleme
ent os de men
nú:
<
<ul>
<
<li><a href=" #"
# >Inicio</ a><
</ li>
< <a href=" l ibros.ht ml" >L
<li> Libros de prog
gramación</ a>
a </ li>
< <a href=" cursos.ht
<li> c ml" >Cursos
> de pro
ogramación<// a> </ li>
< <a href=" humor.ht
<li> h ml" >Humor
> infor mát ico</ a> <// li>
< ul>
</
om, 2006-2029
Colores HTM L y CSS. RGB, hexadecimales. Ejemplos.
Prueba a aplicar est as reglas CSS y visualiza el result ado, que deberá ser similar al que most ramos en la
imagen a cont inuación:

li:first -child {background-color: rgb(255, 255, 0);}
li:nt h-child(2){background-color: rgb(0, 0, 0);}
CÓDIGOS RGB PORCENTUALES
Los códigos RGB se pueden expresar en valores de t ant o por cient o, correspondiendo el 0% a 0 y el
100% a 255 en la not ación ant erior. La sint axis será:
rgb (cant idadDeRojo%, cant idadDeVerde%, Cant idadDeAzul%)
El código del ejemplo ant erior en not ación porcent ual se escribiría así:

li:first -child {background-color: rgb(100%, 100%, 0%);}
li:nt h-child(2){background-color: rgb(0%, 0%, 0%);}
li:nt h-child(3){background-color: rgb(0%, 100%, 100%);}
li:nt h-child(4){background-color: rgb(100%, 39.21%, 5.88%);}
Visualiza el result ado de est e código y comprueba que sea igual que el ant erior.
Not a: los valores de porcent ajes decimales deben ir separados con un punt o y no con una coma, por
ejemplo rgb(100%, 39.21%, 5.88%) es válido pero rgb (100%, 39,21%, 5,88%) no es válido.
La equivalencia ent re un valor numérico y el valor porcent ual se puede calcular con una regla de t res “ Si
255 equivale a 100, un valor equivale a …” o lo que es lo mismo, usando la fórmula:
Porcent aje equivalent e = Valor Numérico * (100/ 255) para pasar de valor numérico a porcent aje
Valor numérico = Porcent aje equivalent e * (255/ 100) para pasar de valor numérico a porcent aje
Por ejemplo, el valor numérico 15 es un porcent aje de 15 x 100 / 255 = 5.88%
CÓDIGOS HEXADECIM ALES
Una de las not aciones soport ada por las hojas de est ilo CSS para colores, y hoy día la más usada, es la
not ación basada en códigos hexadecimales. Est e sist ema de códigos se basa en el alfabet o hexadecimal
compuest o por 16 símbolos: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Ha de considerarse la equivalencia A = 10, B = 11, C = 12, D = 13, E = 14 y F = 15
Un código en base hexadecimal se t raslada a numeración decimal ut ilizando pot encias de 16. Por
4 3 2 1 0
ejemplo el código 1B0DE equivale al número 1x16 + 11x16 + 0x16 + 13* 16 + 14x16 = 65536 +
1 0
45056 + 0 + 208 + 14 = 110814. El código A3 equivaldría a 10x16 + 3* 16 = 160 + 3 = 163
La not ación hexadecimal sigue el sist ema RGB: define la cant idad de color rojo, verde y azul que se
aplica para formar un color, de ahí que t ambién se le denomine not ación RGB hexadecimal. Pero usa
ot ra not ación dist int a a la que vimos para expresar colores RGB ant eriorment e, en concret o con
not ación hexadecimal un color se designa como:
#cant idadDeRojoHexadecimal cantidadDeVerdeHexadecimalCant idadDeAzulHexadecimal
Los códigos se expresan como el símbolo # seguido de 6 símbolos, correspondiendo los dos primeros a
la cant idad de rojo expresada en not ación hexadecimal, los dos int ermedios a la cant idad de verde
expresada en not ación hexadecimal y los dos últ imos a la cant idad de azul expresada en not ación
hexadecimal. Por ejemplo #FF4D21 es la not ación de un color hexadecimal.
Los límit es siguen siendo 0 como límit e inferior, que en hexadecimal se expresa como 00, y 255 como
límit e superior, que en hexadecimal se expresa como FF (15x161 + 15x160 = 240 + 15 = 255).
La cant idad de cada color se expresa de la misma forma que en el sist ema RGB: ent re un valor mínimo
que es cero y un valor máximo que es 255, pero los números se escriben en hexadecimal. Si se indicara
un número hexadecimal menor que cero se consideraría cero, o si se indica un número hexadecimal
mayor que 255 se consideraría 255. El color negro, rgb (0, 0, 0), se expresa como #000000 en
hexadecimal. El color blanco, rgb (255, 255, 255), se expresa como #FFFFFF hexadecimal. El color rojo,
rgb (255, 0, 0), se expresa como #FF0000 hexadecimal. El verde, rgb (0, 255, 0), es el #00FF00
hexadecimal y el azul rgb (0, 0, 255) es el #0000FF hexadecimal.
La mezcla complet a de rojo y verde sin azul da lugar al amarillo, rgb (255, 255, 0) ó #FFFF00
hexadecimal.
Si t uviéramos que expresar un color int ermedio como el rgb (255, 100, 15) t endremos que expresar
255, 100 y 15 en not ación hexadecimal, result ando que 255 es FF en hexadecimal, 100 es 64 en
hexadecimal y 15 es 0F en hexadecimal, por lo que el color es #FF150F.
Prueba est e código CSS y comprueba que el result ado es el mismo que has obt enido con códigos rgb
decimales y códigos rgb porcent uales ant eriorment e.

li:first -child {background-color: #FFFF00;}
li:nt h-child(2) {background-color: #000000;}
li:nt h-child(3) {background-color: #00FFFF;}
li:nt h-child(4) {background-color: #FF640F;}
VARIACIONES PERM ITIDAS EN CÓDIGOS HEXADECIM ALES
Se admit en algunas variant es a la hora de definir un color hexadecimal en CSS.
Un color se puede designar con solo t res símbolos en lugar de seis. En est e caso se considera que es una
abreviación de la repet ición de esos símbolos, por ejemplo #FFF se considera abreviación de #FFFFFF y
#05F se considera abreviación de #0055FF.
También se admit e el uso de let ras en minúsculas en lugar de let ras mayúsculas. De est e modo, #ffffff
equivale a #FFFFFF ó #0dab4f equivale a #0DAB4F.
El sist ema más ext endido es usar seis símbolos y let ras mayúsculas, pero en ocasiones t e encont rarás
hojas de est ilo donde se usan con frecuencia t res símbolos u hojas de est ilo donde usan minúsculas.
También en muchos casos se encuent ran “ mezclas” , por ejemplo algunos colores designados con
mayúsculas y ot ros con minúsculas.
Para aquellas personas que se inician con CSS recomendamos usar siempre la not ación de 6 símbolos
(evit ando las abreviat uras) y let ras mayúsculas.
CONOCER A QUÉ COLOR CORRESPONDE UN CÓDIGO HEXADECIM AL
En ocasiones est aremos analizando una hoja de est ilos y veremos un color hexadecimal como #F477A2
y querremos saber a qué color, visualment e, corresponde. Para ello bast a escribir en un buscador como
bing, google o yahoo “ colores hexadecimal” y pinchar en cualquiera de las páginas que ofrecen el
servicio de most rar un color a part ir de su código. Una vez int roduzcamos el código, se nos most rará el
color que represent a. El result ado para el color de ejemplo que hemos puest o será similar a est e:
El mismo result ado podemos obt ener usando un programa de diseño gráfico como Gimp ó Phot oshop,
que en sus herramient as de color permit en int roducir códigos hexadecimales y nos muest ran el color
asociado a ese código.
CONOCER EL CÓDIGO DE UN COLOR
En ocasiones t endremos una imagen en format o jpg, png, t iff, et c. y querremos conocer el código de
alguno de los colores que aparecen en la imagen. Para ello abriremos la imagen con un programa de
diseño gráfico como Gimp ó Phot oshop, escogeremos la herramient a “ recoge-color” y pulsaremos
sobre la part e de la imagen donde est á el color deseado. Una vez hecho est o, con la herramient a de
color del programa ya podremos ver el código hexadecimal, RGB, HSV, et c. correspondient e a ese color.
En ot ros casos veremos una página w eb y querremos conocer qué color es el que aparece como fondo,
borde, relleno, et c. de un element o. Para ello podemos proceder de varias maneras:
a) Usar una herramient a recoge-color w eb (como ColorZilla, disponible para M ozilla Firefox y
Google Chrome) que nos indica los códigos de color simplement e pinchando con el rat ón sobre
aquella part e de la w eb de la que queremos conocer el color.
b) Usar una herramient a de análisis w eb (como Firebug para M ozilla Firefox o Firebug Lit e para el
rest o de navegadores) que nos permit e obt ener múlt iple información sobre la w eb.
c) Hacer una capt ura de pant alla (print screen) y pegar la imagen obt enida en un programa de
diseño gráfico como Gimp ó Phot oshop. Una vez hecho est o, obt endremos el color como
hemos explicado para una imagen cualquiera.
Est as herramient as son en algunos casos complejas y no vamos a profundizar en ellas de moment o
porque no las consideramos ahora de import ancia para el desarrollo del curso. No obst ant e, nos ha
parecido oport uno cit arlas para ir t eniendo unas nociones generales sobre ellas y para que aquellas
personas que t engan curiosidad puedan invest igar por su cuent a si lo desean.
EJERCICIO
En la siguient e t abla est án mal ordenados los códigos de colores. Ordénalos de forma que en cada fila
est én los códigos equivalent es de forma ordenada y crea un document o HTM L donde se muest re un
cuadrado donde aparezca como t ext o el color con la not ación empleada, y como color de fondo el
color:
Nombre Hexadecimal RGB
DimGray 1E90FF 178,34,34
IndianRed 696969 205,92,92
FireBrick CD5C5C 30,144,255
DodgerBlue B22222 75,0,130
Indigo 4B0082 105,105,105


W eb safe co
olors, RGBA, HS
SL, HSLA, lista de
d colores HTM
M L - CSS.
COLORES EN LA W EB
a forma más habit ual d e designar colores

Aunque la c en CSS
C es la nott ación hexad
decimal esco
ogiendo el
color dese
eado ent re lo
os varios mil lones posibl es, hay algun
nas curiosida
ades que me
erece la pena
a nombrar.
do, la exist encia de un conjunt
Por un lad c o de colores al qu
ue se denom
minaron “ web safe color s” que fue
usado durrant e varios años debido
o a que los monit
m ores en que se visua
alizaban las p
páginas web
b no t enían
capacidad
d para most rar
r t odos los colores.
LOS W EB SAFE COLOR

RS
o t ot al de co
El número olores RGB se
e puede calccular t eniend
do en cuent a que cada u
uno de los t res
r colores
admit e 25
56 valores (d
desde 0 hastt a 255), de ahí
a que el t o t al de colore
es disponible
e sea exagerradament e
grande, en concret o de
d 256 x 256
6 x 256 = 16.7
777.216 colo
ores. Cuando
o surgieron lo
os desarrollo
os web y el
nt ernet , la mayoría
auge de in m de lo
os monit oress sólo eran capaces de most
m rar 256 ccolores diferrent es. Por
ello se de
efinió una gama
g de col ores (en co
oncret o 216, ya que algunos se dejjaron reserv
vados para
o de sist em a) a los que
element os e se llamó “ colores segu
uros para la web” o “ w
web safe colo
ors” . Est os
colores erran colores que
q se most raban
r correcct ament e en t odos los m onit ores, de ahí que se l os llamara
colores se
eguros, frentt e a ot ros co lores que po
odían no mos
st rarse corre
ect ament e qu
ue eran inseg
guros.
Hoy día lo
os monit oress han evolucionado y ya t ienen capacidad para most
m rar millo
ones de colo res, con lo
cual ha perdido
p sen t ido la clasificación de colores en t re seguros e inseguro
os. La mayo ría de los
diseñadorres usan el color que l es apet ece ent re los millones
m disp
ponibles y t o
odos son se
eguros. No
obst ant e, los web saffe colors sig
guen siendo ut ilizados co
on preferen cia por algu nos diseñad
dores a los
esult a cómod
que les re do usar una gama de co
olores básica o les gust a usar una gama de colorres simple.
También son p algunos diseñadores que crean diseños
s usados por d para disposit ivoss con limit aci ones en la
gama de colores.
c Si q uieres consu
ult ar la list a con
c los 216 web
w safe col ors puedes h
hacerlo en la
a dirección
websafecolors.info
ÓN RGBA
NOTACIÓ
Exist en ott ras not acio nes o sist em

mas de colo res menos ut
u ilizadas pe
ero que vam
mos a nombrrar porque
est án adm
mit idas para su uso en CS
SS y conviene
e al menos conocerlas brrevement e.
La not aci ón RGBA in corpora un parámet ro adicional de

enominado “ Alpha” y q ue indica el grado de
encia que se aplica al color siend
t ranspare do 0.0 el valor
v mínim
mo, que sign
nifica comp let ament e
ent e, y 1.0 el valor máxim
t ranspare mo, que signi fica complett ament e opa
aco.
om, 2006-2029
W eb safe co
olors, RGBA, HS
SL, HSLA, lista de
d colores HTM
M L - CSS.
Un color con
c el sist em
ma RGBA se escribe
e en CS
SS así:
rgba (cant idadDeR

Rojo, cant ida
adDeVerde, Cant
C idadDeA
Azul, valorDe
eAlpha)
Sobre el código
c de pru
ueba HTM L que
q est amoss usando parra el curso, volvemos
v a fiijarnos en nu
uest ra list a
de elemen
nt os de men
nú:
<
<ul>
<
<li><a href=" #"
# >Inicio</ a><
</ li>
< <a href=" l ibros.ht ml" >L
<li> Libros de prog
gramación</ a>
a </ li>
< <a href="ccursos.ht ml" >Cursos
<li> > de pro
ogramación<// a> </ li>
< <a href=" humor.ht
<li> h ml" >Humor
> infor mát ico</ a> <// li>
< ul>
</
Prueba a aplicar est ass reglas CSS y visualiza el

e result ado, que deberá ser similar a
al que most ramos
r más
adelant e:
/ * Curso CSS
C est ilos aprrenderaprogra
amar.com* /
li:first -chil d {backgroun d-color: rgba((255,0,0,1);}
li:nt h-child und-color: rgb a(255,0,0,0.66);}
d(2){backgrou
li:nt h-child und-color: rgb a(255,0,0,0.33);}
d(3){backgrou
li:nt h-child und-color: rgb a(255,0,0,0);}}
d(4){backgrou
Cuando t enemos
e un fondo
f blanco
o y vamos añ adiendo t ran
nsparencia el
e efect o que
e observamo s es que el
color pare
ece que se va haciendo más
m claro. En
n realidad no olor se haga más claro, sino
o es que el co s que al
t ener máss t ransparen cia deja ver cada vez má
ás el fondo b lanco result ándonos
á a la vist a más cl aro.
Escribe la
a declaració n .dest acad o {backgrou
und-color: rg
gb(0,0,0);} y añade en el HTM L có
ódigo para
indicar qu
ue la list a se ase: <ul classs=" dest acad o" >. Con estt o, comprue
ea de esa cla eba la diferencia ent re
añadir t ra
ansparencia t eniendo fon
ndo blanco o añadir t ran
nsparencia t eniendo
e fond
do negro. En
n el primer
caso el co
olor se va hacciendo cada vez más clarro, en el segu
undo se va h aciendo cad a vez más os
scuro.
Not a: no t odos los n avegadores admit en la not ación RG

GBA. En esp ecial, navegadores ant ig
guos no la
soport an. El número de
d colores d isponibles ess más de 16 millones, añ
ñadiéndole la
a t ransparen cia result a
un númerro de coloress práct icame
ent e infinit o.
om, 2006-2029
W eb safe co
olors, RGBA, HS
SL, HSLA, lista de
d colores HTM
M L - CSS.
NOTACIÓ
ÓN HSL
El sist ema
a HSL usa u na rueda de
e colores y t res paráme
et ros, el prim
mero un valo
or numérico
o y los dos
siguient ess un porcentt aje, de modo
o que un col or HSL se escribe:
hsl (an guloDeGiroC

Color, sombrraGrisSat urac
ción%, Cant i dadDeAzul, brillo%)
El primer parámet ro o ángulo re

epresent a el color. En la
a rueda el án
ngulo de 0 g
grados (o 36
60 grados)
representt a el rojo, el ángulo de 12
20 grados el verde y el án
ngulo de 240
0 grados el azul.
El segund o parámet ro
o o porcent aje de sat uración represe
ent a la cant id
dad de color frent e a som
mbra gris y
el 100 % represent
r a el
e color comp
plet o mient ras
r que el 0%
% supone nad
da de color y t odo de so
ombra gris.
Todo colo
or con sat ura
ación 0 es un a sombra gr is.
El t ercer parámet
p ro o porcent aje de brillo ge
enera el negrro si es 0% y color más claro (repres
sent aría la
incidencia
a de luz sobr e el color) cu
uant o más p róximo est á a 100% hastt a llegar al bllanco.
Prueba a visualizar
v el código HTM L con est a de
efinición de est ilos:
/ * Curso CSS
amar.com* /
li:first -chil d {backgroun d-color: hsl(0,,0%,50%);}
li:nt h-child
d(2){backgrou
und-color: hsl((0,50%,50%);}}
li:nt h-child und-color: hsl((0,100%,50%);}
d(3){backgrou
li:nt h-child
d(4){backgrou
und-color: hsl((58,100%,50%
%);}
El result ado debe ser la primera

a línea del menú
m gris, la
a segunda grisácea-rojizza, la t ercera
a roja y la
cuart a en un t ono am arillo.
Not a: no t odos los navegadores

n admit en la
a not ación HSL.
H En espe
ecial, navega
adores ant ig
guos no la
soport an.
om, 2006-2029
W eb safe colors, RGBA, HSL, HSLA, lista de colores HTM L - CSS.
NOTACIÓN HSLA
El sist ema HSLA es respect o al HSL análogo a lo que es el sist ema RGBA respect o al RGB, es decir, añade
un parámet ro adicional alpha que represent a la t ransparencia y que t oma un valor ent re 0 y 1. La
sint axis es:
hsla (anguloDeGiroColor, sombraGrisSat uración%, Cant idadDeAzul, brillo%, valorDeAlpha)
Los efect os que se generan son los mismos que hemos descrit o para la not ación RGBA. Recuerda que al
añadir t ransparencia el efect o obt enido depende del color de fondo que t engamos. Si el fondo es
blanco, la impresión que se genera es que el color se va aclarando. Si es oscuro, la impresión es que el
color se va oscureciendo.
NOM BRES DE COLORES ESTÁNDAR
Los navegadores permit en el uso de nombres específicos para más de cien colores: además de los más
conocidos (Red, Blue, Yellow, Brown, Pink, Green, etc.) exist en nombres para muchos colores más. Por
ejemplo BlueViolet es color azul violáceo, Tomat o es color t omat e, SkyBlue es color cielo. Se admit e el
uso de minúsculas y mayúsculas indist int ament e: es válido t ant o red como Red, ó BlueViolet como
blueviolet .
No es un sist ema muy ext endido y es posible que algunos navegadores no reconozcan algunos
nombres, pero algunos diseñadores lo usan y sobre t odo se recurre a él cuando se quiere poner un
color rápidament e y nos acordamos del nombre pero no del código hexadecimal. En general, se
desaconseja su uso ya que es menos seguro que el uso de códigos de color.
A modo de curiosidad, ponemos a cont inuación una list a de nombres de colores.
aliceblue, ant iquewhit e, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet , brown,
burlywood, cadet blue, chart reuse, chocolat e, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan,
darkgoldenrod, darkgray, darkgreen, darkkhaki, darkmagent a, darkolivegreen, darkorange, darkorchid, darkred,
darksalmon, darkseagreen, darkslat eblue, darkslat egray, darkt urquoise, darkviolet , deeppink, deepskyblue,
dimgray, dodgerblue, firebrick, floralwhit e, forest green, fuchsia, gainsboro, ghost white, gold, goldenrod, gray,
green, greenyellow, honeydew, hot pink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen,
lemonchiffon, light blue, lightcoral, lightcyan, lightgoldenrodyellow, light gray, light green, light pink, light salmon,
light seagreen, light skyblue, light slat egray, light st eelblue, light yellow, lime, limegreen, linen, magent a, maroon,
mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslat eblue,
mediumspringgreen, mediumt urquoise, mediumviolet red, midnight blue, mint cream, mist yrose, moccasin,
navajowhit e, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, palet urquoise,
paleviolet red, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue,
saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slat eblue, slat egray, snow,
springgreen, st eelblue, t an, t eal, t hist le, t omat o, t urquoise, violet , wheat , whit e, whit esmoke, yellow,
yellowgreen
W eb safe colors, RGBA, HSL, HSLA, lista de colores HTM L - CSS.
EJERCICIO
Crea un document o HTM L con 20 divisiones. En las diez primeras divisiones int roduce el color RGB
178,34,34 con grados de t ransparencia desde 0.1 hast a 1.0 (en cada división un punt o decimal más de
opacidad). En las ot ras diez divisiones int roduce el color RGB 218,165,32 con grados de t ransparencia
desde 1.0 hast a 0.1 (en cada división un punt o decimal más de t ransparencia). En cada división escribe
el código de color y el grado de t ransparencia que muest ra. Por ejemplo: <<RGB 178,34,34 con
t ransparencia 0.6>>


Color de fon
ndo. Propiedad
d background-c
color CSS.
BACKGRO
OUND-COLO R CSS
La propied
dad backgro
ound-color de
e CSS nos pe
ermit e est ab lecer un colo
or de fondo e
en cualquierr element o
delimit ad o dent ro de una página w eb. Todo element
e o t ie
ene la propie
edad color d
de fondo con
n valor por
defect o “ t ransparent e” (t rasnparrent ), por lo que mucha
as veces se piensa que no exist e un
n color de
fondo porr defect o. En
n realidad sí exist
e e, pero no se ve.
PROPIEDAD
D CSS background-color
Valor po
or defecto t ranssparent
¿Se here
eda directam
mente? No
Un co
olor RGB ó RG
GBA p.ej. rgb (2
255, 0, 0)
Un co
olor hexadecim
mal p.ej. #FF0
0000
Valores posibles para esta
Un co
olor HSL ó HSL
LA p.ej. hsl(0, 100%, 50%)
ad
propieda
Un co
olor designado
o con nombre
e (p.ej. red)
inherrit (el color se heredará del element o pad

dre)
background-c
h1 {b color:#ffff00
0;}
Ejemplo s aprendera
aprogramar.c
com
.destt acado {back
kground-colo
or: red;}
edad backgrround-color es bast ant e simple. De

La propie e hecho, ya
a la hemos ut ilizado p ara poner
ejemplos básicos sob
bre select ore
es css y ot ras cuest iones
s a lo largo del curso, p or lo que no
o vamos a
ext endern
nos en ella.
Un aspectt o int eresantt e de est a p ropiedad es que en ocas

siones puede
e servirnos p
para visualiza
ar las cajas
que confo
orman una página w eb
b. Por ejem plo consideremos los element
e os h
h1 y h2 que
e t enemos
definidos en el código e amos usando para el curso:
o HTM L que est
<
<body>
<
<div>
<
<h1>Port al we
eb aprenderap
programar.co m</ h1>
<
<h2>Didáct n de la programación</ h2>
ica y divulgación
< div>
</
< >…
<br/
mos est os estt ilos:

Si aplicam
/ * Curso CSS
amar.com* /
body {background-colo r: yellow;}
h1{backgrround-color: blue;}
b
h2{backgrround-color: r ed;}
om, 2006-2029
Color de fondo. Propiedad background-color CSS.
Vemos con claridad cuáles son las cajas que int ervienen. Si quisiéramos ver la caja div que envuelve a
los t ít ulos h1 y h2 bast aría con añadir div {background-color: pink;} con lo que veríamos algo así:
Al visualizar las cajas podemos ent ender mejor qué es lo que est á ocurriendo en una página web. No
siempre será necesario, de hecho cuando t engamos un poco de experiencia práct icament e las iremos
visualizando ment alment e sin necesidad de aplicar un color de fondo, o usaremos una herramient a de
análisis para est udiarlas, pero al comenzar a t rabajar con CSS nos podrá servir de ayuda en algunas
ocasiones.
Si analizamos la imagen y el result ado obt enido podemos ver algunas cosas curiosas:
a) A pesar de que en el código no t enemos ningún element o que separe el div del body, el div
aparece “ separado” del body t ant o por arriba como por la izquierda como por la derecha. Lo
comprobamos porque se ve el fondo amarillo. ¿Por qué exist e esa separación?
b) El h1 est á perfect ament e ajust ado al div: no exist e separación alguna ni por arriba ni por la
izquierda ni por la derecha. El borde azul est á perfect ament e alineado con el borde rosado. En
cambio, hacia abajo el h1 est á separado del h2, si no exist iera esa separación no se vería el
fondo rosado. Sin embargo en el código no hemos especificado ningún element o que dé lugar a
esa separación ent re h1 y h2. ¿Por qué aparece est a separación?
Aparent ement e la única división “ normal” ent re element os vendría dada por el <br/ > que est á debajo
del div, y dado que el br es un element o separador sería lógico que creara un espacio ent re la caja del
div y la siguient e caja dent ro del document o HTM L.
La razón para esos espacios que apreciamos se debe a los est ilos por defect o que int roduce el
navegador para los element os div, h1 y h2. Hablaremos de ello más adelant e, de moment o nuest ro
objet ivo ha sido únicament e conocer est a propiedad y ver cómo nos puede ayudar a conocer el modelo
de cajas CSS y el funcionamient o del navegador. M ás adelant e hablaremos de por qué aparecen esas
separaciones ent re element os y de cómo podemos modificar o anular esos est ilos que por defect o
int roducen los navegadores.
Recordar que se puede añadir un grado de t ransparencia a un color de fondo definiendo el color con
not ación rgba ó hsla como hemos explicado en apart ados ant eriores del curso.
Color de fondo. Propiedad background-color CSS.
EJERCICIO
Crea un document o HTM L donde la vent ana del navegador est é dividida en 6 part es, cada una con su
borde. En cada división pon como color de fondo lo siguient e:
a) División 1: un color expresado con not ación RGB.
b) División 2: un color expresado con not ación RGBA.
c) División 3: un color expresado con not ación hexadecimal.
d) División 3: un color expresado con not ación HSL.
e) División 4: un color expresado con not ación HSLA.
f) División 5: un color designado con un nombre.
En cada división incluye un t ext o con la not ación y color empleado. Por ejemplo <<Not ación RGB, color
218, 165, 32>>. Para comprobar si t us respuest as son correct as puedes consult ar en los foros

Versiones CSS.
C Algo de his
storia y perspec
ctiva.
VERSIONE
ES CSS
Comproba
arás que a lo
o largo del curso no hem
mos dedicado
o apenas una
as palabras a hablar de cuáles
c son
las versio nes de CSS. El mot ivo pa
ara ello es qu
ue con est e curso
c pret en
ndemos t ran smit ir más la
a lógica de
CSS y sus fundament os
o que las esspecificidade
es concret as que t iene ca
ada versión. No obst ant e,
e haremos
ahora algu
unas reflexio
ones y coment arios sobre
e las version es CSS.
EL W ORLD
D W IDE W EB
B CONSORTI UM O W 3C
CSS es un lenguaje cu
uya definición
n ha sido cre
eada por el World
W Wide Web Consorrt ium, cuyas
s siglas son
W3C. Se t rat a de un consorcio
c int ernacional que
q produce especificacio
ones, recom endaciones, manuales
y herram ient as en re esarrollo de int ernet . El W3C es un organismo que cuent a ent re sus
elación al de
principale
es promot orres al M IT (M ology, USA), el ERCIM (European
( assachussset s Inst it ut e of Techno
Research Consort ium
m for Inform at ics and M at hemat ics,, part icipado
o por nume
erosos países
s), la Keio
Universit y (Japón) y la
a Beihang Un
niversit y (Chi na).
Uno de lo
os objet ivoss principales del W3C ess generar es
st ándares: document
d os donde se definen
d las
sint axis d e lenguajes y prot ocoloss que int ervie
enen en el desarrollo
d de
e int ernet . El objet ivo es promover
que las empresas,
e in st it uciones y personas que
q an en desar rollos w eb ut
part icip an o t rabaja u ilicen un
mismo lenguaje y se pongan de acuerdo a la
a hora de ge uct os relacio nados con
enerar soft w are y produ
int ernet . ¿Por qué decimos
d que
e la propied
dad para da
ar color de fondo es b ackground-c
color y no
back_colo orque la forrma de nom brar est a prropiedad ha sido definid
or ó bcol? Po da por el W3
3C de est a
manera y t odas las em
mpresas, instt it uciones y personas
p lo han
h acept ado
o.
No siemp
pre lo que propone
p el W3C
W es ace
ept ado. El W3C
W emit e propuest
p as, no leyes de
e obligado
cumplimie
ent o porque
e no t iene ca
apacidad leg o. Hay ot ras inst it uciones o grandes empresas
gal para ello
que t amb
bién hacen propuest
p os, y en ocassiones esas propuest as o crit erios
as o t ienen crit erios propio
alt ernat ivvos hacen que
q haya dist
d int os gr upos de t rabajo
r ándares o forma de
y di st int os est á
funcionam
mient o del so
oft w are.
Por últ imo

o, hay que t ener
e en cuen
nt a que el W3C
W est á form n equipo de personas qu e t ambién
mado por un
comet en errores y qu
ue “ lo que di ce el W3C” no or ni lo más usado. No
n siempre t iene por qu é ser lo mejo
obst ant e, hoy día el W3C
W es la pri ncipal inst it ución
u de refe
erencia a la hora
h de crearr y difundir est
e ándares
relacionad
dos con los desarrollos
d w eb, ent re elllos el CSS.
LAS VERSIONES DE CS
SS
El W3C t r abaja cont in uament e pa

ara mejorar el
e lenguaje CSS,
C corrigien
ndo errores e incorporan do nuevas
funcionaliidades. Ant es
e de llegar a una especcificación o recomendac
r ción oficial se t rabajan numerosos
n
borradore
es que son somet idos a revisión y co
orrección. Cu
uando se alca
anza un relat ivo grado de
d acuerdo
ent re los miembros d el W3C se lib
bera lo que se
s denomina
a una recome
endación ofiicial de CSS ó versión a
modo de propuest a p ara su uso y aplicación por
p t odas las empresas, in
nst it uciones y personas.
om, 2006-2029
Versiones CSS. Algo de historia y perspectiva.
Las versiones de CSS a lo largo de la hist oria han sido* :
CSS 1: publicada en 1996.
CSS 2.1: publicada en 2004.
CSS 4: se est ima que pueda ser especificación oficial en 2019.
* Las fechas indicadas son sólo orient at ivas, la realidad es que una version no aparece un día, sino que
t iene un largo proceso de desarrollo que a veces dura años. Con CSS 3 se int rodujo una fuert e
modularización o división por apart ados de CSS, de modo que algunos módulos se encont raban en fase
de borrador mient ras ot ros se convert ían en especificación oficial.
A la pregunt a de ¿qué versión usar? damos la siguient e respuest a: la que sea de más amplia difusión en
el moment o en que est és haciendo un desarrollo w eb. Ten en cuent a que CSS en general va
mant eniendo su sint axis y lógica con las diferent es versiones, y que en general una nueva versión
mant iene las caract eríst icas de las ant eriores y además int roduce nuevas posibilidades. Por t ant o t us
conocimient os de CSS t e seguirán valiendo aunque aparezcan nuevas versiones. Por ejemplo, algunas
propiedades que aparecieron con CSS 1, ent re ellas background-color, siguen usándose en CSS 3 y CSS
4. Ot ras propiedades aparecieron con CSS 2 ó 2.1, ot ras han aparecido con CSS 3 y ot ras con CSS 4.
Por ot ro lado, hay que t ener en cuent a que “ seguir con exact it ud” una versión no significa que nuest ra
w eb vaya a funcionar perfect ament e, debido a que no t odos los navegadores reconocen t odas las
propiedades o sint axis que se definen en una versión. También puede suceder que un navegador sí
reconozca la sint axis pero no ofrezca el mismo result ado que ot ro, lo cual da lugar a problemas en la
visualización de páginas w eb.
Conseguir buenos result ados con CSS pasa por est ar al día de la especificación del W3C pero t ambién
por seguir las novedades de la w eb, de los navegadores y siendo práct icos, por hacer muchas pruebas y
comprobaciones con dist int os navegadores o herramient as específicas para est e fin.
EJERCICIO
Busca información en int ernet e indica para cada una de las siguient es propiedades CSS en qué versión
de CSS fueron int roducidas y si siguen est ando vigent es en la act ual versión de CSS: a) clip , b) font -
w eight c) overflow d) animat ion. Para comprobar si t us respuest as son correct as puedes consult ar en
los foros aprenderaprogramar.com.

Documenta
ación oficial CSS
S, W 3C Schools
s y W 3C validattor
SERVICIOS DEL W 3C
oment ado qu
Hemos co ue el est ánd ar CSS es de
efinido por el
e consorcio int ernaciona
al W3C. El W3C
W ofrece
algunos servicios
s de int erés a t ra
avés de int ernet
e , como la posibilida
ad de consu lt ar la docum
ment ación
oficial rela n CSS, una w eb divulgat i va y con ejemplos sobre
acionada con n de CSS en la práct ica
e la aplicación
y la valida
ación (comprrobación de cumplimientt o del est ánd
dar) CSS de páginas
p w eb..
DOCUM ENTACIÓN OF
FICIAL CSS
La w eb oficial
o del co nsorcio W3C g/ . A t ravés de est a w eb podemos acceder a
C es ht t p:/ / w w w .w 3.org
dist int os cont enidos del t rabajo de la W3C, que no solo
o t rat an sob
bre CSS, sino
o en generall sobre las
as relacionad
t ecnología das con el desarrollo
d w eb
e como HTM
M L, CSS, Javvascript , gráfficos, audio y video en
ent ornos w eb, prot occolos, et c.
Desde la página princcipal de W3C

C podemos navegar
n hastt a llegar a la
a página oficial CSS (cuya
a URL será
similar a est
e a: ht t p:/ / w w w .w 3.org nt rar numer osa información sobre
g/ St yle/ CSS/ ) donde pod remos encon
CSS (en i nglés). Dentt ro de est a información est án dispo
onibles las especificacio
e ones oficiales
s CSS, por
ejemplo en
e ht t p:/ / w w w .w 3.org/ TR/
T select ors// podemos consult
c ar la especificació
e ón oficial de select ores
para CSS. El principal problema de
e recurrir a l a document ación oficial para el apre
endizaje es que
q result a
demasiad
do ext ensa y demasiado t écnica. Tam
mbién exist en
n numerososs document o
os t écnicos, algunos
a de
los cuale
es son reccomendacio nes, ot ros pre-recom endaciones (se denom
minan cand
didat os a
dación) y ot ros borrado res. Est e exceso de info
recomend e present aci ón result a
ormación y su forma de
poco út il de cara a ad
dquirir una formación
f prráct ica y básica sobre CS
SS. No obst ant e, convien
ne conocer
ncia porque puede
su exist en p ser ne
ecesaria su consult a en algún
a momen
nt o.
RECURSO
OS DIDÁCTICO
OS SOBRE CS
SS
Indicado ya que la document

d aci ón oficial CS
SS puede se
er demasiad o árida o exxt ensa, ¿qué
é recursos
exist en qu
ue sean más didáct icos y educat ivos?
? Exist en num
merosas alt ernat
e ivas.
er lugar señ alaremos la página w eb ht t p:/ / w w w .w 3schoo ls.com/ . Estt a plat aform
En prime ma alberga
t ut orialess y documen as t ecnologías relaciona
nt ación sobrre numerosa adas con el desarrollo w eb como
HTM L, CS P, SQL y mu chas ot ras. Cont
SS, Javascriptt , AJAX, PHP C rariame
ent e a lo que
e pueda parrecer, est a
w eb pert enece a una
a empresa privada
p y no
o est á en ab
bsolut o relaccionada con el consorcio
o W3C. La
similit ud del
d nombre de dominio result a, cuando menos, confusa. Ta
ampoco hay indicaciones
s explícit as
en la platt aforma de la no-relació
ón con el W3C.
W Los resu uelen aparecer en los
ult ados de w 3schools su
primeros lugares cuan
ndo se hacen
n consult as en
e buscadore
es, de ahí qu e muchos ussuarios o pro
ofesionales
relacionad
dos con int ernet
e piensen
n que w 3sch
hools es un servicio
s de W3C,
W o la realidad es que no
cuando
es así. De
ebido a est os
o hechos y a ot ros aspe
ect os negat i vos que se pueden ach acar a w 3sc
chools han
surgido voces
v crít ica
as que recomiendan no
n usar estt a w eb, en
nt re los qu e podemos
s dest acar
ht t p:/ / w w w .w 3fools.ccom/ .
om, 2006-2029
Documentación oficial CSS, W 3C Schools y W 3C validator
Nosot ros no recomendamos el uso de w 3schools, pero t ampoco lo desaconsejamos. Simplement e

pensamos que debe conocerse qué es y cuáles son sus vent ajas e inconvenient es. Como vent ajas
señalaremos est as:
- Se t rat a de una plat aforma w eb con una buena est ruct uración de los cont enidos y una buena
present ación.
- Tiene un sist ema de cont enidos, ejemplos y pruebas basadas en la edición de código on-line
que en general result an bast ant e didáct icos y facilit an el aprendizaje.
- Es accesible grat uit ament e.
Como inconvenient es señaleremos los siguient es:
- Parecen aprovecharse de la confusión y similit ud de nombre con el W3C, aparent ando ofrecer
información oficial cuando no la es.
- Ofrecen cursos y cert ificados previo pago que no est án avalados por organismos o empresas
con garant ías suficient es. Su publicidad puede result ar engañosa.
- En general se t rat a de w ebs bast ant e cargadas de publicidad que se ent remezcla con los
cont enidos, llegando a result ar molest a.
- Part e de la información que ofrece est a w eb puede ser no correct a o est ar no act ualizada.
La mayor part e de los desarrolladores w eb o diseñadores w eb han ut ilizado en algún moment o

w 3schools. Nosot ros simplement e t e aconsejamos que si la usas, conozcas qué es, sus vent ajas e
inconvenient es.
A cont inuación vamos a ofrecer un list ado con recursos didáct icos sobre CSS:
Recurso URL
Tutorial CSS de aprenderaprogramar.com ht t p:/ / w w w .aprenderaprogramar.com/ index.php?opt ion=com_

cont ent & view=cat egory& id=75& It emid=203
Documentación CSS de M ozilla ht t ps:/ / developer.mozilla.org/ en-US/ docs/ Web/ CSS
W iki de la W 3C para CSS ht t p:/ / w w w .w 3.org/ w iki/ CSS
Documentación CSS de w ebplatform ht t p:/ / docs.w ebplat form.org/ w iki/ css
Documentación CSS de sitepoint ht t p:/ / reference.sit epoint .com/ css
Documentación CSS de w3schools ht t p:/ / w w w .w 3schools.com/ css/
Nuest ra recomendación es que para el aprendizaje inicial de CSS uses un solo curso y t rat es de seguirlo
de forma complet a y hast a el final, consult ando ot ras fuent es sólo para cuest iones punt uales. Si t rat as
de adquirir una formación básica recurriendo a varias fuent es de información al mismo t iempo es
posible que acabes perdiendo el t iempo y haciéndot e un lío. Una vez t engas las bases de CSS y algo de
experiencia, será más fácil movert e consult ando la mult it ud de recursos e información que exist en en
libros, revist as y páginas w eb.
VALIDACIÓN CSS CON W 3C VALIDATOR
Hay un servicio de la W3C que puede result ar de relat ivo int erés: el W3C CSS validat or o validador CSS
de la W3C. Se accede a t ravés de w 3.org escogiendo la opción validat ors: CSS. También se puede
acceder direct ament e en la URL ht t p:/ / jigsaw .w 3.org/ css-validat or/
Una vez en la página con el formulario de ent rada, bast a int roducir una URL para que el cont enido de
esa página w eb sea somet ido a análisis y aparezcan los result ados del mismo. Si el CSS de la w eb
cumple con la especificación oficial aparece un mensaje informat ivo y se nos ofrece la posibilidad de
insert ar los logos de validación W3C en nuest ra página w eb.
En caso de que la página w eb no cumpla la especificación, se nos indican cuánt as falt as se han
encont rado y cuáles son. Las falt as se dividen en falt as menores (w arnings o advert encias) y falt as
mayores o errores.
El servicio de validación CSS puede ser una herramient a út il para personas que est án aprendiendo y
para profesionales, al permit irles ident ificar en qué part es de su código no est án cumpliendo con la
especificación oficial. No obst ant e, t e recomendamos que no pierdas demasiado t iempo t rat ando de
que la página w eb que est és creando t enga cero errores por un mot ivo simple: no t ener errores en el
validador no garant iza que t u w eb se vaya a visualizar correct ament e. M uchas personas pierden horas
t rat ando de corregir el código para pasar la validación W3C cuando su w eb no t enía ningún problema
de visualización. Ent onces, ¿para qué perder el t iempo en ello? Sí, siempre es “ bonit o” pasar
limpiament e un validador, la cuest ión que debemos t ener en ment e es si merece la pena el t iempo que
vayamos a invert ir.
A modo de curiosidad, piensa en algunas páginas w eb import ant es que conozcas (por ejemplo de algún
diario, alguna t elevisión, alguna empresa import ant e) y pásale el validador CSS de W3C. Encont rarás
que muchas de ellas no superan la validación, y sin embargo son w ebs de prest igio y con millones de
visit as. Si estas grandes w ebs no se preocupan de t ener una validación W3C perfect a ¿merece la pena
obsesionarse con no t ener errores de validación CSS en nuest ras páginas w eb? A modo de curiosidad t e
diremos que en el moment o de escribir est e curso hemos pasado el validador CSS a facebook.com y
hemos obt enido como result ado 24 errores. En la w eb oficial del gobierno de Est ados Unidos, 102
errores, y así podríamos cont inuar una larga list a de w ebs import ant es que no superan la validación.
Pero repet imos: lo import ant e no es superar la validación, lo import ant e es que la w eb funcione y se
vea correct ament e.
Sobre los logos del W3C de validación, su presencia en una página w eb no asegura que la página w eb
pase el validador, ya que se t rat a de simples imágenes que cualquiera podría insert ar en su w eb. La
forma de saber si una w eb cumple la validación es pasar su URL por el validador CSS de la W3C.
EJERCICIO
Crea un document o HTM L que const e de los siguient es element os: un t ít ulo h1 con el t ext o
“ Aprendizaje de la programación” . Una división div con id menú que cont enga: un t ít ulo h2 con el t ext o
“ M enú” y una list a de element os no ordenados (ol) con los siguient es it ems: Programación básica,
Programación int ermedia y Programación avanzada. Finalment e, una división div con id foot er con el
t ext o “ Curso aprenderaprogramar.com” . Est ablece diferent es valores de las propiedades color,
background-color y font -size para:
a) Los element os h1
b) Los element os h2
c) Los element os ol y part es int ernas a est e (element os li de list as).
d) El element o con id foot er.
A cont inuación ut iliza el W3C validat or y comprueba si no t e indica ningún error, o qué errores o
w arnings t e indica y t rat a de ident ificar el por qué de ellos y corregirlos. Puedes comprobar si t us
respuest as son correct as consult ando en los foros aprenderaprogramar.com.

Unidades de medida CSS. Relativas, abso
olutas o híbrida
as.
UNIDADE
ES DE M EDID
DA
Cuando t rabajamos con

c CSS neccesit aremos especificar con frecuen
ncia anchura
a, alt ura, m árgenes o
t amaño de
d dist int os element
e os como
c cajas cont
c enedoras de dist int os
o t ipos, imá
ágenes, t ext o,
o et c. CSS
a especificacción de valo res relacion ados con el t amaño de dist int as ma
permit e la aneras para facilit ar el
t rabajo a los program adores y dise
eñadores w eb.
e
Las unida
ades de med
dida CSS se dividen en dos
d grupos: unidades de
e medida re
elat ivas y un
nidades de
medida ab
bsolut as. Tam
mbién se hab
bla a veces de
d unidades híbridas.
Las unidades de med ida relat ivas son aquella

as que det erm
minan un t amaño en fun
nción de ot r o t amaño.
Por ejem plo si indicamos que el ancho de u n element o como 50%, dicho porce
ent aje t iene que est ar
referido al d un ancho del 50% pue
go ¿de qué? En el caso de
a 50% de alg ede est ar refferido norma
alment e al
50% del ancho
a que t enga
e el cont enedor
e del element
e o. La
as unidades relat
r ivas alu den a un ele
ement o de
referencia
a. Veremos que
q exist en dist
d int os elem
ment os que se t oman co
omo referenccia.
Las unidades de med ida absolut as

a son aquelllas que det erminan
e el t amaño
a de alg
go de forma
a concret a,
específica
a y medible. Por ejemplo
o si decimos que un t ama
año de un diiv debe ser d
de 150 mm de
d alt o, no
hay duda al respect o. El div t omará exact ame or (aunque p uede haber pequeñas di st orsiones
ent e ese valo
en funció n del disposiit ivo en que se visualice) y si cogemo
os una regla escolar
e medimos, el div t endrá
y lo m
esa medid
da (aproxima
adament e 15
50 mm).
Las unidades de mediida se aplican a numerossas propieda pezaremos d est acando

ades CSS de las que emp
dos de el las: w idt h (a ment o). La siint axis a em plear es la
ancho de un element o) y height (alt o de un elem
siguient e::
Element o {w
select orDeE w idt h: valorDe
ePropiedad Unidades
U ;
h eight : valorD
DePropiedad Unidades;}
UNIDADE
ES DE M EDID
DA ABSOLUTA
AS
A cont inu ación indicamos las unid

dades de med
dida absolutt as disponibl es en CSS:
Unidad
d Símbo
olo Ejem
mplo aprende
eraprograma
ar.com Ob
bservaciones
s
Pulgada in div {bacckground-colo

or:pink; widt h:: 7in;} 1 pulgada son
n 25.4 mm
Centímettro cm div{backkground-colorr:pink; widt h: 20cm;}
div{backkground-colorr:pink; widt h:
M ilímet ro mm
m
1000mm
m;}
om, 2006-2029
Unidades de medida CSS. Relativas, absolutas o híbridas.
Unidad Símbolo Ejemplo aprenderaprogramar.com Observaciones

1 punt o equivale a 1/ 72 pulgadas ó
Punto pt div{background-color:pink; font -size: 24pt ;}
aprox. 0.35 mm
1 pica equivale a 12 punt os o aprox.

Pica pc div{background-color:pink; font -size: 2pc;}
4.23 mm
Tant as veces los punt os visibles que

t enga la pant alla donde se visualice
Pixel* px div{background-color:pink; font -size: 24px;} la página w eb como se especifique.
* Puede considerarse una unidad

híbrida, ni absolut a ni relat iva.
Prueba a aplicar est as reglas sobre el código HTM L de prueba que est amos usando en el curso.
Las unidades de medida absolut as en general podemos decir que se ut ilizan poco en desarrollos w eb,
except o el pixel que es una unidad especial y, en menor medida, el punt o. Pulgadas, milímet ros, picas,
et c. t ienen más sent ido en t rabajos de impresión sobre papel. El pixel t iene aplicaciones diversas
mient ras que la unidad pt se usa a veces para definir el t amaño de let ra (t amaño de fuent e).
El mot ivo para que las unidades absolut as se usen poco es que no permit en adapt arse al t amaño de la
pant alla que ut ilice cada usuario. Hoy día, exist en grandes pant allas (por ejemplo de 32 pulgadas de
unos 480 x 730 mm) pero t ambién pequeñas pant allas (por ejemplo smart phones con pant allas de 7
pulgadas de unos 90x170 mm de t amaño). Si queremos most rar un cont enido y lo definimos en
unidades absolut as, por ejemplo con un ancho de 300 mm y un alt o de 200 mm, cuando lo veamos en
un monit or grande nos parecerá pequeño; por el cont rario cuando lo veamos en un disposit ivo
pequeño como una t ablet nos aparecerá cort ado por ser excesivament e grande. Si en vez de unidades
absolut as indicamos una unidad relat iva como 100%, el cont enido se adapt ará al ancho disponible para
cada disposit ivo, lo cual result a vent ajoso. En realidad la gran variación de t amaño de los disposit ivos
supone un problema que no es nada fácil de solvent ar, ni siquiera ut ilizando unidades de medida
relat ivas. Será uno de los campos en que la experiencia y la práct ica result en fundament ales en el
t rabajo con desarrollos w eb.
El pixel es una unidad de medida un t ant o especial. Comprobaremos que se alude a est a medida como
una unidad relat iva, absolut a o híbrida según dónde consult emos. La realidad es que puede
considerársela de cualquiera de est as t res maneras según dónde cent remos nuest ra at ención. En
nuest ra opinión es más “ just o” considerarla unidad relat iva porque no t iene un valor absolut o y único,
sino que present a variaciones según los disposit ivos. No obst ant e, est as variaciones son relat ivament e
pequeñas o moderadas, de ahí que muchas veces se lo considere una unidad absolut a.
Una pant alla se divide en miles de pequeños punt os visibles denominados pixeles. Cuando dist int os
grupos de pixeles t oman dist int os colores se forman las let ras, imágenes o formas que podemos ver en
las pant allas. Por ejemplo si sit uamos pixeles negros uno junt o a ot ro en horizont al sobre un fondo
blanco, se acaba formando una línea negra horizont al. Si en vez de en horizont al cada pixel est á
ligerament e desplazado hacia la derecha y ligerament e por encima del ant erior se formará una línea
negra inclinada. Por el mismo principio se forman let ras, imágenes, figuras, et c.
Las pant allas suelen t ener una resolución expresada expresada en pixeles, por ejemplo 1280 x 800 px,
donde el primer valor indica el número de punt os horizont ales y el segundo valor el número de punt os
vert icales en que se divide la pant alla (que podemos ver como una cuadrícula de minúsculos punt it os).
El t amaño real del pixel considerado como “ un cuadradit o muy pequeño” puede variar ent re
disposit ivos, por ejemplo podremos encont rar disposit ivos donde un pixel mida 0.20 mm y ot ros donde
mida 0.30 mm. Las diferencias ent re disposit ivos pueden ser pequeñas cuando hablamos de t amaños
de pant alla similares, pero se hacen apreciables para t amaños de pant alla muy diferent es.
El análisis t eórico de las resoluciones de los disposit ivos y unidades de medida puede ser ext enso, por lo
que nosot ros vamos a opt ar por considerar al pixel, desde el punt o de vist a práct ico, una unidad de
medida híbrida. Absolut a en cuant o a que define unas dimensiones más o menos exact as para
disposit ivos similares (como monit ores de ordenadores), relat iva en cuant o a que sus dimensiones
varían cuando cambiamos el t ipo de disposit ivo (por ejemplo en un smart phone el pixel t endrá dist int a
dimensión que en un monit or de 32” ). Est a definición puede ser poco exact a desde el punt o de vist a
t eórico, pero a efect os práct icos nos va a result ar suficient e para t rabajar en desarrollos w eb.
Consideraremos el pixel como un pequeño punt it o visible de una pant alla.
El pixel es una unidad de medida no t an rígida como pueda ser el mm y no t an flexible como pueda ser
el % u ot ras unidades relat ivas. Permit e fijar t amaños de forma relat ivament e precisa, pero a su vez con
un ciert o grado de adapt ación al disposit ivo en que se visualiza una w eb. Se usa con bast ant e frecuencia
en dist int os aspect os del diseño como iremos comprobando a lo largo del curso.
UNIDADES DE M EDIDA RELATIVAS
A cont inuación indicamos las unidades de medida relat ivas disponibles en CSS:
Unidad Símbolo Ejemplo Observaciones aprenderaprogramar.com
Porcentaje % #menu1 {w idt h: 50%;} Porcent aje relat ivo al element o cont enedor.
Tant as veces el t amaño que sea de aplicación

Relativa al como se indique. Por ejemplo si el t amaño de
em #menu1 {font -size: 2.65em;}
tamaño de letra let ra de aplicación es 12 pixeles, 1 em son
12px, 2 em son 24 px, 3 em son 36 px, et c.
Tant as veces la alt ura de la let ra x minúscula

como se especifique. Por ejemplo si la x
Relativo a la x
ex #menu1 {font -size: 2.65ex;} minúscula que se debería most rar mide 10mm,
minúscula
1 ex son 10 mm, 1.5ex son 15mm, 2ex son
20mm, et c.
Tant as veces los punt os visibles que t enga la

pant alla donde se visualice la página w eb como
Pixel* px #menu1 {font -size: 24px;} se especifique.
* Puede considerarse una unidad híbrida, ni

absolut a ni relat iva.
¿QUÉ UNIDAD USAR?
Las unidades est rict ament e absolut as como el mm son poco habit uales en los diseños w eb y podemos
decir que práct icament e no se usan.
Son de uso muy habit ual unidades relat ivas como el % y el em porque permit en la adapt ación flexible a
los dist int os t amaños de pant alla de los disposit ivos. El % nos permit e est ablecer proporciones
adecuadas en relación a la pant alla y el em en relación al t amaño de t ext o que se est é usando.
Por últ imo el pixel es t ambién muy usado pues permit e que det erminados element os de la w eb se
visualicen con t amaños bast ant e precisos, evit ando que la w eb t enga cambios drást icos de aspect o
cuando se cambie de disposit ivo.
Usa preferent ement e %, em y px en aquellas hojas de est ilo que t engas que crear. Usa ot ras unidades
cuando razonadament e result en necesarias.
EJERCICIO
Los navegadores aplican un t amaño por defect o a los t ít ulos h1 a h6, aunque est os t amaños no son
siempre los mismos sino que dependen del navegador que se emplee. Para el navegador que est és
empleando, divide la página w eb en una cuadrícula con 5 espacios a lo ancho y 6 espacios a lo alt o, t al y
como se ve en la siguient e t abla. En cada espacio, muest ra un t ext o y la forma en que se ha definido el
t amaño. Por ejemplo: h1 (predefinido), h1 (px), h1 (em), h1 (pt ), h1 (%). El result ado ha de ser que t odo
se vea del mismo t amaño y modo, pero sin embargo la forma de definir el est ilo será diferent e en cada
caso. Para comprobar si t us respuest as y código son correct os puedes consult ar en los foros
Orient ación: h1 suele ser 24px ó 2em en la mayoría de los casos, pero t endrás que comprobarlo en el
navegador que est és empleando.
Tít ulo Tamaño px Tamaño em Tamaño pt Tamaño %
h1
h2
h3
h4
h5
h6

Propiedade
es CSS width y height.
h Ejemplo
os y ejercicios.
W IDTH Y HEIGHT
Dos prop iedades básicas en CSS son widt h (ancho) y height (alt o). Las
L usaremo
os con frecue
encia para
ar el t amañ
det ermina ño de mucchos elemen
nt os en nue
est ro diseño
o CSS. Est a
as propiedad
des serán
designada
as con algun
na de las uniidades de medida
m que hemos
h est ud
diado previament e, usan
ndo la que
result e m ás adecuada
a en función del element o al que se vayan
v a aplicar.
PROPIEDA
ADES CSS wid
dth y height
Valor po
or defecto aut o (en est e cas
so, es det erm
minado por e
el navegador )
Elem
ment os t ipo block
b y elem ent os insert ados en una
a posición
Aplicable a que son reempla
azados por un
u objet o (ent re ellos im
mg, input ,
t ext area,
a select , object
o )
¿Se here
eda directam
mente? No
Una unidad
u de medida absolut a como in, cm,, mm, pt , ó pc
c
Valores posibles para esta Una unidad

u de medida relat iva como
c %, em ó ex
propieda
ad Una unidad
u de medida híbrida como
c px (pixel)
inherrit (indica que se hereda del element o pa

adre)
ht ml {height : 100
0%;}
Ejemplos aprendera
aprogramar.c
com bodyy {backgroun d-color: yell ow ; w idt h: 9
900px;}
.logo
o-module {wiidt h: 16em;}
mos que la sin

Recordem nt axis a emp
plear es la sig
guient e:
select orDeE
Element o {w
w idt h: valorDe
ePropiedad Unidades
U ;
h eight : valorD
DePropiedad Unidades;}
Un aspectt o import antt e es que lass propiedade

es w idt h y height
h no son
n aplicables a cualquier element o.
Por ejem plo elementt os de t ipo inline com o <span> … </ span> n o admit en est as propie
edades. Si
int ent amo
os aplicar w idt h o heig ement o que no lo admiit e, el naveg
ght a un ele gador simple
ement e lo
ignorará.
Las propie
edades widtt h y height no
n siempre se
s especifican. Se puede especificar una de ellas
s, ambas o
ninguna. Para aquella
a propiedad que no se especifica,
e e element o t omará com
el mo anchura y alt ura el
valor que por defect o o por heren
ncia le sean de
d aplicación
n.
om, 2006-2029
Propiedades CSS width y height. Ejemplos y ejercicios.
No debe exist ir espacio ent re el valor est ablecido y las unidades cuando escribamos el código. Por
ejemplo si est ablecemos #menu1 {widt h: 80%;} no debe exist ir espacio ent re 80 y %. Si est ablecemos
#menu1 {widt h: 600px;} no debe exist ir espacio ent re 600 y px. En el caso de unidades que se expresen
con decimales, la separación decimal debe indicarse con un punt o en lugar de con una coma. Por
ejemplo #menu1 {font -size: 12.75pt ;} es correct o pero #menu1 {font -size: 12,75pt ;} es incorrect o y no
será int erpret ado por el navegador.
En el caso de decimales inferiores a uno, se admit e omit ir el 0 previo al punt o decimal o el 0 de

t erminación. Por ejemplo sería t an válido escribir #margen1 {widht : 0.90%;} como #margen1 {widht :
.9%;} como #margen1 {widht : .90%;}
En el caso de valores cero (nulo), no es necesario indicar unidades de medida. Por ejemplo
#soundCode1 {widht : 0px;} es igual de válido que #soundCode1 {widht : 0;}
EJEM PLO PRÁCTICO
Define los siguient es est ilos para el document o HTM L que est amos usando como base de ejemplo para
el curso y visualiza el result ado:

ht ml{background-color: pink;}
body {background-color: yellow; widt h: 800px;}
h1{background-color: blue; w idt h: 50%;}
h2{background-color: red; widt h: 8em}
Con los conocimient os que hemos ido adquiriendo a lo largo del curso ya hemos de ser capaces de
int erpret ar qué es lo que visualizamos. Vamos a hacerlo. El fondo se muest ra rosa porque hemos
definido que el background-color del element o ht ml sea rosado. En amarillo vemos el element o body.
El ancho del element o body es de 800 px. El element o body no t iene el mismo ancho que el element o
ht ml por dos mot ivos: por un lado, la pant alla donde se ha visualizado la web para capt urar la imagen
que hemos most rado t iene una resolución de 1024 x 768 pixeles. Como nosot ros hemos definido que el
element o body t endrá 800 px, el rest o que falt a hast a los 1024 px disponibles se ven con el color de
fondo del element o ht ml. Ot ro mot ivo por el que el element o body no t iene el mismo ancho que el
element o ht ml es que el navegador int roduce unos márgenes por defect o (ya veremos más adelant e
cómo se pueden anular). Prueba a cambiar el widt h de body y ponle dist int os valores como 200 px y
2400 px. Para valores de ancho que exceden el t amaño máximo en pixeles de anchura de la pant alla el
navegador incorporará aut omát icament e unas barras de desplazamient o o scrolls.
El element o h1 con el t ext o “ Port al w eb aprenderaprogramar.com” t iene un ancho del 50%. ¿Pero el
50% de qué? Pues el 50% de su element o cont enedor (element o dent ro del cual est á o element o
padre). Como su element o cont enedor es body y ést e t iene 800 px de ancho, el ancho de h1 es la mit ad
de est e valor, es decir, 400 px.
Con el element o h1 comprobamos una cosa: que el t ext o se muest ra en dos líneas y que el t amaño del
t ext o de la segunda línea excede en anchura al t amaño de su element o cont enedor, el h1 con anchura
de 400 px. Por t ant o ya sabemos que el t ext o ocupa algo más de 400 px y por ello se sale del espacio
azul y ocupa part e del espacio amarillo. ¿No sería más lógico que el t ext o se cort ara cuando llegara al
límit e de su cont enedor? ¿O que siguiera en la siguient e línea en vez de salirse hacia la derecha? Quizás,
pero el comport amient o que observamos est á det erminado por el navegador que est amos usando. Se
est á aplicando la siguient e regla: si el t ext o excede el ancho de su element o cont enedor, se crean
nuevas líneas aument ando la alt ura (height ) aut omát icament e siempre que exist an espacios dent ro del
t ext o que permit an int roducir el salt o de línea. Si no exist e espacio para int roducir ese salt o de línea, el
t ext o se expande hacia la derecha sobrepasando el t amaño de su cont enedor.
El element o h2 t iene fijado un widt h de 8 em. El em es una medida relat iva al t amaño de let ra que se
est é usando. ¿A qué t amaño de let ra en est e caso? Pues al t amaño de let ra del h2, que como no lo
hemos especificado, lo det ermina por defect o el navegador. El t amaño por defect o puede variar ent re
navegadores, pero de forma aproximada podemos decir que serán similares a est os: 16px (1em o
100%) como t amaño normal de fuent e, h1 de t amaño 2.25em (36px) y h2 de 1.5em (24px). En est e caso
hemos comprobado que el navegador que usamos aplica 24px de t amaño al h2, ent onces 8em se
int erpret a como 8 veces el t amaño de fuent e del element o, result ando 8x24 = 192 pixeles.
Para verificar que el navegador maneja la propiedad height aut omát icament e (a falt a de especificación
por nuest ra part e su valor es auto) y lo que ocurre cuando el t ext o no se puede ajust ar al espacio
disponible fíjat e en la siguient e imagen que refleja lo que ocurre al escribir un t ext o más largo:
Como vemos el t ext o se sale del element o cont enedor h1, superponiéndose sobre el element o padre,
body, y al t ener más ancho aún se expande hast a ocupar espacio del element o padre del padre o
“ abuelo” , el element o ht ml. Si el t ext o se alargara aún más el navegador int roduciría un scroll para
permit ir que se pueda leer.
Para ent ender mejor la diferencia ent re que widt h y height est én especificados con un valor o que no lo
est én y mant engan el valor por defect o “ aut o” fíjate en la siguient e imagen. Hemos escrit o un t ext o
muy largo en el h1 y en el lado izquierdo vemos lo que ocurre si definimos h1{background-color: blue;
widt h: 50%;} mient ras que en el lado derecho vemos el result ado para el código h1{background-color:
blue; w idt h: 50%; height : 150px;}
En el lado izquierdo vemos cómo el navegador adapt a aut omát icament e el valor height del h1 para que
el t ext o no se salga de él. Al no est ar especificada la propiedad height t iene valor “ aut o” . En el lado
derecho, al t ener rest ringida la alt ura del h1 a 150 pixeles, cuando el t ext o no cabe en su cont enedor
cont inúa expandiéndose hacia abajo.
Lo que nos int eresa de t odo est o es ser capaces de int erpret ar lo que ocurre cuando se obt iene una
visualización errónea o dist orsionada debido al código CSS. Hay que t ener en cuent a, sin embargo, que
los problemas de visualización en páginas web pueden t ener ot ros orígenes dist int os del CSS como el
código de programación, configuraciones de servidor o navegador, et c.
EJERCICIO RESUELTO
Crea una hoja de est ilos css de forma t al que el element o body t enga el 100% del ancho de la pant alla,
los element os h1 un 80% y los element os h2 un 60%. Escribe un CSS para obt ener la misma
visualización pero expresando los valores en pixeles.
SOLUCIÓN
A cont inuación proponemos una solución. Si t u respuest a no coincide con lo que indicamos o t ienes
dudas, puedes consult ar en los foros aprenderaprogramar.com.
La definición de est ilos en % sería la siguient e. Hemos añadido colores de fondo para que se visualice
mejor:

ht ml {background-color: pink; }
body {background-color: yellow; widt h: 100%;}
h1 {background-color: blue; w idt h: 80%;}
h2 {background-color: red; widt h: 60%;}
Comprueba el result ado al aplicar est os est ilos al código HTM L base que est amos usando para el curso.
Si quisiéramos realizar una definición equivalent e en pixeles, t endríamos que consult ar la resolución en
pixeles de la pant alla con que est amos t rabajando (en Windows se puede ver yendo al bot ón Inicio,
luego “ Panel de Cont rol” y luego “ Ajust ar resolución de pant alla” )
Supongamos que est amos en un monit or de 1280 x 800 pixeles. El 100 % son los 1280 pixeles, el 80 %
son 1280 x (80/ 100) = 1024 pixeles y el 60 % son 1280 x (60/ 100) = 768 pixeles. En est e caso t endríamos
que escribir:

h1 {background-color: blue; w idt h: 1024px;}
h2 {background-color: red; w idt h: 768px;}
Supongamos que est amos en un monit or de 1366 x 768 pixeles. En est e caso el 100 % son los 1366
pixeles, el 80 % 1092.8 pixeles y el 60 % son 819.60 pixeles. El código a escribir sería:

h1 {background-color: blue; w idt h: 1092.8px;}
h2 {background-color: red; w idt h: 819.6px;}
Para ot ras resoluciones de pant alla t endríamos que hacer los mismos cálculos.
Fíjat e que usando t ant o por cient o la represent ación o aspect o será igual en t odos los disposit ivos o
pant allas, mient ras que usando pixeles el aspect o depende de la pant alla en que est emos viendo la
web. De ahí que con frecuencia se aluda al pixel como una medida absolut a o híbrida.

Bordes CSS.. Propiedad bo rder-style.
CAJAS Y M ODELO DE BORDES
En apart ados
a ant erio res del curso
o hemos diccho que CSS se basa en el modelo d
de cajas. Cad
da división
est ruct ura
al en la página w eb, cad
da et iquet a o t ag, gene
era una caja que puede ser un elem
ment o t ipo
block (a t odo lo anch
ho) o un ele ne (se posici ona al lado de ot ros en
ement o inlin n una línea). Vamos a
est udiar cómo
c aplicarr bordes a lass cajas y las propiedades
p básicas relacionadas con
n los bordes.
BORDE Ú NICO O BOR

RDES POR PA
ARTES
Lo primerro que debemos t ener en

e cuent a ess que una ca
aja podremo s verla como
o un elemen
nt o con un
borde o bien
b como un
n element o con dist int o s bordes (ha bordes: superior o t op,
ast a un t ot al de cuat ro b
derecho o right , abajo
o o bot t om, izquierdo
i o l eft ).
ecesit amos definir

Si sólo ne d un bo rde pensaremos como en erda: t odo el element o
e la imagen de la izquie
lo conside deado por u n solo borde
eraremos rod ecesit emos d efinir de for ma diferenciiada uno o
e. Cuando ne
varios de los cuat ro bordes posi bles, pensarremos siguie
endo el mod
delo most rad
do en la ima
agen de la
derecha. Si
S prest as at ención a est a imagen, ve
erás que cuando est án esst ablecidos d
de dist int os colores
c los
ordes, en la zona de un ión ent re bo
cuat ro bo ordes en las esquinas se
e produce u n “ choque” ent re dos
E navegadorr divide la esquina com ún ent re los
bordes. El es y est o en ciert a mane
s dos colore era puede
generar un
u efect o sim
milar a 3D (t riidimensional). En el caso
o de que sólo
o se est ablecciera un bord
de como el
borde sup
perior (borde
er-t op), ést e borde se most
m raría com
mo una línea
a rect angularr de ciert o grosor,
g con
las esquin
nas t erminan
ndo en ángul os rect os en lugar de en bisel.
Un borde
e se define ut ilizando propiedades
p e ent re las cuales las
de bordes para element os CSS, de
fundamen
nt ales son:
a) Ell t ipo de borrde (border-st yle) media

ant e el cual definimos
d si es una línea
a normal, un
n borde de
p unt os, un bo
orde de pequ
ueñas líneas, et c.
b) Ell grosor del borde
b (borde
er-w idt h), m ediant e el cu
ual definimo s el grosor d el borde.
c) Ell color del bo
orde (borderr-color), med
dianTe el cua
al definimos el
e color del b
borde.
om, 2006-2029
Bordes CSS. Propiedad border-style.
PROPIEDAD CSS border-style
Función de la propiedad Define el t ipo de borde que se aplica a un element o.
Valor por defecto none (no exist e borde)
Aplicable a Todos los element os
¿Se hereda
No
directamente?
none (no exist e borde; no se ocult an ot ros bordes adyacent es)
hidden (el borde exist e pero est á ocult o y no es visible; ocult a bordes cont iguos)
dot t ed (borde a base de punt os redondeados)
dashed (borde a base de t razos o segment os rect angulares)
solid (borde como una línea normal formando un rect ángulo)
double (borde en forma de doble línea, ext erior e int erior)

Valores posibles para
groove (efect o 3D con foco de luz arriba a la izquierda. En algunos colores y
esta propiedad
grosores de línea la visualización no es buena)
ridge (efect o 3D con foco de luz abajo a la derecha. En algunos colores y

inset (efect o 3D de vent ana con element o al fondo. En algunos colores y

out set (efect o 3D de elevación. En algunos colores y grosores de línea la

visualización no es buena)
Ejemplos img {border-st yle: solid;}

aprenderaprogramar.com .imgVent ana {border-st yle: inset ; border-w idt h:10px;}
La propiedad border-st yle se puede aplicar a t odo el borde del element o, o bien a cualquiera de los
cuat ro bordes en que se puede subdividir un borde. De est a manera se generan cuat ro propiedades
cuyo funcionamient o es análogo al de border-st yle, pero que permit en dar un t rat amient o diferenciado
a cada uno de los bordes: border-top-style , border-right-style , border-bottom-style y border-left-style .
La sint axis a ut ilizar es est a:
select orDeElement o {border-t op-st yle: valor1; border-right -st yle: valor2;
border-bot t om-st yle: valor3; border-left -st yle: valor4; }
No hay por qué especificar los cuat ro bordes. Podemos especificar sólo uno de ellos, o dos, o t res, hast a
el máximo de 4, en el orden que queramos. Por ejemplo podríamos usar img {border-t op-st yle: solid; }
con lo cual únicament e aparecería para los element os img un borde: el borde superior. Hemos dicho
que hay 3 propiedades básicas para definir un borde, relat ivas al t ipo (st yle), grosor (w idt h) y color
(color). Si dejamos sin definir el border-st yle el result ado será que no se visualizará borde, ni siquiera
aunque est é definido un grosor y color, ya que por defect o el border-st yle t iene valor “ none” , lo que
significa que no se visualizará borde alguno.
¿Qué ocurriría si en el código CSS incluimos una declaración como img {border-st yle: solid; border-t op-
st yle: dashed; } ? Podemos ver el result ado en la siguient e imagen:
En primer lugar, se est ablece el borde para t odos los element os imagen como un borde sólido (línea
normal). ¿Por qué se ve un borde si no hemos est ablecido un grosor (w idt h) ni un color (color)?
Tenemos que t rat ar de razonar sobre el por qué de las cosas que observamos. Ser buenos
programadores o diseñadores CSS implica razonar y ent ender, no sólo conocer de memoria
propiedades o sint axis del lenguaje. Si sin haber est ablecido un grosor se ve una línea de det erminado
grosor es porque se est á aplicando un valor de defect o o valor inicial para el grosor. Igualment e si el
borde se ve de color azul sin haber est ablecido un color es porque se est á aplicando un valor de defect o
o valor inicial para el color. Est os valores de defect o serán los definidos por el est ándar CSS o por el
navegador que est emos ut ilizando. Si no deseamos que se apliquen est os valores por defect o debemos
especificar unos valores para dichas propiedades.
Ot ra cuest ión que podemos razonar con est a imagen es: ¿Por qué aparece el borde superior (t op) en
forma de segment os y el rest o de bordes (right , bot tom, left ) en forma de línea normal? Si leemos el
código empleado veremos que en primer lugar se define que el borde complet o de los element os img
será solid (línea normal); a cont inuación se define que el borde superior de los element os img será en
forma de t razos (segment os). El navegador procede a sust it uir el borde superior por el borde a t razos,
mient ras que mant iene el rest o de bordes (right , bot t om y left ) como borde normal. Con est e código
hemos efect uado una declaración inicial que es cont radicha por una declaración post erior. Quizás no
t engamos problemas y la visualización sea correct a en t odos los navegadores. Pero como “ est ilo de
t rabajo” recomendaríamos evit ar siempre que sea posible las cont radicciones porque a la larga pueden
generar problemas. En est e caso en vez de {border-st yle: solid; border-t op-st yle: dashed; } podríamos
usar la declaración {border-t op-st yle: dashed; border-right -st yle: solid; border-bot t om-st yle: solid;
border-left -st yle: solid; }. Veremos más adelant e que est a expresión puede escribirse t ambién de forma
abreviada o compact a. De est a manera hemos definido con claridad lo que queremos sin necesidad de
incurrir en cont radecir o sobreescribir parcialment e una propiedad. Si nuest ras definiciones de código
CSS son precisas, la probabilidad de que surjan problemas será menor. Por t ant o y a modo de
recomendación, no t e conformes con que la visualización sea correct a: int ent a que el código est é
definido lo más correct ament e posible.
EJERCICIO
Crea un document o HTM L con 10 divisiones, cada una separada de la ant erior por dos element os <br/ >.
En cada división int roduce un t ext o (p.ej. div 1, div 2, div 3…) y aplícale un est ilo de borde diferent e
ut ilizando la propiedad border-st yle.


Shortand CS
SS. Propiedade
es border-w idth
h, border-colorr.
SHORTAN
ND NOTATIO
ON O NOTACIÓN ABREVIA
ADA CSS
Con bast ant

a e frecuen cia t endrem
mos propiedades CSS don
nde es posiblle definir un valor globall, como un
borde úniico, o bien h ast a cuat ro valores
v espe
ecíficos para el lado supe
erior (t op), d erecho (righ t ), inferior
(bot t om) o izquierdo (left ). Para facilit
f ar la esscrit ura de có
ódigo CSS pe
ermit e el uso
o de diferentt es formas
as.
abreviada
La forma abreviada (en inglés “ short

s and nott at ion” ) básiica para dife
erent es prop
piedades que
e usan los
cuat ro lados de las cajas CSS se basa en usar est a siint axis: select orElementt o {nombreP
Propiedad:
valorTop valorRight
v va
alorBot t om valorLeft
v ;}
Por ejem plo la form a abreviada img {borde

er-st yle: soli d dashed d ot t ed doublle; } es equ ivalent e a
escribir de
d forma extt endida img
g {border-t op
p-st yle: solid ght -st yle: dashed; borde
d; border-rig er-bot t om-
st yle: dott t ed; border--left -st yle: d ouble; }. Tener en cuen
nt a que en la
a forma abre
eviada los va
alores van
separadoss simplemen
nt e con un espacio.
e En ambos
a casos
s el result ado
o sería simil ar al que ve
emos en la
siguient e imagen.
Como se puede
p comp
probar, usar la forma abrreviada nos permit
p nsión de cód igo que es
e ahorrrar en ext en
necesario
o t eclear y por
p t ant o no
os permit e ahorrar
a t iem
mpo cuando est emos esscribiendo có
ódigo CSS.
Además, cuando los archivos
a CSS
S son muy exxt ensos, usa
ar la forma abreviada
a pu
uede redund
dar en que
nuest ros archivos
a sean más ligero
os y se cargue
en más rápid
dament e.
La not ació
ón abreviada
a o short and
d not at ion se
e usa para m uchas propie a est ablecer márgenes,
edades para
rellenos, et c. por lo que
q nos la encont
e rarem
mos repet ida
ament e cuan
ndo t rabajem
mos con CSS
S. Hay una
cosa que debemos memorizar:
m e orden en que
el q se escri ben los valo
ores y su co rrespondenc
cia con los
cuat ro lad
dos de la caj a. Para ello podemos ussar est a regla
a mnemot écnica: el día ccomienza a l as 12:00 y
el primer lado es TOP, las agujass del reloj avanzan haci a la derecha
a y el segun do lado el RIGHT.
R Las
agujas sig
guen avanzan
ndo y el t erccer lado es BOTTOM
B . El reloj
r sigue avvanzando y e
el cuart o lad
do es LEFT.
De ahí qu
ue cuando vemos
v una expresión de
d t ipo img {border-st yl e: solid dasshed dot t ed double; }
debamos pensar en so
olid --> TOP, dashed --> RIGHT,
R dot t ed OM , double --> LEFT.
e --> BOTTO
Pero se pueden
p usarr formas abrreviadas de ot ras maneras, usando en vez de cuat ro valorres menos
valores. En
E la siguientt e t abla vem
mos el signifiicado de las expresioness según el n úmero de va
alores que
usemos:
om, 2006-2029
Shortand CSS. Propiedades border-w idth, border-color.
Valores
Ejemplo Significado
empleados
1 img {border-st yle: dot t ed; } Los cuat ro lados de la caja se

muest ran con el valor indicado.
El primer valor se aplica a TOP y

2 img {border-st yle: dot t ed solid; } BOTTOM y el segundo valor se
asigna a RIGHT y LEFT
El primer valor se aplica a TOP, el

3 img {border-st yle: dot t ed solid dashed; } segundo a RIGHT y LEFT y el t ercero
a BOTTOM
El primer valor se aplica a TOP, el

4 img {border-st yle: dot t ed solid dashed double;} segundo a RIGHT, el t ercero a
BOTTOM y el cuart o a LEFT
Hay más formas de not aciones abreviadas en CSS como veremos más adelant e. Algunos navegadores,
en especial los más ant iguos, podrían no reconocer las expresiones abreviadas, aunque práct icament e
t odos los navegadores act uales sí las reconocen.
PROPIEDAD CSS BORDER-W IDTH
Vist os ya los diferent es t ipos de bordes que podemos aplicar con CSS, un aspect o import ant e será
definir su grosor. Est o se hace con la propiedad border-w idt h.
PROPIEDAD CSS border-w idth
Función de la propiedad Define el grosor de borde que se aplica a un element o.
Valor por defecto medium (grosor por defect o medio)
¿Se hereda directamente? No
Una unidad de medida absolut a o relat iva admit ida y aplicable (en general
cualquier unidad except o porcent aje será válida)
t hin (fino)
propiedad medium (medio)
t hick (grueso)
inherit (heredado del element o padre)
Ejemplos img {border-st yle: solid; border-w idt h: 15px;}

aprenderaprogramar.com .imgVent ana {border-st yle: inset ; border-w idt h:1.25em;}
El grosor exact o en el caso de usar t hin, medium y t hick depende del navegador que est emos ut ilizando,
de ahí que normalment e los diseñadores prefieran especificar el t amaño de los bordes con valores
como pixeles o em, que les permit en un mayor cont rol.
Recordar que para que el borde sea visible debemos est ablecer border-st yle, ya que sin est a propiedad
est ablecida la aplicación de border-w idt h no generará ningún result ado.
La propiedad border-w idt h puede especificarse usando la short and not at ion como hemos explicado
ant eriorment e. Por ejemplo {border-w idt h:0.25em 0.85em 0.45em;} est ablece el borde superior en
0.25em, los bordes lat erales izquierdo y derecho en 0.85em y el borde inferior en 0.45em.
La propiedad border-w idt h se puede aplicar a t odo el borde del element o, o bien a cualquiera de los
cuyo funcionamient o es análogo al de border-w idht , pero que permit en dar un t rat amient o
diferenciado a cada uno de los bordes: border-top-w idth, border-right-w idth , border-bottom-w idth y
border-left-w idth. La sint axis a ut ilizar y la forma de funcionamient o es la misma que hemos explicado
ant eriorment e para border-st yle.
PROPIEDAD CSS BORDER-COLOR
La propiedad border-color nos permit e aplicar colores de borde.
PROPIEDAD CSS border-color
Función de la propiedad Define el color de borde que se aplica a un element o.
Será el valor que t enga la propiedad color para el element o,

Valor por defecto
est ablecida en el código o la que t enga el element o por defect o.
Un color est ablecido de cualquiera de las maneras válidas en CSS

t ransparent (el borde exist e pero es t ransparent e)
propiedad
img {border-st yle: solid; border-w idt h: 15px; border-color: cyan}

Ejemplos
.imgVent ana {border-st yle: solid dot t ed; border-w idt h:0.35em;
aprenderaprogramar.com
border-color: red blue;}
El valor t ransparent nos permit e generar la apariencia de que exist e un borde pero est e no será visible
por ser t ransparent e.
Recordar que para que el borde sea visible debemos est ablecer border-st yle, ya que sin est a propiedad
est ablecida la aplicación de border-color no generará ningún result ado.
La propiedad border-color puede especificarse usando la shortand not at ion como hemos explicado
ant eriorment e. Por ejemplo {border-color:#ff0000 rgb(0,255,0) blue rgba(0,255,0,0.33);} est ablece los
bordes de dist int os colores siguiendo el orden t op – right – bot t om – left .
La propiedad border-color se puede aplicar a t odo el borde del element o, o bien a cualquiera de los
cuyo funcionamient o es análogo al de border-w idht , pero que permit en dar un t rat amient o
diferenciado a cada uno de los bordes: border-top-color, border-right-color , border-bottom-color y
border-left-color . La sint axis a ut ilizar y la forma de funcionamient o es la misma que hemos explicado
ant eriorment e para border-st yle.
PROPIEDAD CSS BORDER
Hast a ahora hemos vist o que para est ablecer un borde habíamos de definir al menos la propiedad
border-st yle, y si queríamos especificar el grosor y el color adicionalment e t eníamos que definir border-
w idt h y border-color.
Hay una propiedad que permit e expresar las t res propiedades básicas de un borde de forma abreviada:
la propiedad border. La sint axis a emplear es:
border { valorBorderWidt h valorBorderStyle valorBorderColor; }
PROPIEDAD CSS border
Función de la propiedad Permit e definir grosor, est ilo y color de borde.
Valor por defecto Los de las dist int as sub-propiedades de que const a.
Un valor (est ablecerá border-st yle)
Valores posibles para esta Dos valores (est ablecerá border-st yle y grosor o color)
propiedad Tres valores (est ablecerá border-widt h, border-st yle y border-color)
Ejemplos img {border: 15px solid #FFAA33; }

aprenderaprogramar.com .imgVent ana { border: dot t ed;}
Not a: en general los navegadores permit en que las subpropiedades de border se expresen en cualquier
orden, es decir, dará igual escribir img {border: 15px solid #FFAA33; } que img {border: solid #FFAA33
15px;}. El navegador int erpret ará en cada caso qué es el est ilo, qué es el grosor y qué es el color.
La propiedad admit e hast a t res valores (anchura, est ilo y color) de los cuales es obligat orio el est ilo y
opcionales los ot ros dos.
Valores
Ejemplo Significado
empleados
1 Los cuat ro lados de la caja se muest ran con el est ilo

img {border: dot t ed; }
indicado. Grosor y color serán los de defect o.
2 img {border: 20px solid; } Se aplica el est ilo indicado y el grosor ó color
img {border: solid red; } indicado. Lo no especificado será por defect o.
3 img {border: 15px solid #FFAA33; } Se aplica el grosor, est ilo y color indicados.
Est e t ipo de propiedades como border que permit en abreviar diferent es propiedades se denominan
“ short and propert ies” o propiedades abreviadas.
La propiedad border se puede aplicar a cualquiera de los cuat ro bordes en que se puede subdividir un
borde. De est a manera se generan cuat ro propiedades cuyo funcionamient o es análogo al de border,
pero que permit en dar un t rat amient o diferenciado a cada uno de los bordes: border-top, border-right ,
border-bottom y border-left . La sint axis a ut ilizar y la forma de funcionamient o para est as propiedades
son las que ya conocemos.
El siguient e esquema resume las propiedades de borde CSS:
EJERCICIO 1
Crea un document o HTM L con 2 divisiones, cada una separada de la ant erior por dos element os <br/ >.
En cada división int roduce un t ext o (p.ej. div 1, div 2) y aplícale los siguient es est ilos de borde
escribiendo de forma individual cada una de las siguient es propiedades CSS:
a) Para el div 1: la part e superior con borde de punt os redondeados, grosor 10 píxeles y color verde. La
part e derecha con borde de t razos o segment os rect angulares, grosor 20 píxeles y color azul. La part e
inferior con borde de línea doble, grosor 10 píxeles y color #A52A2A. La part e izquierda con borde con
efect o groove, grosor 30 píxeles y color #2F4F4F.
b) Para el div 2: la part e superior con borde con efect o inset , grosor 30 píxeles y color #B22222. La part e
derecha con borde sólido, grosor 22 píxeles y color #DAA520. La part e inferior con borde de línea doble,
grosor 25 píxeles y color #4B0082. La part e izquierda con borde de punt os redondeados, grosor 17
píxeles y color #808000.

EJERCICIO 2
Crea un document o HTM L con el mismo aspect o y propiedades CSS que las descrit as para el ejercicio 1,
pero en est e caso usando la not ación short and de bordes CSS y la propiedad border abreviada. Para
comprobar si t us respuest as son correct as puedes consult ar en los foros aprenderaprogramar.com.

M argen y re
ellenos en CSS. M argin y padd
ding en el box model.
m
M ARGEN Y RELLENO
Para avanzar en la comprensió

ón del funciionamient o de CSS debemos cono
ocer, saber ut ilizar y
ar dos propi edades imp ort ant es: m argin y padd
diferencia ding. Al igua
al que con lo
os bordes, t endremos
dist int as propiedades derivadass de las prrincipales y t ambién t endremos
e sshort and no
ot at ions o
es abreviadas para poderr expresarlass.
not acione
M ARGIN Y PADDING
Empezare
emos realizan
ndo una defiinición de co
oncept os:
a) Cont enido de ent o HTM L es aquello que se pre

e un eleme et ende mosst rar al visu
ualizar ese
element o: pu
uede ser un
n t ext o, un
na imagen o quizás ott ros elemen
nt os como un objet o
re
eproduct or de
d sonido ó un
u mapa. El cont
c enido en a rect angular.
n CSS t iene f orma de caja
b) Borde: es el perímet
p ro qu
ue engloba ell cont enido y el posible relleno
r nglés paddin g) ent re el
(en in
b orde y el con
nt enido.
c) Relleno (padd
ding): es el espacio t ransparent e que
q de dejar, op cionalment e,
se pued e ent re el
co
ont enido y el
e borde del element o. El relleno no
n t iene collor (pero pe
ermit e ver el
e color de
fo
ondo).
d) M argen: es el
e espacio t ransparent
r e que se pue
ede dejar, op
pcionalmentt e, ent re el borde del
element o y el borde de ot
o ras cajas adyacent
a es. El
E margen n o t iene colo r (pero perm
mit e ver el
co
olor de fond o).
Viendo essquemas gráficos y códig enderán con más facilidad est os conccept os:
go se compre
Ca
aja contenedora
margin
m n
pa
adding
Conttenido (tex
xto,
im
magen…)
aprenderraprograma ar .com
om, 2006-2029
M argen y rellenos en CSS. M argin y padding en el box model.
Un element o HTM L puede t ener margin y padding, sólo t ener margin, sólo t ener padding, o no t ener ni
margin ni padding. En caso de no t ener margin ni padding el element o aparecerá “ ajust ado”
exact ament e a su caja cont enedora.
Al igual que ocurría con las propiedades de borde, las propiedades de margen y relleno se pueden
subdividir para aplicarlas a cada uno de los lados de la caja CSS por separado.
EJEM PLO EN CÓDIGO
Para ver la aplicación práct ica de est os concept os vamos a ut ilizar el código HTM L de base que venimos
empleando a lo largo del curso.
Define los siguient es est ilos css y visualiza el result ado en t u navegador:

* {font -family: arial;}
body {background-color: yellow ; w idt h: 60%;}
h1{margin: 25px; padding: 45px; border: solid 6px blue; }
h2{border-st yle: solid; border-color:red; margin: 0; padding:0;}
div {border: solid t hick black;}
div div {border: solid medium purple;}
div div div {border: dashed medium grey;}
img {border: solid #FF00FF 2px;}
Vamos a analizar línea a línea el código CSS y los result ados obt enidos. La primera línea es un
coment ario. En la segunda línea est ablecemos que las fuent es de t ext o a emplear en t odos los
element os del document o sean t ipo arial. En la t ercera línea est ablecemos que el element o body t enga
color de fondo amarillo y ocupe el 60% del ancho de pant alla disponible.
En la cuart a línea definimos que el margen de los element os h1 será de 25 píxeles. Al no especificar t op,
right , bot t om o left , est e margen se aplicará en las cuat ro direcciones (mismo comport amient o que el
que hemos est udiado previament e con los bordes). Igualment e definimos que el relleno para los
element os h1 será de 45 px en t odas las direcciones y que el borde se muest re de color azul.
En la quint a línea definimos que los element os h2 muest ren un borde de color rojo y que no llevarán
margen ni relleno.
En las siguient es líneas est ablecemos bordes para que se muest ren las cajas cont enedoras de los
element os HTM L de dist int os colores. Est as líneas no nos int eresa coment arlas ahora.
En los result ados de visualización comprobamos lo siguient e: si los element os h2 no t ienen margen, se
most rarán pegados a las cajas adyacent es. Así vemos que ocurre con la caja del div cont enedor, pero no
con la caja del h1. ¿Es est o correct o? Sí, porque el h1 t iene est ablecido un margen y por t ant o la caja
del element o h2 no puede pegarse a la caja del element o h1 porque hay un margen que lo impide.
Prueba a hacer el siguient e cambio en el código: h2{border-st yle: solid; border-color:red; margin: 25px;
padding:0;}
Al visualizar el result ado comprobarás que los márgenes vert icales (t op y bot t om) cont iguos no son
adit ivos, es decir, si la caja h1 t iene de margen 25px y la caja de h2 t iene de margen 25px, el espacio
vert ical que quedará ent re ambas cajas es 25px y no 50px. ¿Por qué? Porque la referencia para
est ablecer un margen vert ical es el borde de las cajas y no el límit e del margen de una caja adyacent e.
Si la caja h1 t uviera de margen vert ical 25px y la caja h2 t uviera de margen vert ical 10px el espacio
ent re ambas cajas sería de 25px, el mayor ent re los dos valores.
El comport amient o de los márgenes horizont ales es diferent e: en est e caso, sí es adit ivo. Supongamos
que t enemos dos imágenes una al lado de ot ra y est ablemos img {margin:25px;}. En est e caso el espacio
que habrá ent re ambas imágenes sí es de 50 px, es decir, los márgenes horizont ales sí se suman,
mient ras que los vert icales no se suman. Est e comport amient o peculiar deberemos t enerlo en cuent a
cuando t rabajemos con CSS. Y como CSS no es mat emát icas, habrá que realizar pruebas y
comprobaciones para verificar que se cumple aquello que esperamos.
La idea clave con que debemos quedarnos es que los márgenes vert icales t ienen un comport amient o
dist int o al de los márgenes horizont ales.
Cont inuamos con el análisis de los result ados. Si la caja h2 no t iene padding, la línea de borde quedará
ceñida al cont enido (en est e caso al t ext o). Así vemos que ocurre por la izquierda, por arriba y por
abajo. Sin embargo por la derecha el borde no est á ajust ado al t ext o. ¿Por qué? Porque los element os
h1 y h2 son element os de t ipo block, y por t ant o t ienden a ocupar t odo el ancho de pant alla. M ás
adelant e veremos que podemos cambiar el comport amient o para que se comport en como block ó
como inline según nuest ro crit erio.
Finalment e queremos llamar la at ención sobre el hecho de que se muest re un pequeño espacio ent re el
borde del div y el borde del element o body, de ahí que se vea una pequeña franja amarilla por fuera del
cont enedor div. Est a sit uación se debe a los márgenes o rellenos que por defect o aplica el navegador.
Podemos eliminar est os márgenes o rellenos por defect o incluyendo en el select or universal est e
código: * {margin:0; padding:0;} Prueba a aplicarlo y compruébalo. A práct icas de est e t ipo, consist ent es
en escribir código para anular el comport amient o por defect o que int roducen los navegadores, se le
suele denominar “ reset eo” . Es una práct ica que siguen muchos diseñadores y programadores, pero no
t odos. Algunos programadores est án en cont ra de ut ilizar práct icas de reset eo.
El código de reset eo puede ser bast ant e más amplio que el que hemos indicado y hablaremos de ello
más adelant e. Nosot ros iremos int roduciendo algunas práct icas de reset eo cuando lo consideremos
necesario para el desarrollo del curso.
EJERCICIO
Para cada una de las siguient es afirmaciones indica si la afirmación es verdadera o falsa y just ifica
brevement e t u respuest a:
a) CSS muest ra los cont enidos con t res formas básicas: rect angular, circular y elipsoidal.
b) Al crear un document o HTM L, pueden aparecer márgenes y rellenos que no hayan sido
explícit ament e int roducidos por nosot ros como programadores, sino que hayan sido int roducidos por el
navegador que est emos empleando.
c) El reset eo CSS consist e en la recarga de la página para borrar la caché del navegador, de modo que
los est ilos se recarguen complet ament e.


M argen y re
ellenos en CSS. M argin y padd
ding en el box model.
m
M ARGIN Y PADDING
Ya debem
mos t ener cla
aro el concep
pt o de marge
en y de relle
eno en CSS. Ambos
A son e
element os muy
m usados
en los diseños y que present
p an cie
ert as similit udes
u y ciert as diferenciass. En algunoss casos el efe
ect o visual
al que llevvan es muy parecido.
p Sin
n embargo, conviene
c t en er clara la diiferencia entt re ambos co
oncept os y
saber ut il izarlos adecu
uadament e.
PROPIEDA
AD CSS PADD
DING
La propied
dad CSS pad ding nos perrmit e fijar el relleno de un
u element o.. La sint axis a emplear es
s del t ipo:
selectt orElement o { padding va

alor1Uds val or2Uds valo r3Uds valor4
4Uds; }
PROPIIEDAD CSS padding

p
Función de la propie
edad Per mit e definir un relleno ent re el bord e de caja y e
el cont enido.
Valor po
or defecto 0 (n
no exist e rell eno).
Elem
ment os t ipo block y ele
ement os inse
ert ados en u
una posición que son
Aplicable a
reem
mplazados po
or un objet o (e
ent re ellos img area, select , o bject ).
g, input , t ext a
¿Se here
eda
No
directam
mente?
Un valor
v absolut o o relat ivo (est ablece relle
eno en los cuat ro sent idos)
Dos valores (el prrimero de ello

os aplica a t op
p y bot t om y e
el segundo a riight y left )
Valores posibles parra
Tress valores (el p rimero para t op, el segund o right / left y el t ercero b ot t om).
opiedad
esta pro
Cuat ro valores (se
e aplican a t o p, right , bot t om
o y left en esst e orden)
inhe
erit (heredado
o del element o padre)
#me
enu1 {padding
g: 55px 0.5em
m 177px 2px;}
Ejemplos .img
gVent ana { padding: 15px;}
eraprograma
aprende ar.com h1 {padding:
{ 10%
% 5%;}
.con
nt ainer1 {padd
ding: 0 aut o;}
La propie
edad padding
g se puede aplicar en t odos los lad
dos del elem
ment o, o bie
en a cualqui era de los
dos que confforman una caja CSS. Exist en cuat ro propiedades cuyo funci onamient o es
cuat ro lad e análogo
al de pad ding, pero que
q permit en at amient o di ferenciado a cada uno d
n dar un t ra de los lados de la caja
ding-top, pa
CSS: padd adding-right , padding-bo
ottom y pad a sint axis a ut ilizar y la forma de
dding-left . La
funcionam
mient o es la misma que hemos
h expliccado.
om, 2006-2029
El valor de padding se puede est ablecer en %, realizándose el cálculo respecto al ancho del elemento
contenedor (un valor 100% sería un relleno igual al ancho del element o cont enedor).
La propiedad padding no admit e valores negat ivos.
Recordar que t ant o margin como padding generan un espacio t ransparent e. El color o imagen que se
vean en dicho espacio serán el color de fondo (background-color) o la imagen de fondo (background-
image) que est én definidos para el element o afect ado.
Tant o con margin como con padding pueden haber det erminadas sit uaciones en que los navegadores,
sobre t odo los más ant iguos, no respondan como sería de esperar, aunque la mayor part e de los
navegadores act uales responden adecuadament e.
PROPIEDAD CSS M ARGIN
La propiedad CSS margin nos permit e fijar el margen de un element o. La sint axis a emplear es del t ipo:
select orElement o { margin valor1Uds valor2Uds valor3Uds valor4Uds; }
PROPIEDAD CSS margin
Permit e definir el margen ent re el borde de la caja del element o y el

Función de la propiedad
borde de las cajas adyacent es.
Valor por defecto 0 (no exist e margen).
Element os t ipo block y element os insert ados en una posición que son
Aplicable a
reemplazados por un objet o (ent re ellos img, input , t ext area, select , object ).
¿Se hereda
No
directamente?
aut o (el navegador aplicará el margen por defect o)
Un valor absolut o o relat ivo (est ablece márgenes en los cuat ro lados de la caja)
Valores posibles para Dos valores (el primero de ellos aplica a t op y bot t om y el segundo a right y left )
esta propiedad Tres valores (el primero para t op, el segundo right / left y el t ercero bot t om).
Cuat ro valores (se aplican a t op, right , bot t om y left en est e orden)
#menu1 {margin: 55px 0.5em 177px 2px;}
Ejemplos .imgVent ana { margin: 15px;}

aprenderaprogramar.com h1{margin: 10% 5%;}
.cont ainer1 {margin: 0 aut o;}
La propiedad margin se puede aplicar en t odos los lados del element o, o bien a cualquiera de los cuat ro
lados que conforman una caja CSS. Exist en cuat ro propiedades cuyo funcionamient o es análogo al de
margin, pero que permit en dar un t rat amient o diferenciado a cada uno de los lados de la caja CSS:
margin-top, margin-right , margin-bottom y margin-left . La sint axis a ut ilizar y la forma de
funcionamient o es la misma que hemos explicado ant eriorment e.
El valor de margin se puede est ablecer en %, realizándose el cálculo respecto al ancho del elemento
contenedor (un valor 100% sería un margen igual al ancho del element o cont enedor).
A diferencia de ot ras propiedades, se admit e que un valor de margin pueda ser negat ivo (aunque est o
no es usual y no debería usarse except o cuando razonadament e es necesario y aconsejable. Un margen
negat ivo puede dar lugar, en algunos casos, a visualizaciones incorrect as o ext rañas). Para ent ender el
efect o de valores de margen negat ivos podemos pensar en los márgenes como aviones que t ienen un
espacio básico definido por la anchura de sus alas y fuselaje, que definen un espacio rect angular que
sería el margin 0 (no hay margin y el avión “ empuja” a ot ros aviones colindant es). Ese espacio se puede
aument ar hacia fuera est ableciendo un margin posit ivo que sería como “ est ablecer un perímet ro de
seguridad para el avión” , lo que impide que ot ros aviones ent ren en el espacio reservado a nuest ro
avión. Si el margen se est ablece en un valor negat ivo, el avión no sólo no t iene un espacio ext ra hacia
fuera, sino que t ampoco t iene su espacio básico y se coloca invadiendo el espacio delimit ado por ot ro
avión cont iguo. M argin posit ivo sería “ empujar hacia fuera” y margin negat ivo sería “ solaparse” con
element os adyacent es.
En la siguient e imagen vemos cómo afect a est ablecer un margen posit ivo o negat ivo a un element o
“ Cont enido 1” que t iene ot ros dos element os vecinos.
La invasión del espacio colindant e puede ser en t odas direcciones o est ablecerse específicament e para
alguna de las cuat ro direcciones posibles (t op, right , bot t om o left ) usando margin-t op, margin-right ,
margin-bot t om o margin-left . Un aspect o a t ener en cuent a es que cuando exist e superposición de un
element o con ot ros habrá que comprobar o est ablecer qué element o debe quedar encima y qué
element o debe quedar debajo. En la imagen ant erior hemos dibujado el element o “ Cont enido 1”
sit uándose encima de los ot ros element os, pero en la práct ica est o dependerá de diversos fact ores y no
siempre será así. Exist en propiedades CSS con las que podremos cont rolar el orden de apilamient o de
element os cuando exist e superposición. Lo veremos más adelant e.
Ot ro aspect o que merece ser coment ado es el result ado que se obt endrá al est ablecer un valor de
margin “ aut o” . Elegir aut o equivale a indicar que el margin debe ser est ablecido aut omát icament e por
el navegador. En general, si un element o es de t ipo block y no t iene est ablecido una anchura específica,
cuando est ablecemos el margin con valor “ aut o” el margen que aplicará el navegador cerá cero (sin
margen). En cambio, si el element o es de t ipo block pero t iene un valor de ancho (w idt h) definido, al
est ablecer el margin aut o el navegador est ablecerá un margen izquierdo y derecho iguales, de modo
que el cont enido est ará equidist ant e respect o al borde del cont enedor. El efect o que se aprecia, en est e
caso, es que el element o aparece cent rado.
Ejemplo:
a) Código que da lugar a un margen cero: h1{ border: solid; margin:aut o; }, el element o h1 se ve a t odo
lo ancho y sin márgenes.
b) Código que da lugar a el cent rado horizont al del element o: h1{border: solid 6px blue; w idt h:65%;
margin:aut o;}. El element o h1 se ve sin márgenes superior (t op) ni inferior (bot t om), pero se ve
cent rado (con márgenes right y left de igual valor).
Prueba a visualizar la página de pruebas en t u navegador con est e código. En el primer caso h1 es un
element o block sin ancho definido, por lo que t iende a ocupar t odo el ancho disponible. En est e caso
margin: aut o; da lugar a que se aplique margen cero. En el segundo caso h1 es un element o block con
ancho el 65% del element o cont enedor, por t ant o t iene un ancho definido. En est e caso margin: aut o;
da lugar a que se apliquen márgenes iguales por ambos lados del element o y a que visualment e el
element o aparezca cent rado.
EJERCICIO
Crea un document o HTM L con 2 element os div de anchura 250 píxeles, con un margen de 20px en
t odas direcciones y uno junt o al ot ro (en horizont al). En cada div int roduce un t ext o (p.ej. div 1, div 2) y
aplícale los siguient es est ilos de borde y relleno a ambos element os. Color de fondo #FFB6C1. La part e
superior con borde de punt os redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La
part e derecha con borde de t razos o segment os rect angulares, grosor 10 píxeles, color verde y relleno
de 45 píxeles. La part e inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0
píxeles. La part e izquierda con borde con efect o ridge, grosor 40 píxeles, color #2F4F4F y relleno 60
píxeles.
Responde a las siguient es pregunt as:
a) ¿Cuál es el ancho t ot al ocupado por cada div (incluyendo sus bordes y rellenos)?
b) ¿Cuál es el alt o t ot al ocupado por cada div (incluyendo sus bordes y rellenos)?
c) ¿Cuál es el ancho t ot al desde el límit e izquierdo del borde del div más a la izquierda hast a el límit e
derecho del borde del div más a la derecha (t eniendo en cuent a márgenes, bordes y rellenos)?


Fondo o bac
ckground en CS
SS. background
d-image, repeatt, etc.
FONDO EN CSS
e diferent e propiedades
CSS t iene p relacionada
as con el fon
ndo de las cajas
c del boxx-model o modelo
m de
cajas. Ya conocemos
c l propiedad
la d background
d-color. Vam
mos a ampliarr el conocim ient o sobre los fondos
est udiand und-image, background -repeat , ba
do ot ras prropiedades relacionadas: backgrou ackground-
at t achment , backgrou
und-posit ion y la propied
dad short and
d background
d.
CONCEPT
TO DE FONDO
O DE UN ELE
EM ENTO
El fondo de
d un element o CSS com e los bordes hacia el int e
mprende el espacio desde erior de la ca
aja del box
model, in cluyendo el propio bord
de. Por t ant o el fondo co
omprende el espacio de borde, el pa
adding y el
espacio d el cont enido
o. El margin no se ve afect ados por el
e fondo del element o. S
Si el borde es
s opaco, el
fondo que
edará ocult o por el bord
de. En camb io si t iene t ransparencia
r a o part es no
o opacas, de
ejará ver el
fondo.
Ca
aja contenedora
margin
m n
pa
adding
Conttenido (tex
xto,
im
magen…)
aprenderraprograma ar .com
AD BACKGRO
PROPIEDA OUND-COLO
OR
Es la prop
piedad que permit
p e est ablecer
a el co lor de fondo hablado, por lo que no
o, de la cual ya hemos h
vamos a ext
e endernoss en ella. Reccordar que el nd-color por defect o par a t odos los element
e backgroun e os
es t ranspa
arent .
AD BACKGRO
PROPIEDA OUND-IM AG
GE
Est a prop
piedad nos p ermit e est ab
blecer una im
magen de fo
ondo para un
n element o. Una imagen
n se coloca
encima d el backgroun
nd-color. Si la imagen es opaca, ocu
ult ará el bacckground-collor. Si la ima
agen t iene
part es t ra
ansparent es, se verá el co
olor de fondo
o rellenando
o esas part ess t ransparentt es.
om, 2006-2029
Fondo o background en CSS. background-image, repeat, etc.
La sint axis a emplear es del t ipo:
select orElement o {background-image: valorDefinido; }
El valor definido puede ser none para indicar que no exist e imagen de fondo, o puede definirse
escribiendo lo siguient e: url(rut aDeLaImagen). No debe haber espacio ent re url y el parént esis dent ro
del que se coloca la rut a. Es decir, url(rut a) es correct o pero url (rut a) es incorrect o.
Como rut a de la imagen puede especificarse un nombre de archivo que t engamos en el mismo
direct orio en el que se encuent re el archivo HTM L, por ejemplo url(barco.jpg), o t ambién una rut a
relat iva a ot ro direct orio. Por ejemplo url(images/ barco.jpg) haría referencia a un archivo de nombre
barco.jpg que se encuent ra dent ro del direct orio images.
También puede especificarse una url complet a, por ejemplo podría escribirse lo siguient e:
url(ht t p:/ / w w w .crimsonedit or.com/ images/ logo.jpg)
El cont enido de la rut a puede escribirse ent re comillas simples o dobles. Es decir, result a válida
cualquiera de est as t res opciones:
a) url(ht t p:/ / w w w .crimsonedit or.com/ images/ logo.jpg)

b) url(“ ht t p:/ / w w w .crimsonedit or.com/ images/ logo.jpg” )
c) url('ht t p:/ / w w w .crimsonedit or.com/ images/ logo.jpg')
En algunos casos las rut as pueden t ener caract eres ext raños y est os caract eres pueden dar lugar a
problemas al no ser capaz el navegador de reconocer la rut a.
PROPIEDAD CSS background-image
Función de la propiedad Permit e definir una imagen de fondo para un element o.
Valor por defecto none (no exist e imagen de fondo).
Aplicable a Todos los element os.
¿Se hereda
No
directamente?
none (est ablece que no exist e imagen de fondo)
Valores posibles para Una rut a relat iva (al fichero de imagen)
esta propiedad Una rut a absolut a (al fichero de imagen)
#menu1 {background-image: url(barco.jpg);} .imgVent ana { background-image:

Ejemplos url(ht t p:/ / crimsonedit or.com/ images/ logo.jpg);}
aprenderaprogramar.com h1 { background-image: url(“ bgforh1.png” ); }

.cont ainer1 {background-image: none;}
En caso de que el archivo de imagen a que se aluda no est é disponible, la visualización será la misma
que si est uviera est ablecido que background-image fuera none. Por t ant o si t enemos un color de fondo
y una imagen de fondo, en caso de no encont rarse o no est ar disponible la url con el archivo de la
imagen de fondo, se vería el color de fondo. Est e es el mot ivo por el que se recomienda est ablecer color
de fondo incluso si se pone una imagen de fondo opaca: en caso de no est ar la imagen disponible, el
color de fondo aport aría la seguridad de que se visualiza algo como fondo.
Para ver la aplicación práct ica de est os concept os vamos a ut ilizar el código HTM L de base que venimos
empleando a lo largo del curso.

* {font -family: arial; }
body {background-color: yellow ;}
h1{
border: dashed t hick purple; w idt h: 55%; color: blue; background-color:pink;
margin:20px; padding:50px;
background-image:
url(ht t p:/ / lh5.ggpht .com/ _PeVw ghrmOec/ TM kzEonRrcI/ AAAAAAAAAHc/ IxL8g0fTYt k/ an_oliva_png.png);
}
El result ado será similar a la imagen ant erior y lo int erpret amos de la siguient e manera: el borde t iene
part es no opacas por est ar est ablecido como dashed. Por ello allí donde la línea es discont ínua se ve la
imagen de fondo o, en caso de que la imagen de fondo t enga t ransparencia (como en est e caso), se ve
el color de fondo.
Por defect o, la imagen se coloca en la part e superior izquierda alineada o encajada con el borde
superior izquierdo, y a part ir de aquí se repit e hacia arriba (de ahí que se vean algunas manchas en el
borde superior, hacia la izquierda (de ahí que se vean manchas en el borde izquierdo), hacia la derecha
y hacia abajo. Est e comport amient o puede ser cambiado ut ilizando ot ras propiedades de background
(background-posit ion y background-repeat ) como veremos más adelant e.
En caso de que la imagen fuera más grande que el espacio disponible en el element o, sólo se most raría
una part e de la imagen (la part e que quepa).
Se pueden poner varias imágenes de fondo (aunque sólo en navegadores modernos; algunos
navegadores más ant iguos pueden no funcionar con est a posibilidad) . En est e caso, la visualización es
el result ado de crear un collage o pila de imágenes, sit uándose encima la primera en la enumeración,
más abajo la siguient e y así sucesivament e hast a llegar a la capa final que sería el color de fondo. Al
hacer est o, se crea un efect o de superposición donde la t ransparencia de una imagen deja ver
parcialment e lo que hay debajo. En caso de que la primera imagen fuera opaca, ocult aría t odo lo que
hay debajo.
Ejemplo: background-image: url(“ barco.png” , “ mar.jpg” ) da lugar a que la imagen del mar se vea debajo
de la imagen del barco.
Prueba a visualizar el result ado de est ablecer una imagen de fondo con t ransparencia encima de ot ra
imagen de fondo (por ejemplo background-image:
url(ht t p:/ / lh5.ggpht .com/ _PeVw ghrmOec/ TM kzEonRrcI/ AAAAAAAAAHc/ IxL8g0fTYt k/ an_oliva_png.png),
url(ht t p:/ / w ww .crimsonedit or.com/ images/ logo.jpg);
Prueba t ambién a est ablecer una imagen de fondo para el element o body y comprueba los result ados.
Podrás ver cómo si t oda la página t iene una imagen de fondo oscura, el t ext o negro se hace difícil de
leer.
Un aspect o de int erés radica en que se pueden usar imágenes de pequeño t amaño que sit uadas en un
fondo y repet idas creen el efect o de papel t apiz para una página w eb. Por ejemplo podemos coger
imágenes simples de forma cuadrada:
Est as imágenes, si est án bien diseñadas, al repet irse crean un fondo uniforme o “ papel t apiz”
pareciendo que fueran una sola cosa. Est o supone una gran vent aja respect o a usar una imagen de gran
t amaño por varios mot ivos:
a) Usando una imagen de fondo que se repit e la página puede ser t an grande a lo ancho y a lo alt o
como queramos, no t enemos que preocuparnos de si la imagen va a ser lo suficient ement e
grande para cubrir el espacio de la página w eb.
b) Usando una imagen pequeña que se repit e facilit amos que la página w eb cargue más
rápidament e al t ener el navegador que recibir una pequeña imagen y repet irla, en lugar de
t ener que recibir una gran imagen. De est e modo, podemos cargar por ejemplo una imagen de
4 Kb cuya carga es muy rápida en lugar de una imagen de 400 Kb cuya carga sería muy lent a.
PROPIEDAD BACKGROUND-REPEAT
Est a propiedad nos permit e definir si una imagen de fondo de t amaño inferior al disponible debe
repet irse. También se puede especificar si la repet ición debe ser horizonal (eje x), vert ical (eje y) o en
ambos sent idos.
select orElement o { background-repeat : valorDeRepet ición; }
PROPIEDAD CSS background-repeat
Función de la propiedad Permit e definir si una imagen de fondo debe repet irse y cómo.
Valor por defecto repeat (la imagen se repit e horizont al y vert icalment e).
¿Se hereda
No
directamente?
repeat (repet ición horizont al y vert ical)
repeat -x (repet ición sólo horizont al)

repeat -y (repet ición sólo vert ical)
esta propiedad
no-repeat (la imagen se muest ra sólo una vez, sin repet iciones)
#menu1 {background-image: url(“ barco.jpg” ); background-repeat : no-repeat ;}
Ejemplos .imgVent ana { background-image: url(ut .jpg); background-repeat : repeat -x;}

aprenderaprogramar.com h1{ background-image: url(ut .jpg); background-repeat : repeat -y;}
.cont ainer1 { background-image: url(ut .jpg); background-repeat : repeat ;}
Opcionalment e puede usarse ot ra sint axis (aunque no la vemos por el moment o recomendable porque
en algunos navegadores puede no ser reconocida) basada en dos palabras clave, una para definir el
comport amient o en el eje x u horizont al y ot ra para est ablecer el comport amient o en el eje y o vert ical.
La sint axis es de t ipo:
select orElement o { background-repeat : valorParaEjeX valorParaEjeY; }
Escribir background-repeat : repeat -x; sería equivalent e a escribir background-repeat : repeat -x no-
repeat ;
Hay ot ras palabras clave, aunque no son reconocidas por t odos los navegadores. En concret o, space
significaría que la imagen se repit e hast a donde sea posible pero sin cort arse en ningún moment o. La
palabra round vendría a significar que la imagen se repit e hast a donde sea posible y en caso de quedar
un espacio sobrant e, se produce un redimensionamient o del t amaño de la imagen hast a ajust arse al
espacio disponible. Ten en cuent a que si est ableces la propiedad background-repeat con una sint axis
que el navegador no reconoce, le aplicará su valor por defect o, que es repeat . Ten en cuent a t ambién
que no t odos los navegadores responden igual.
Prueba a est ablecer la propiedad background-repeat sobre el código que vimos ant eriorment e y
comprueba sus efect os.
EJERCICIO 1
Crea un document o HTM L con 4 elem ent os div de 250 píxeles de ancho y 250 píxeles de alt o, t odos
ellos con un margin de 30 píxeles en t odas direcciones y un padding de 30 píxeles en t odas direcciones.
En cada uno de los element os div coloca una imagen de fondo diferent e y un background-color
diferent e. Para comprobar si t us respuest as son correct as puedes consult ar en los foros
EJERCICIO 2
Crea dos páginas w eb cumpliendo est os requisit os:
a) Una página w eb debe t ener una única imagen de gran t amaño (por ejemplo 1024x768 píxeles) como
imagen de fondo, sin repet ición de la misma.
b) Una página w eb debe t ener una imagen de pequeño t amaño (por ejemplo 135x135 píxeles) que
mediant e el uso de la propiedad repeat se expanda como fondo de la página w eb creando un efect o
t apiz.


background
d-position, atta
achment, clip, size,
s origin CSS..
PROPIEDA
ADES DE FON
NDO
CSS t iene
e diferent e propiedades
p relacionada
as con el fon
ndo de las cajas
c del boxx-model o modelo
m de
cajas. Ya conocemos algunas de ellas. Vamo s a ampliar el conocimie
ent o sobre llos fondos est
e udiando
ot ras pro piedades: ba posit ion, background-at t achment
ackground-p a , ba
ackground-cllip, backgrou
und-origin,
backgroun
nd-size y la propiedad
p sh
hort and backkground.
PROPIEDA
AD BACKGRO
OUND-POSIT
TION
Est a prop
piedad nos permit
p e est ablecer la po sición de un
na imagen d e fondo. Po r defect o he
emos vist o
que la ima
agen de fond
do se sit úa en
e la part e su
uperior izquie ment o (just o en la esqui na int erior
erda del elem
del borde
e), pero podr emos especiificar ot ra po
osición usand
do est a prop iedad.
La sint axiss a emplear es

e del t ipo:
sele und-posit ion : especificacciónDePosició

ect orElemen t o {backgrou ón; }
La especiificación de posición puede

p hacer se de dist in
nt as manera
as. Una de ellas es es
scribir dos
porcent aj es, represen
nt ando el primero
p de ellos el des
splazamient o x (horizon
nt al) y el se
egundo el
mient o y (ve
desplazam ert ical). Ahorra bien, ¿el % de qué m edida es la que se usa?
? Se usa la medida
m del
ancho y alt o t ot al disp
ponible meno
os el ancho y alt o de la im
magen.
A efect os práct icos, lo

os result adoss aplicando porcent
p ajes son
s est os:
0% 0%: la imagen se coloca en posició

ón superior izquierda (posición p
por defect o , no hay
desplazam
mient o).
s coloca en posición su perior derec

100% 0%:: la imagen se cha (se desp laza el t ot al del espacio diferencia
en horizo nt al).
0% 100%:: la imagen se
s coloca en posición infferior izquierrda (se desp laza el t ot al del espacio diferencia
en vert ica
al).
100% 100
0%: la imagen
n se coloca en
e posición i nferior derecha (se desp
plaza el t ot al del espacio diferencia
en vert ica
al y en horizo
ont al).
om, 2006-2029
background-position, attachment, clip, size, origin CSS.
PROPIEDAD CSS background-position
Función de la propiedad Permit e definir la posición de la imagen de fondo de un element o.
Valor por defecto 0% 0%.
¿Se hereda
No
directamente?
Dos porcent ajes (primer % indica horizont al, segundo % indica vert ical)
Un porcent aje (indica % horizont al, y en la vert ical se produce el cent rado
aut omát ico de la imagen)
Dos unidades de medida, relat ivas o absolut as (primera unidad indica el

desplazamient o horizont al respect o al punt o de inicio, segunda unidad indica el
desplazamient o vert ical respect o al punt o de inicio).
Valores posibles para Una unidad relat iva o absolut a (indica desplazamient o horizont al respect o al
esta propiedad punt o de inicio, y en la vert ical se produce el cent rado aut omát ico de la imagen)
Dos palabras clave a elegir ent re left , cent er y right en la horizont al y t op, cent er
y bot t om en la vert ical (primera palabra indica posición en la horizont al y
segunda palabra clave indica posición en la vert ical)
Una palabra clave a elegir ent re left , cent er y right (indica posición en la
horizont al; en la vert ical se produce el cent rado aut omát ico de la imagen).
inherit (se heredan las caract eríst icas del element o padre).
background-posit ion: 25% 45%;

background-posit ion: 250px 2.55em;
Ejemplos background-posit ion: cent er bot t om;

aprenderaprogramar.com background-posit ion: right ;
background-posit ion: -10%;
background-posit ion: -10px -10px;
Se admit en valores negat ivos para especificar la posición de la imagen de fondo. Los valores negat ivos
se llevarán la imagen hacia fuera del espacio disponible y posiblement e quede una part e de la imagen
no visible. Una ut ilidad que puede t ener el est ablecer un valor negat ivo es para posicionar la imagen
encima del borde izquierdo o del borde superior.
Si usamos dos o más imágenes de fondo podríamos fijar sus posiciones separando la especificación de
posición de cada una de ellas como en est e ejemplo, (aunque algunos navegadores ant iguos pueden no
reconocer est a sint axis):
background-image: url(ht t p:/ / i.imgur.com/ afC0L.jpg), url(ht t p:/ / w w w .crimsonedit or.com/ images/ logo.jpg);
background-repeat : no-repeat ;
background-posit ion: -10px -10px, right bot t om;
PROPIEDAD BACKGROUND-ATTACHM ENT
Est a propiedad nos permit e est ablecer si la imagen se comport a como una imagen normal, y se muest ra
en una posición concret a, o si se desplaza a medida que el usuario se desplaza por la página w eb
haciendo scroll de modo que aparece siempre fija como fondo de un element o det erminado (siempre
que ese element o est é visible en la pant alla).
El comport amient o normal se corresponde con la palabra clave scroll, mient ras que el aparecer siempre
fija como fondo cuando hay desplazamient o se corresponde con la palabra clave fixed . Hay ot ra nueva
palabra clave, sólo soport ada por las últ imas versiones de los navegadores, que es local, cuyo
significado es que si el element o dent ro del cual est á la imagen t iene una barra de desplazamient o o
scroll, la imagen permanece fija en ese element o mient ras se haga scroll en él.
La mejor forma de ent ender el comport amient o de background-at t achment es realizar una prueba.
Para ello vamos a ut ilizar el código HTM L de base que venimos empleando a lo largo del curso.

body {background-color: yellow ;
background-image: url(ht t p:/ / i.imgur.com/ afC0L.jpg);
background-at t achment : fixed;
}
h1 {height : 450px; w idt h: 2000px;}
h2 {height : 450px;}
Comprueba cómo la imagen se mant iene en la part e superior izquierda de la página w eb aunque t e
desplaces vert icalment e hacia abajo (hemos int roducido una alt ura y anchura desproporcionada para
los element os h1 y h2 simplement e para forzar que la página se expanda en la vert ical y en la horizont al
y poder comprobar mejor el efect o que se genera).
Un aspect o import ant e a t ener en cuent a es que si se est ablece background-at t achment : fixed; la
posición de la imagen de fondo que visualizaremos ya no es la esquina int erior superior izquierda del
element o, sino que es la esquina superior izquierda de la vent ana visible en el navegador. Est o puede
hacer que la imagen de fondo no se vea (por haberse desplazado hast a la esquina superior izquierda de
la vent ana del navegador, quedando fuera del área de fondo del element o), o que aparezca cort ada
aparent ando ser una visualización errónea. Por eso muchos programadores y diseñadores w eb ut ilizan
background-at t achment preferent ement e para poner imágenes de fondo al element o body (cuya área
de visualización coincide normalment e con la vent ana del navegador). Si se usa background-at t achment
con ot ros element os, hay que est ablecer la posición adecuadament e para que la visualización sea
correct a.
Podrían especificarse varias imágenes de fondo y varios comport amient os de est a propiedad, de la
misma forma que vimos para la propiedad background-posit ion.
PROPIEDAD CSS background-attachment
Función de la propiedad Permit e fijar una imagen de fondo fija aunque haya desplazamient os.
Valor por defecto scroll
¿Se hereda
No
directamente?
scroll (comport amient o normal)
fixed (la imagen se mant iene como fondo aún en desplazamient os)
local (la imagen se mant iene como fondo si el element o t iene barras de
esta propiedad
desplazamient o y el usuario se mueve dent ro del element o)
body { background-image: url(ht t p:/ / i.imgur.com/ afC0L.jpg);

Ejemplos
aprenderaprogramar.com
background-at t achment : fixed; }
OTRAS PROPIEDADES DE FONDO
Además de las propiedades de fondo que hemos vist o, CSS cont empla ot ras menos comunes que son
las siguient es:
a) background-clip: det ermina la ubicación del área de fondo. Sus valores posibles son border-
box, lo cual sit ua el área de fondo en la esquina ext erior del borde en la part e superior
izquierda, padding-box, lo cual sit úa el área de fondo en la esquina int erior del borde en la
part e superior izquierda del borde, o content-box, lo cual sit ua el área de fondo en la esquina
superior izquierda del cont enido quedando excluida el área de padding. El valor de defect o es
border-box, lo que da lugar a que si hay un color de fondo se sit úe debajo del borde. La
propiedad background-clip afect a t ant o al color de fondo como a la imagen de fondo, sin
embargo hay que t ener en cuent a que la posición de la imagen de fondo es la que hemos
indicado al hablar de background-image y no se ve afect ada por border-clip. Es decir, la imagen
se mant iene en su posición a no ser que especifiquemos ot ra. Con border-clip la imagen podría
verse cort ada (si reducimos el área de fondo). Est a propiedad puede no funcionar
correct ament e en navegadores ant iguos.
b) background-origin: det ermina respect o a qué origen se ha de considerar la posición est ablecida
mediant e la propiedad background-posit ion. Sus valores posibles son border-box, padding-box
y content-box. Su valor de defect o es padding-box, de ahí que una imagen se sit úe en la
esquina int erior de la part e superior izquierda del borde. Si queremos sit uar la imagen en la
part e ext erior de la esquina (alineada con el borde) bast a est ablecer el background-origin:
border-box;
c) background-size : permit e est ablecer el t amaño de las imágenes de fondo. Se pueden ut ilizar las
palabras clave cover (indica que la imagen debe escalar su t amaño mant eniendo sus
proporciones hast a que encaje en una dimensión del fondo para cubrir complet ament e el área
de fondo; la imagen puede verse cort ada), auto (indica que la imagen se mant endrá con sus
dimensiones originales si no se ha modificado ninguna de ellas, o sin deformarse en caso de
haber especificado una de las dos dimensiones) ó contain (indica que la imagen debe escalarse
mant eniendo sus proporciones hast a alcanzar una de las dos dimensiones del área de fondo; la
imagen no se cort ará en ningún caso, pero el área de fondo puede quedar parcialment e
descubiert a). Est a propiedad puede no ser reconocida en navegadores ant iguos.
La propiedad background-size t ambién puede est ablecerse usando unidades de medida relat ivas o
absolut as y especificando dos medidas o solo una medida.
Si se especifica solo una medida como background-size: 30%; ó background-size: 4.5em ó background-
size: 50px, se ent iende que est a medida est ablece el ancho (w idt h) de la imagen. La alt ura
aut omát icament e se t rat a como si t uviera valor aut o.
Si se especifican dos medidas, la primera de ellas se considerará de aplicación a la dimensión horizont al

y la segunda a la dimensión vert ical. Por ejemplo en background-size: 4.5em 2.25em; la dimensión
horizont al se est ablece en 4.5em y la vert ical en 2.5em.
En el caso de usar porcent ajes, el % se calcula respect o a las dimensiones del área de fondo de la
imagen est ablecidas por background-origin. Por defect o coincide con el área de padding, pero puede
cambiarse si se cambia el valor de la propiedad background-origin. También genera una alt eración el
uso de background-at t achment : fixed; porque el área de fondo en est e caso es el área visible de la
vent ana del navegador.
PROPIEDAD SHORTAND BACKGROUND
Est a propiedad nos permit e est ablecer de forma conjunt a las diferent es propiedades de fondo.
background: { valorColorDeFondo valorImagenDeFondo valorRepet iciónImagen valorPosiciónImagen

valorSizeImagen valorOriginPosición ValorClipFondo valorAt t achment Fondo } ;
No es necesario seguir un orden concret o para escribir las propiedades. Si se dejan algunos valores sin
especificar, el navegador aplicará los valores por defect o que t engan esas propiedades sin especificar.
Por ejemplo si escribimos: background: { blue url(img1.jpg) } ; los valores correspondient es a la
repet ición, at t achment , posición, et c. serán los valores por defect o para est as propiedades.
Un aspect o import ant e a t ener en cuent a si se usa la propiedad short and background, es que cualquier
propiedad no especificada se sobreescribe a su valor por defect o anulando los posibles valores
ant eriores que se hubieran especificado. Por ejemplo si escribimos:
.cont ent 43 {background-repeat : no-repeat ; background: url(ht t p:/ / i.imgur.com/ afC0L.jpg); } podríamos
pensar que la imagen no se a repet ir porque hay indicado un valor no-repeat . Sin embargo, la imagen sí
se repet irá porque aunque no lo hemos indicado específicament e, al incluir una propiedad short and
con post erioridad a la especificación inicial de background-repeat , el valor de repet ición se sobreescribe
pasando a ser su valor de defect o (que es repeat , de ahí que la imagen sí se repet irá). Es un aspect o con
el que conviene ser cuidadosos. En principio, si elegimos usar la propiedad short and, no debemos
realizar ot ras especificaciones independient es para no incurrir en cont radicciones.
El esquema ant erior resume las propiedades relacionadas con el fondo (background) CSS. Obviament e
no debemos pret ender recordar de memoria t odas las propiedades ni t odos sus valores posibles o
palabras clave asociadas. No obst ant e, debemos t ener conocimient o de las posibilidades que nos ofrece
CSS para el manejo de fondos y saber buscar información y aplicar nuest ro conocimient o de la lógica de
CSS cada vez que nos sea necesario. Para ello es convenient e realizar pruebas y escribir código en
nuest ro ordenador.
CAPAS DE VISUALIZACIÓN
Hemos vist o que en el box-model o modelo de cajas CSS int ervienen diferent es element os como un
cont enido, un borde, un relleno o padding, una imagen de fondo, un color de fondo y un margen.
Cuando varios element os se superponen unos t ienen que visualizarse encima de ot ros, y de ahí que
hablemos de modelo t ridimensional o modelo de capas para las cajas CSS. El orden en que se muest ran
los element os es:
a) El borde se superpone al rest o de element os (capa 1)

b) El cont enido y el padding se sit úan debajo del borde (capa 2)
c) La imagen de fondo se sit úa debajo del cont enido y el padding (capa 3)
d) El color de fondo y el margen se sit úan debajo de la imagen de fondo (capa 4)
EJERCICIO
Crea un document o HTM L con 4 elem ent os div de 400 píxeles de ancho y 400 píxeles de alt o, t odos
ellos con un margin de 40 píxeles en t odas direcciones y un padding de 40 píxeles en t odas direcciones.
En cada uno de los element os div crea un borde y coloca una imagen de fondo diferent e y un
background-color diferent e. Usa la propiedad background-posit ion para hacer que la imagen est é
cent rada t ant o vert ical como horizont alment e respect o al borde del div (por ejemplo, si una imagen
mide 100x100 píxeles, deberá exist ir la misma dist ancia hast a el borde del div en las cuat ro
direcciones). Para comprobar si t us respuest as son correct as puedes consult ar en los foros

Posicionam
miento CSS: posiition static, rela
ative, absolute
e, fixed.
POSICION
NAM IENTO CSS
C
Hast a aho
ora conocem
mos que los element
e os HT
TM L se divid
den en dos grandes t iposs: element os block que
t ienden a ocupar el esspacio dispo
onible a t odo
o lo ancho y en
e caso de exist
e ir varios se sit úan un
nos debajo
de ot ros y element oss inline que ocupan el espacio neces
sario dent ro
o de una líne
ea y en caso
o de exist ir
varios se sit
s úan uno ju
unt o a ot ro en
e la misma línea (siemp re que haya espacio).
Los princi pales element os HTM L t ipo block so n:
a) D
Divisores: divv
b) Pá
árrafos: p
c) ormularios: form
Fo
2, h3, h4, h5, h6.
d) Tíítulos: h1, h2
e) Liistas: ul, ol
f) e listas: li
Ellementos de
g) ablas: t able
Ta
h) Otros
O : cent er,, pre, t body, t d, t h, t r…
Los princi pales element os HTM L t ipo inline so

on:
a) Liinks: a
b) Divisores
D : spa
an
c) mágenes: im g (aunque est e element o t iene carac
Im ct eríst icas esspeciales)
ontroles de formulario: input , label
d) Co
e) Otros
O : st rong,, u, select …
Queda fu
uera de la clasificación
c el elementt o body, qu e engloba t odo el esp acio dispon ible en el
disposit ivo de visualización.
Cuando t enemos
e dist int os elemen
nt os t ipo blo
ock cada uno
o se coloca en
e una nueva
a línea dist in
nt a a la del
element o ant erior, ess decir, se co locan uno de
ebajo de ot ro
o:
Bloque1 t iene est e co

ont enido de t ext o

ont enido de t ext o

ont enido de t ext o …
Cuando t enemos
e dist int
i os elemen
nt os en línea
a se colocan uno
u junt o a ot
o ro:
Element oEnLínea1
o Ele
ement oEnLín
nea2 Elemen
nt oEnLínea3
om, 2006-2029
Posicionamiento CSS: position static, relative, absolute, fixed.
Además los element os en línea que est án dent ro de un bloque se insert an en la misma línea que el
cont enido del bloque. Por ejemplo:
Est e t ext o es un párrafo y esto es un link inline y aquí cont inúa el párrafo.
Recordar que las propiedades w idt h y height sólo son aplicables a element os t ipo block y element os
insert ados en una posición que son reemplazados por un objet o (ent re ellos img, input , t ext area, select ,
object ).
Ahora bien, cuando creamos páginas w eb necesit aremos que element os de dimensiones det erminadas
se sit úen en posiciones det erminadas. Por ejemplo podemos querer t ener t res element os con
dimensiones w idt h y height definidas (por t ant o bloques) sit uados en det erminadas posiciones como
vemos en est e esquema:
Bloque 1
Bloque 3
Bloque 2
Con el código simple que hemos vist o hast a ahora est o no sería posible, ya que unos element os se
sit uarían debajo de ot ros, sin cumplir nuest ro objet ivo de sit uarlos en posiciones específicas.
CSS t iene dist int as propiedades y posibilidades que nos van a permit ir gest ionar el posicionamient o de
element os para crear diseños at ract ivos y conforme a nuest ras necesidades. Comenzaremos el est udio
de est as posibilidades con la propiedad CSS posit ion.
PROPIEDAD POSITION
Est a propiedad nos permit e est ablecer la posición de un element o.
select orElement o {posit ion: especificaciónDePosición; }
PROPIEDAD CSS position
Función de la propiedad Permit e definir el t ipo de posición de un element o y su comport amient o.
Valor por defecto st at ic
Aplicable a Element os t ipo block y algunos element os inline especiales como img.
static (comport amient o normal o por defect o)
relative (permit e que un element o se desplace respect o a lo que hubiera sido

su posición normal; el rest o de element os cont inúan en su posición ignorando al
que se desplaza, lo que puede crear superposiciones; el espacio libre que deja el
element o queda libre).
absolute (permit e que un element o se desplace respect o al origen de

coordenadas del primer element o cont enedor posicionado ó respect o a la
Valores posibles para esquina superior izquierda de la vent ana de visualización; el rest o de element os
esta propiedad act úan como si el desplazado no exist iera, por lo que su espacio será ocupado
por ot ros element os; puede crear superposiciones)
fixed (permit e fijar un element o en una posición respect o al origen de

coordenadas del primer element o cont enedor posicionado ó respect o a la
esquina superior de la vent ana de visualización; el element o se mant endrá en la
vent ana de visualización o view port , siempre en una misma posición aunque el
usuario se desplace por la web haciendo scroll)
Ejemplos #cont ent 1 {posit ion: relat ive; }

aprenderaprogramar.com .element oFijado {posit ion: fixed; }
La posición absolut a de un element o que no est á dent ro de ningún ot ro se det ermina respect o a la
part e superior izquierda del element o ht ml (part e superior izquierda de la vent ana donde se visualiza la
página w eb; normalment e coincide con la part e superior izquierda del element o body).
Si un element o est á dent ro de varios cont enedores (p.ej. dent ro de varios div) el origen de coordenadas
se est ablece respect o a la esquina superior izquierda del cont enedor que t enga un valor de posit ion
est ablecido y dist int o de st at ic o, en caso de no exist ir ningún element o cont enedor posicionado,
respect o a la esquina superior izquierda del element o ht ml (part e superior izquierda de la vent ana
donde se ve la página w eb). Est o se comprenderá con los ejemplos de código que veremos.
Los ejemplos de código sobre el uso de est a propiedad los veremos una vez hayamos est udiado algunas
propiedades que se usan habit ualment e junt o a ést a (t op, right , bot t om y left ).
Est a no es la única propiedad para est ablecer posiciones de element os. Hay ot ras propiedades
import ant es como float , que veremos más adelant e.
PROPIEDADES TOP, RIGHT, BOTTOM Y LEFT
Est as propiedades nos permit en definir el desplazamient o de la posición de un element o respect o a un

origen de coordenadas y el origen de coordenadas que se t oma.
PROPIEDADES CSS top, right, bottom y left
Permit en definir el desplazamient o de un element o y el origen de

coordenadas que se t omará para el mismo.
Valor por defecto Aut o
Aplicable a Element os que est án posicionados (no aplica si la posición es st at ic).
aut o (no hay desplazamient o especificado y como origen de coordenadas se

t oma la esquina superior izquierda del element o padre)
Valores posibles para Una unidad de medida relat iva (se admit en porcent ajes).
estas propiedades
Una unidad de medida absolut a.
Ejemplos #menu1 { posit ion: relat ive; t op: 40px; left : 2em; }
aprenderaprogramar.com #moduloEGM { posit ion: absolut e; bot t om: 5%; left : 30px; }
Para element os con posición relat ive est as propiedes definen cuánt o se desplaza el element o respect o
a lo que sería su posición normal.
Para element os con posición absolut e o posición fixed est as propiedades definen cuánt o se desplaza el
element o respect o a las coordenadas de origen.
Se admit en valores de desplazamient os negat ivos.
En el caso de usar porcent ajes, ést e se calcula:
a) Respect o al valor de alt ura (height ) del element o si se aplican con t op ó bot t om.
b) Respect o al valor de anchura (w idt h) del element o si se aplican con right ó left .
No t iene sent ido ut ilizar t op y bot t om al mismo t iempo, porque sería decir que el element o sube y baja.
Hay que ut ilizar sólo una de est as dos propiedades. Lo mismo podemos decir para right y left .
EJEM PLOS DE POSICIONAM IENTO RELATIVO
A cont inuación veremos algunos ejemplos de uso de las propiedades ant eriorment e especificadas. Para
ello vamos a ut ilizar el código HTM L de base que venimos empleando a lo largo del curso.
Posicionam
ative, absolute
e, fixed.
/ * Curso CSS est i los aprenderap

programar.com * /
* {ffont -family: ari al; }
bo
ody {w idt h: 600
0px;}
divv {border-st yle:: solid;}
divv div {border-stt yle: dashed; bo
order-color: gre
een; margin: 5p
px;}
divv div div {borde
er-st yle: dashed
d; border-color:: red; margin: 5px;}
5
Con est o lo único que

e hemos hech
ho es poner bordes y márgenes para visualizar las cajas que conforman
c
la página w eb. El resu lt ado debe ser
s similar a est e:
Vemos un
n div en colo r verde corr espondient e al menú (de
ent ro del cua
al hay ot ro d
div en color rojo
r con el
t ext o “ M enú”
e , una lín
nea generada
a por el <hr/ > y una list a ul con los it ems
e de menú
ú).
M L y est ablecce como id d e dicho div “ menu1” . El código HTM L de ese frag
Accede al código HTM gment o de
w eb qued
dará así:
<! -- menu -->

<d
div id=" menu1" >
<d
div>M enú</ div>
>
<h
hr/ >
<u
ul>
<lii><a href=" #" >Inicio</ a></ li>
<lii><a href=" libro
os.ht ml" >Libro s de programacción</ a> </ li>
<lii><a href=" curssos.ht ml" >Curssos de program ación</ a> </ li>
>
<lii> <a href=" hum
mor.ht ml" >Hum
mor informát ico
o</ a> </ li>
<// ul>
<// div>
<! -- fin menu -->
mos a modifficar la defin ición de est i los CSS para

Ahora vam a hacer lo sig
guient e: mod
dificaremos la
l posición
del eleme
ent o con id “ menu1” parra que se desplace 50 pix
xeles hacia abajo
a y 40 piixeles hacia la derecha
respect o a lo que deb
bía ser su po sición origin
nal. Además vamos
v egundo elem ent o de la
a haccer que el se
om, 2006-2029
Posicionam
ative, absolute
e, fixed.
list a de itt ems de me

enú se despllace 150 pixxeles hacia la
a izquierda respect o a lo que debi era ser su
posición normal
n y el t ercer eleme
ent o de la lisst a 50 pixeles
s a la izquierrda respect o de lo que debiera
d ser
su posició
ón normal. Pa
ara ello usam
mos est e cód
digo y visualiz
zamos el ressult ado:

programar.com * /
bo
ody {w idt h: 600
0px;}
order-color: gre
een; margin: 5p
px;}
divv div div {borde
er-st yle: dashed
5
#m
menu1 { posit io
on:relat ive; t op::50px; left : 40p x; }
li:n
nt h-child(2) {po
osit ion: relat ive
e; right : 150px;}}
li:n
nt h-child(3) {po
osit ion: relat ive
e; right : 50px;}
Comproba
amos que la caja del divv se ha despllazado (con t odo su contt enido). Igua
alment e los element
e os
de list a in
ndicados se han
h desplaza
ado. Compro
obamos algu nas cosas cu
uriosas: al de
esplazar la ca
aja del div,
e las dimenssiones del el ement o bod
ést a sale por fuera de dy y se ha su
uperpuesto c
con la caja que
q exist ía
debajo. Al
A desplazar el segundo element
e o de
e list a 150 px
p hacia la izzquierda, el e
element o ha
a quedado
cort ado y no se visu aliza part e de
d él (si el desplazamie a sido t odavvía mayor, n o se vería
ent o hubiera
ninguna part er element o de la list a
p e de est e it em de la list a aparentt ando haberr “ desaparecido” . El t erce
se ve desp
plazado pero
o no se ha sa
alido de la pa
ant alla.
Para desp
plazar hacia abajo usam os t op y parra desplazar hacia la derecha usamo
os left . Pued
de parecer
confuso porque
p left significa
s uierda, pero usar left no
izqu o significa “ desplazar
d ha
acia la izquie
erda” , sino
“ respect o a lo que sería la posición
p no rmal de su
u lat eral izq
quierdo, de
esplazar lo indicado” ,
correspon
ndiendo un valor
v posit ivo
o a “ desplaza
ar hacia la d erecha” y un
n valor negatt ivo a “ despllazar hacia
la izquierd
da” .
om, 2006-2029
EJEM PLOS DE POSICIONAM IENTO ABSOLUTO
Seguimos t rabajando sobre el HTM L y hoja de est ilos ant erior. Define los siguient es est ilos css y
visualiza el result ado en t u navegador:

body {w idt h: 600px;}
div {border-st yle: solid;}
div div {border-st yle: dashed; border-color: green; margin: 5px;}
div div div {border-st yle: dashed; border-color: red; margin: 5px;}
#menu1 { posit ion:absolut e; }

body {w idt h: 600px;}
#menu1 { posit ion:absolut e; left:0; top:0; }
El código #menu1 { posit ion:absolut e; } equivale a #menu1 { posit ion:absolut e; left : aut o; t op: aut o; } lo
que supone que se t oma como origen de coordenadas el del element o padre. De ahí que en la imagen
de la izquierda se vea la caja en su posición nat ural, pero al est ar posicionada de forma absolut a es
ignorada por el rest o de element os y su espacio es ocupado como si no est uviera ahí.
El código #menu1 { posit ion:absolut e; left :0; t op:0; } significa que el origen de coordenadas será el del
primer cont enedor posicionado o, si no exist e, la esquina superior izquierda de la vent ana de
visualización. En est e caso se t oma la esquina superior izquierda de la vent ana como origen de
coordenadas.
Cuando se est ablece posit ion en absolut e o fixed el ancho del bloque se ajust a al cont enido (except o si
est á est ablecido específicament e mediant e la propiedad w idt h).
Prueba a cambiar los valores de left y t op y comprueba sus result ados. Por ejemplo si est ableces valores
left : -50px; t op: -50px; verás cómo la caja “ se sale de la pant alla” por la esquina superior izquierda. Si
est ableces right :0; t op:0; verás que la caja se sit úa en la part e superior derecha de la pant alla.
Supón ahora que quieres usar como origen de coordenadas absolut as la esquina superior izquierda del
div cont enedor del que est amos usando como ejemplo. Ese div cont enedor t iene, apart e del menú,
varias cosas más como t ext o con imágenes y un formulario.
Para hacer que el div del menú t ome para origen de coordenadas el div cont enedor en lugar de la
esquina superior izquierda de la pant alla hemos de posicionar el cont enedor. Posicionarlo significa
darle un valor de position distinto del valor por defecto (static). Est o podemos hacerlo de varias
maneras. Por ejemplo podríamos poner un id al div cont enedor y aplicarle una regla nombreEscogido
{posit ion: relat ive; }. No es necesario est ablecer un desplazamient o ya que nosot ros ahora lo único que
queremos es que dicho element o se ident ifique como un element o posicionado, y para ello est ablecer
su propiedad posit ion como relat ive es suficient e.
También podemos hacerlo como vemos en est e código:

body {w idt h: 600px; border-st yle:dot t ed;}
div {border-st yle: solid; position:relative;}
#menu1 { posit ion:absolut e; left :150px; t op:30px; }
Hemos est ablecido para t odos los div su propiedad posit ion como relat ive. Al ir a realizar el
posicionamient o del element o con id menu1 el navegador busca el primer div cont enedor posicionado
y realiza el desplazamient o respect o a su esquina superior izquierda. Comprueba la diferencia al
mant ener t odos los div con posit ion:relat ive; y visuliza cómo cambia el result ado respect o a eliminar
ese posicionamient o para t odos los div: el origen de coordenadas que se t oma es dist int o.
EJEM PLOS DE POSICIONAM IENTO FIXED
Seguimos t rabajando sobre el HTM L y hoja de est ilos ant erior. Escribe y comprueba los result ados con
est e código:

body {w idt h: 600px; height :2400px; border-st yle:dot t ed;}
#menu1 { posit ion:fixed; left :50; t op:0;}
Hemos est ablecido un valor de height para body aleat oriament e grande para forzar que aparezcan
barras de scroll vert ical en la página w eb.
Al hacer scroll, comprobarás que la caja del element o con id menu1 se mant iene fija en una posición de
la página aunque nos desplacemos con el scroll.
El comport amient o del origen de coordenadas con fixed es igual al que hemos explicado con absolut e.
EJERCICIO 1
Define un document o HTM L con un div padre (divPadre), dent ro del cual exist an ot ras 3 cajas
cont enedoras div (div1, div2 y div3), cada una de ellas con unas dimensiones de 300x300px, 40 píxeles
de margin en t odas direcciones, 30 píxeles de padding en t odas direcciones y un background color
diferent e. Usando posicionamient o relat ivo genera un desplazamient o de los div de la siguient e
manera:
a) El div 1 deberá desplazarse 200 píxeles a la derecha y 100 píxeles hacia abajo respect o a lo que sería
su posición normal.
b) El div 2 deberá desplazarse 50 píxeles a la izquierda y 50 píxeles hacia arriba respect o a lo que sería
c) El div 3 deberá desplazarse 450 píxeles a la derecha y 300 píxeles hacia arriba respect o a lo que sería

EJERCICIO 2
Define un document o HTM L con 3 cajas cont enedoras div (div1, div2 y div3), la primera con unas
dimensiones de 600x600px y un background color amarillo. La segunda con dimensiones 400x400px y
un background color verde. La t ercera con dimensiones 100x100px y background color azul. Usando
posicionamient o absolut o est ablece para el div2 y el div3 el mismo origen que para el div1, de modo
que el efect o generado sea ver un cuadrado amarillo dent ro del cual hay un cuadrado verde dent ro del
cual hay un cuadrado azul. Para comprobar si t us respuest as son correct as puedes consult ar en los
foros aprenderaprogramar.com.
EJERCICIO 3
Define un document o HTM L con varios div que cont engan suficient e t ext o como para que la página se
muest re con scroll (barras de desplazamient o). El primero de los div debe cont ener el t ext o <<Est a
página w eb ut iliza cookies. Si cont inúa navegando acept a el uso de cookies.>>, un valor height (alt ura)
de 100 píxeles y color de fondo amarillo. Usando posicionamient o fixed, fija est e div en la part e
superior de la página de modo que se cont inúe visualizando aún cuando hagamos scroll. Para
comprobar si t us respuest as son correct as puedes consult ar en los foros aprenderaprogramar.com.

Propiedad display
d CSS.
DISPLAY CSS
C
Los eleme
ent os HTM L se dividen en
e dos grand es t ipos: element os blocck que t iende
en a ocupar el espacio
disponible
e a t odo lo ancho
a y en ca
aso de exist ir
i varios se sit
s úan unos debajo
d de ott ros y element os inline
que ocup an el espaci o necesario dent ro de una
u línea y en
e caso de exist
e ir varios se sit úan un
no junt o a
a misma línea (siempre que
ot ro en la q haya esp
pacio). La pr opiedad disp
play nos perrmit e alt erar el t ipo de
caja con que
q se muestt ra un eleme
ent o.
Sabemos que por ejem

mplo los elem
ment os t ipo t ít ulo como h1 son elem
ment os blockk, y por t ant o de forma
“ nat ural” t ienden a occupar t odo el or el cont rari o element oss como los li nks a o las
e ancho de l a página. Po
imágeness son elemen
nt os inline. Veamos cómo
o la propieda
ad display pe ar est as cuali dades.
ermit e alt era
AD DISPLAY
PROPIEDA
Est a prop
piedad nos permit
p e est ablecer
a el t ip
po de caja que
q el naveg
gador emple
eará para vis
sualizar un
element o,
o siendo los t ipos más co
omunes inlin e y block, au
unque exist en
n bast ant es ot ros.

e del t ipo:
select orElement o {disp lay: especific

caciónDeVisualización; }
PROP
PIEDAD CSS display
d
edad Per mit e definir el t ipo de po
osición de ca
aja para visua
alizar un elem
ment o.
Dep
pende del element
e o (i nline para element os inline y bl ock para
Valor po
or defecto
ment os t ipo block)
elem
Aplicable a Tod
dos los eleme
ent os.
ne (el elementt o se muest ra

inlin a en una caja inline)
i
ck (el elementt o se muest ra en una caja block).

bloc b
ne (el elementt o no se muest ra; el efecto

non o es como si no exist iera, por lo que
su espacio
e será o cupado por o t ros elemento
os)
Valores posibles parra list--item (el elem

ment o se comp
port a como si fuera un elem
ment o li)
opiedad
esta pro ne-block (el element
inlin e o gene
era una caja block
b pero qu
ue se comportt a como si
fuerra inline admiit iendo ot ros element os en
n la misma lín
nea; el compo
ort amient o
se asemeja
a al de los element os
s img)
Ot ro
os que llevan a que el elem
ment o simule
e el comport a
amient o de ott ro (inline-
t abl e, t able, t abl e-capt ion, t ab
ble-cell, t able-column, t ablle-column-gro
oup, t able-
foott er-group, t ab
ble-header-gro
oup, t able-row
w , t able-row -g
group)
om, 2006-2029
Propiedad display
d CSS.
PROP
PIEDAD CSS display
d
Ot ro
os avanzados (flex, inline-fl ex, grid, inline
e-grid, run-in))
erit (se hereda

inhe an las caract eríst
e icas del el ement o padre
e).
Ejemplo s #co nt ent 1 {displa

ay: inline;}
aprende
eraprograma
ar.com .element oM ont er {display: blo
ock;}
La propiedad display admit e num

merosos valo
ores, pero lo
os más usado
os son inline
e, block e in line-block.
Son est os
o t res valo
ores los q ue debemo
os aprenderr ahora. El rest o loss iremos co
onociendo
progresiva
ament e a medida
m que an result ar necesarios o cuando profundicem
e nos pueda mos en el
conocimie
ent o de CSS
S. Tener en cuent a t am
mbién que est
e as ot ras propiedades
p a que nos referimos
pueden n o ser recono
ocidas por m uchos naveg
gadores.
A cont inu ación verem

mos algunos ejemplos
e de uso de las propiedades
p nt e especificadas. Para
ant eriormen
os a ut ilizar el
ello vamo e código HTM
M L de base que
q venimos empleando a lo largo de
el curso.
Define loss siguient es est

e ilos css y visualiza
v el r esult ado en t u navegado
or:

programar.com * /
* {ffont -family: ari al;}
bo
ody {w idt h:600p
px;}
order-color: gre
een; margin: 5p
px;}
divv div div {borde
er-st yle: dashed
5
h1
1 {border-st yle: dashed; borde
er-color: green;}
h2
2 {border-st yle: dashed; borde
er-color: red; }
li {border-st
{ yle: dot
d t ed; border-w idt h:t hin; borrder-color:brow
w n; margin: 3pxx;}
Con est o lo único que

e hemos hech
ho es poner bordes y márgenes para visualizar las cajas que conforman
c
la página w eb. El resu lt ado será siimilar a est e::
om, 2006-2029
Propiedad display CSS.
Vemos un div en color verde correspondient e al menú (dent ro del cual hay ot ro div en color rojo con el
t ext o “ M enú” , una línea generada por el <hr/ > y una list a ul con los it ems de menú).
Accede al código HTM L y est ablece como id de dicho div “ menu1” .
EJERCICIO RESUELTO
Sin ejecut ar código, indica cuáles deberían ser los result ados obt enidos al añadir las líneas que se
indican en la t abla al archivo CSS. Complet a la t abla primero sin ejecut ar el código. Luego, compara t u
solución con la expuest a en la solución.
Fragmento de código añadido Resultado
li {display: inline;}
img {display: block;}
#menu1 {display:none;}
h2 {margin-left:30px; display:list-item;}
li {display: inline-block;}
ul {display: table; }
li {display: table-cell; padding:10px;}
Propiedad display CSS.
SOLUCIÓN
Prueba a visualizar los result ados en t u navegador al añadir est os fragment os de código y comprueba
que obt ienes los mismos result ados que se indican a cont inuación:
Fragmento de código añadido Resultado
Los element os de it em de menú que son li y que ocupaban cada

li {display: inline;} uno una línea, se ponen en la misma línea. Sólo cuando no caben
en una línea cont inuan en la siguient e.
Las imágenes que est aban en una sola línea unas junt o a ot ras se
img {display: block;} sit úan cada una en una línea comport ándose como element os
block
El menú (con sus cajas int eriores, it ems de menú, et c.)

#menu1 {display:none;} desaparece complet ament e y su espacio es ocupado por el t ext o
“ Aprender a programar es…”
h2 {margin-left:30px; display:list-item;} El t ít ulo h2 aparece con una viñet a como si fuera un element o li
de una list a
A diferencia de est ablecer sólo inline, si un element o salt a de

li {display: inline-block;} línea lo hace complet ament e por ser un bloque. Su t ext o no
puede cort arse ent re líneas como ocurriría si fuera inline.
ul {display: table; } Hace que la list a se comport e como una t abla donde cada it em
li {display: table-cell; padding:10px;} es una celda.
Hay una curiosidad. En la imagen donde vimos las cajas podemos observar que el element o h2 t iene un
espacio libre por arriba y por debajo, que corresponde a un margin-t op y margin-bot t om aut omát ico
que aplica el navegador por defect o para est e t ipo de element os. Si escribimos h2 {display: inline;}
comprobamos no sólo que la caja deja de ocupar t odo el ancho disponible sino que los márgenes
desparecen ¿Por qué? Porque en los element os inline no son aplicables (o se ignoran si est án
est ablecidas) ciert as propiedades como w idt h, height , margin y float . De est e modo, al cambiar el
format o de caja no sólo est amos afect ando a que los element os ocupen una línea a t odo lo ancho o no,
sino t ambién ot ras propiedades que pueden quedar desact ivadas cuando se cambia el t ipo de caja
usando la propiedad display. Tener en cuent a t ambién que los element os inline sólo pueden cont ener
ot ros element os inline o t ext o en su int erior.
Ot ra curiosidad. Posiblement e no obt engas nada coherent e, pero comprueba qué ocurre si como css
ut ilizas est a única declaración * {font -family: arial; display: inline-block;}
Si t e surgen dudas puedes consult ar en los foros aprenderaprogramar.com.

Propiedad float
f y posicion
namiento flotan
nte CSS.
POSICION
NAM IENTO FLOTANTE
F
Aunque ya
y conocem os la propie
edad posit io
on, que nos permit e org
ganizar la p
posición de element
e os
dent ro de
e una página
a w eb, est a propiedad
p n o es lo sufic
cient ement e flexible com
mo para logr ar diseños
at ract ivoss y que se visualicen correct
c amen o t ipo de d isposit ivos. Vamos a est
nt e en t odo e udiar el
denomina
ado “ posicio namient o flo
ot ant e” , que
e amplía las posibilidades para organ
nizar los elem
ment os en
la w eb.
onamient o fl ot ant e pued

El posicio de result ar un
u poco des
sconcert ant e o confuso cuando se empieza
e a
t rabajar con
c él. Comp
prender su funcionamien
f nt o y posibi lidades requ
uiere t iempo
o y bast ant es
s horas de
est udio y ejercicio. Hay
H er paciencia y pract icar para llegar a compren derlo. Sin embargo, a
que t ene
medida q ue se conocce y se adqu iere experie
encia result ará fácil t raba
ajar con él y se compren
nderán las
vent ajas que
q supone, de ahí que sea
s la forma de posiciona
amient o máss ut ilizado.
Lo primerro que t rat aremos

a de abordar
a es la
a definición de “ flot ar” . El concept o de posicio
onamient o
flot ant e se
s creó inicialment e pa
ara lograr q ue el t ext o se sit uara alrededor d
de las imáge
enes y no
necesariament e debajo de ellas.
Crea un archivo HTM L con est e co

ont enido:
<h
ht ml>
<h
head>
<t it le>Port al w eb
b - aprenderaprrogramar.com<
</ t it le> <met a charset
c =" ut f-8" >
<liink rel=" st ylesh
heet " t ype=" t exxt/ css" href=" esst ilosCU01034D
DA.css" >
<// head>
<b
body>
<d
div>
<p
p>Aquí un párra
afo de t ext o sit uado
u ant es de la
l imagen, dentt ro de un div co
ont enedor</ p>
<im
mg src=" ht t p:/ / i.imgur.com/ affC0L.jpg" alt =" Not
N epad++" t it le="
l Not epad++
+, un út il edit or de t ext o" >
<p
p>Aquí ot ro párrrafo de t ext o. CSS
C es un lengu
uaje ut ilizado en
n la present ació
ón de documen
nt os HTM L.
Un
n document o HTM
H L viene siendo coloquialm
ment e “ una pág
gina w eb” . Así,, podemos deccir que el lengu
uaje
CS
SS sirve para do
ot ar de present ación
a y aspect o,
o de “ est ilo” , a una página w eb.
e
<// p>
<// div>
<// body>
<// ht ml>
Y un arch ivo de hoja de est ilos (n osot ros est amos

a usando
o el nombre de archivo e
est ilosCU010
034DA.css)
con est e código
c que nos
n permit e ver
v el borde de la caja co
ont enedora:

programar.com * /
bo
ody {w idt h: 410
0px; border-st yl e: dot t ed; }
divv {border-st yle:: solid; margin: 20px; padding: 5px; backgrou
und-color: yello w ;}
p {t
{ ext -align: justt ify; margin:15p
px;}
im
mg {margin:10pxx;}
om, 2006-2029
Propiedad float y posicionamiento flotante CSS.
Se llama “ flot ar” un element o a est ablecer un comport amient o especial para él definiendo un valor
para la propiedad CSS float .
select orElement o {float : valorFloat ; }
La propiedad float sólo admit e 3 valores: none (el element o no flot a), right y left .
El valor none significa que el element o se comport ará de la forma habit ual dent ro del flujo del
document o HTM L, y es el valor por defect o. Un element o con float : none; decimos que no es flot ant e.
El valor right hará que el element o se desplace hacia la derecha. Se desplazará dent ro de su línea de
posición y dent ro de su cont enedor t ant o como sea posible, y que los element os que vienen a
cont inuación se sit uarán envolviéndolo (en est e caso lo rodearán por la izquierda, ya que el element o
est ará complet ament e a la derecha). Los element os ant eriores no cambian su comport amient o.
El valor left hará que el element o se desplace hacia la izquierda. Se desplazará dent ro de su línea de
posición y dent ro de su cont enedor t ant o como sea posible y que los element os que vienen a
cont inuación se sit uarán rodeándolo (en est e caso lo rodearán por la derecha, ya que el element o
est ará complet ament e a la izquierda). Los element os ant eriores no cambian su comport amient o.
La propiedad float no se puede usar para centrar elementos en una página web. No exist e un valor
cent er para est a propiedad. Unicament e sirve para “ arrast rar” element os hacia la derecha o hacia la
izquierda, t ant o como sea posible, generando un cambio en el flujo del document o HTM L.
Ahora visualiza el result ado modificando la regla css del código ant erior para element os img de las
siguient es maneras:
1) img {margin:10px; float :none;} / * Element o img no es flot ant e * /

2) img {margin:10px; float :right ;} / * Element o img es flot ant e * /
3) img {margin:10px; float :left ;} / * Element o img es flot ant e * /
Visualiza los result ados, que deberán ser similares a est os:
Comprobamos cómo con float :none; para la imagen, el comport amient o es el normal. Con float : left ; el
párrafo ant erior a la imagen no cambia su comport amient o. Sin embargo, el párrafo post erior se sit úa
envolviendo (w rapping) al element o flot ant e. Con float : right ; ocurre lo mismo, pero en est e caso la
imagen est á lo más a la derecha posible dent ro de su cont enedor y el t ext o del párrafo que viene
debajo envuelve la imagen por su lado izquierdo.
Un aspect o import ant e es que la propiedad float sólo debe usarse con element os t ipo block, o quizás
sería preferible decir sobre element os que t engan una anchura definida (valor w idt h est ablecido. Un
valor w idt h est ablecido significa que lo habremos especificado a t ravés de código sobre un element o
block, o que el element o es un element o img sin w idt h especificado pero que t iene un valor w idt h
“ implícit o” , el ancho de la propia imagen).
Ahora bien, si decimos que sólo debe usarse con element os t ipo block ¿cómo es que hemos aplicado
con éxit o la propiedad a un element o img que es un element o inline? La explicación es que cuando se
aplica la propiedad float sobre un element o, ést e aut omát icament e pasa a comport arse como una caja
t ipo block. Dicho est o podríamos pensar que t ambién podríamos aplicarle la propiedad float a un
párrafo en el ejemplo ant erior. La respuest a es: no. No podemos, o al menos no debemos, porque los
párrafos del ejemplo ant erior aún siendo block no t ienen un ancho especificado. La propiedad float
sólo debe aplicarse a elementos con un ancho (width) definido explícita o implícitamente. Si se aplica
la propiedad float a un element o sin ancho especificado podemos t ener result ados impredecibles, o
diferent es según el navegador empleado. Por t ant o no debemos hacerlo.
CAJAS ENVOLVENTES EN TORNO A UN ELEM ENTO FLOTANTE
Hemos comprobado cómo un element o como un párrafo envuelve a un element o flot ant e como una
imagen. La pregunt a que nos plant eamos ahora es: ¿cuál es la caja del párrafo envolvent e? Lo podemos
visualizar si en el ant erior código CSS usamos est as reglas:
p {t ext -align: just ify; margin:15px; border-st yle:solid; border-color:grey;}

img {margin:10px; float :left ;}
En la imagen vemos la respuest a: el element o flot ant e ha salido del flujo normal del document o. La caja
del element o envolvent e t iene su forma normal y se encuent ra por debajo del element o flot ant e.
Los bordes, imágenes de fondo y colores de fondo de los elementos envolventes se sitúan debajo de
los elementos flotantes a los que envuelven.
¿CUÁNTOS ELEM ENTOS ENVUELVEN A UN ELEM ENTO FLOTANTE?
En el ejemplo que venimos viendo un párrafo envuelve a la imagen que ha t omado posicionamient o
flot ant e. ¿Pero qué ocurriría si t enemos varios párrafos de pequeño t amaño? ¿El primero envuelve y los
demás siguen su flujo normal o t odos los siguient es element os van envolviendo?
Vamos a modificar el fragment o de código HTM L de la et iquet a body así:
<body>
<div>
<p>Aquí un párrafo de t ext o sit uado ant es de la imagen, dent ro de un div cont enedor</ p>
<p>Aquí primer párrafo t ras la imagen</ p> <p>Aquí segundo párrafo t ras la imagen</ p>
<p>Aquí t ercer párrafo t ras la imagen</ p> <p>Aquí cuart o párrafo t ras la imagen</ p>
<p>Aquí quint o párrafo t ras la imagen</ p>
</ div>
</ body>
Y el código CSS lo dejaremos así:

body {w idt h: 510px; border-st yle: dot t ed; }
div {border-st yle: solid; margin: 15px; padding: 5px; background-color: yellow ;}
Al comprobar el result ado, vemos que t odos los element os a cont inuación de un element o flot ant e
proceden a envolverlo por un lat eral mient ras haya espacio para ello. Podemos hacer que los
element os debajo de un element o flot ant e dejen de envolverlo a part ir de un element o dado usando la
propiedad clear, que explicaremos a cont inuación.
EJERCICIO
Para cada una de las siguient es afirmaciones indica si es verdadera o falsa, y just ifica brevement e t u
respuest a:
a) La propiedad float puede t omar cuat ro valores: t op, right , bot t om y left .
b) float es una propiedad que nos permit e maquet ar páginas w eb (document os HTM L).
c) Usando float : cent er; podemos cent rar el cont enido de un element o respect o de su caja
cont enedora.
d) Un element o flot ant e sale del flujo normal de posicionamient o de element os en una página w eb.
e) Todos los element os a cont inuación de un element o flot ant e lo envuelven, a no ser que
especifiquemos lo cont rario usando la propiedad clear.


Propiedad float
f y posicion
namiento flotan
nte CSS.
POSICION
NAM IENTO FLOTANTE
F
Hay varia
as cuest ione
es sobre el posicionami ent o flot antt e que aún debemos rresolver. Porr ejemplo,
do la propiedad clear po
veremos cómo usand odemos deffinir que un element o y aquellos qu
ue vengan
después de
d est e debe
en dejar de envolver al element o fl ot ant e. Tam
mbién verem os qué ocurrre cuando
varios element os conssecut ivos se flot an.
Recordare mer lugar la propiedad fl oat :

emos en prim
PRO
OPIEDAD CSS
S float
Per mit e est able

ecer un com port amient o especial pa
ara un eleme
ent o, que
edad es desplazado
d t an a la derec a posible y admit e ser
cha o izquierrda como sea
envvuelt o por ott ros element os.
Valor po
or defecto non
ne
Aplicable a Elem
ment os con un ancho, es
specificado o implícit o co
omo en imág
genes.
ne (el elementt o t endrá com

non mport amient o normal)
ht (el elementt o se desplaza

righ a a la derecha
a t ant o como es posible y admit
a e ser
Valores posibles parra envuelt o).
opiedad
esta pro left (el element o se desplaza a la izquierda
a t ant o como es posible y admit
a e ser
envuelt o).
erit (se hereda

e).
Ejemplos #co nt ent 1 {float : left ;}

aprende
eraprograma
ar.com .element oM ont er {float : right ;}
En la ent rega
r ant erio r vimos cóm
mo si a un ele
ement o com
mo una image
en se le apli caba un valo
or de float
dist int o d e none, los element
e os a cont inuació n de él (en nuest
n ro ejem
mplo párrafoss) lo envolvía
an.
om, 2006-2029
PROPIEDAD CLEAR
La propiedad clear indica si un element o y los que le siguen pueden envolver a un element o flot ant e
precedent e y cómo (por la izquierda, por la derecha o por ninguno de los dos lados).
select orElement o {clear: valorAsignado; }
PROPIEDAD CSS clear
Permit e est ablecer si un element o y los que le siguen debe envolver

(w rap) a un element o flot ant e precedent e y cómo.
Valor por defecto none
Aplicable a Element os t ipo block.
none (el element o y los que le siguen envolverá al element o flot ant e ant erior)
left (el element o y los que le siguen no envolverán a un element o flot ant e
ant erior cuya propiedad float sea left ; no habrá element os a la derecha del
flot ant e).
Valores posibles para right (el element o y los que le siguen no envolverán a un element o flot ant e
esta propiedad ant erior cuya propiedad float sea right ; no habrá element os a la izquierda del
flot ant e).
both (el element o y los que le siguen no envolverán a un element o flot ant e
ant erior por ninguno de los dos lados; reest ablece el flujo “ normal” )
Ejemplos #cont ent 1 {clear: left ;}

aprenderaprogramar.com .element oM ont er {float : right ;}
Usaremos est e código para probar la propiedad:
<ht ml>
<head> <t it le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
<link rel=" st ylesheet " t ype=" t ext / css" href=" est ilosCU01035DA.css" >
</ head>
<body> <div>
<p>Aquí un párrafo de t ext o sit uado ant es de la imagen, dent ro de un div cont enedor</ p>
<p>Aquí primer párrafo t ras la imagen</ p> <p>Aquí segundo párrafo t ras la imagen</ p>
<p id=" t ercero" >Aquí t ercer párrafo t ras la imagen</ p>
<p>Aquí cuart o párrafo t ras la imagen</ p> <p>Aquí quint o párrafo t ras la imagen</ p>
</ div> </ body> </ ht ml>
Y el código CSS lo dejaremos así (pon el nombre adecuado al archivo css):

body {w idt h: 510px; border-st yle: dot t ed; }
div {border-st yle: solid; margin: 15px; padding: 5px; background-color: yellow ;}
Ahora probaremos a añadir est as reglas y comprobar el result ado:
a) #t ercero {clear: bot h;} : comprobaremos cómo el párrado con id=” t ercero” que corresponde al
párrafo cuyo t ext o es “ Aquí t ercer párrafo…” ya no flot a a la derecha de la imagen, sino que se
sit úa debajo de ella rest ableciendo el comport amient o normal.
b) #t ercero {clear: right ;} : comprobaremos cómo el párrafo con id=” t ercero” se mant iene
flot ando en t orno a la imagen. ¿Por qué? Porque clear: right ; da lugar a que los element os no
flot en a la izquierda de un element o con valor de float right . Como en est e caso no t enemos un
element o con valor de float right , est e código no genera ningún efect o.
c) #t ercero {clear: left ; } : comprobaremos cómo el párrado con id=” t ercero” que corresponde al
párrafo cuyo t ext o es “ Aquí t ercer párrafo…” ya no flot a a la derecha de la imagen, sino que se
sit úa debajo de ella. ¿Por qué? Porque clear: left ; da lugar a que un element o y los que le
siguen dejen de envolver a un element o ant erior cuyo valor de float sea left , como es el caso
que nos ocupa.
Es fácil int uir que clear es una propiedad que se usa en combinación con la propiedad float para crear
diseños at ract ivos.
¿QUÉ ENVUELVE A UN ELEM ENTO FLOTANTE Y CUÁNDO LO ENVUELVE?
El posicionamient o flot ant e t iene diversas peculiaridades que debemos ir conociendo poco a poco.
Vamos a emplear est e código HTM L:
<ht ml> <head>

<link rel=" st ylesheet " t ype=" t ext / css" href=" est ilosCU01035DB.css" >
</ head>
<body>
<div>
<p>Un t ext o antes de las cajas</ p>
<div id=" caja1" >Caja 1</ div>
<div id =" caja4" >Caja 4</ div>
<p>Un t ext o después de las cajas</ p>
<div class=" limpiador" ></ div>
</ div> </ body>
</ ht ml>
Y el siguient e código css de part ida (ponle el nombre de archivo adecuado):
Propiedad float
f y posicion
namiento flotan
nte CSS.
/ * Cu
urso CSS est iloss aprenderapro gramar.com* /
* {fon
nt -family: arial; }
bodyy {w idt h:410px;; border-st yle: dot
d t ed;}
div {b
border-st yle: so
olid; margin:7p x; background--color: #FFEFD5
5; }
div div
d {padding: 5p
px; w idt h: 60px;;}
p {m argin:5px;}
.limp
piador{padding:0; border-st yle
e:none;}
#caja
a1{ border-colo
or:red; } #caja2{{ border-color:b
blue;} #caja3{ border-color:gre
b een;} #caja4{bo
order-color:oran
nge;}
La sit uació
ón de part id a es est a:
Ahora vam
mos a realiza
ar est e camb
bio en el códi go CSS: #caj a1{ border-ccolor:red; flo
oat :right ; }
ecer el valor de float righ t comprobam

Al est able mos que la caja
c 1 se va hacia
h la dereccha t ant o co
omo puede
saliendo del
d flujo norrmal del document o. La caja 2 se sit úa en la líne
ea en que se
e encont raba
a la caja 1,
o la posición “ nat ural” qu
ocupando ue le corresp
pondería si n o exist iera la hecho pasa algo similar
a caja 1, de h
a est o po rque la caja 1 ha salido del
d flujo norm
mal y la caja 2 “ ignora a la caja 1” . A
Ahora bien, la
a caja 2 no
se ve que envuelva a la caja 1 ¿Po
or qué? En re
ealidad la cajja 2 sí es envvolvent e de l a caja 1, lo que
q ocurre
es que no
o hay t ext o para aprecia
ar el efect o.. Alarga el t ext pondient e all div de la caja 2 para
e o corresp
comproba
ar el efect o. ¿Qué ocurr e? Que el t ext
e o se alarg
ga hacia abajjo t rat ándosse de adapt ar
a al w idt h
definido para la caja
a, con lo cu
ual t ampoco
o comprobamos que ha
aya comporrt amient o en
nvolvent e.
M odifica así el código
o: #caja2{ borrder-color:bllue; w idt h:39
90px;}
Ahora sí podemos co
omprobar qu
ue el t ext o de la caja 2 que llega a confluir ccon la caja 1 t iene un
comport amient
a o envo
olvent e.
om, 2006-2029
Conclusión: el comport amient o envolvent e no se aprecia si no exist e t ext o y anchura suficient e para
que se pueda apreciar. En caso de no exist ir t ext o y anchura suficient e, el document o se muest ra como
si el flujo normal cont inuara ignorando al element o flot ant e.
A la pregunt a ¿Qué envuelve a un element o flot ant e? Podemos responder que lo que envuelve a un
elemento flotante es el texto de los element os que vengan a cont inuación de él. Repet imos: lo que
envuelve es el t ext o, no envuelven las cajas ni imágenes ni ot ro t ipo de element os, sólo t ext o.
¿Cuándo envuelve el t ext o de un element o post erior a un element o flot ant e? Cuando exist e ancho
(w idt h) suficient e para que el siguient e element o alcance el borde del element o flot ant e y cuando el
t ext o t iene longit ud suficient e como para poder apreciar el efect o.
¿QUÉ OCURRE SI NO HAY ESPACIO SUFIENTE PARA ENVOLVER?
Sobre el código inicial que habíamos plant eado, vamos ahora a realizar est e cambio en el código CSS:
#caja1{ border-color:red; float :left ; }
Observaremos algo ext raño: la caja 2 parece que no envuelve a la caja 1. El t ext o de la caja 2 aparece
debajo del t ext o de la caja 1. ¿Qué ocurre? Que el t ext o de la caja 2 para poder sit uarse a la derecha del
t ext o de la caja 1 necesit a disponer de un ancho suficient e. Si no dispone de ancho, pasa a la siguient e
línea (agrandando el t amaño de su caja). Bast a darle el ancho suficient e para que se vea cómo el t ext o
de la caja 2 envuelve al t ext o de la caja 1 por su derecha.
M odificaremos el código así: #caja2{ border-color:blue; w idt h:250px;}
Con ello comprobamos cómo el t ext o de la caja 2 envuelve a la caja 1.
M uchas veces un programador o diseñador w eb nos ha plant eado por qué el t ext o no envuelve a una
imagen HTM L u ot ro t ipo de element o. Aquí est á la respuest a. Cuando no hay espacio suficiente para
envolver el texto se sitúa debajo del elemento flotante.
Propiedad float
f y posicion
namiento flotan
nte CSS.
¿QUÉ OCU
URRE SI APL
LICAM OS FLO
OAT A VARIO
OS ELEM ENT
TOS CONSECU
UTIVOS?
Si aplicam
mos float a varios elem
ment os conse
ecut ivos, los
s element oss se van arrrimando uno
os a ot ros
mient ras exist a espacio suficient e.
e Cuando ya no queda es
spacio, pasarrán a la sigui ent e línea.
M odifica el código in
nicial que he or:red; float : left ; } #caja2{ border-
emos usado así: #caja1{ border-colo
color:blue
e; float : left ;}} #caja3{ borrder-color:grreen; float : le border-color :orange; floa
eft ;} #caja4{b at : right ;}
El result ado lo int erp ret amos de la siguient e manera. La

a caja 1 se sit úa t an a la
a izquierda como
c le es
posible, es
e decir, pega
ada al límit e del cont ene
edor. La caja
a 2 t rat a de sit
s uarse t an a la izquierd
da como le
es posible
e, pero al encont
e rar un o no puede pegarse al borde del
n element o flot ant e ya posicionado
cont ened or, sino que se alinea ju nt o al eleme
ent o flot ant e que se ha encont
e rado. La caja 3 se comport a
igual. La caja
c 4, en cam
mbio, se sit ú a t an a la de
erecha como le es posible
e.
El párrafo
o “ Un t ext o después
d de las cajas” t ra
at a de envollver al últ imo
o element o flot ant e (la caja 4). Su
t ext o com
mienza en la vert ical línea que sería su posición nat ural si nin
nguna de lass 4 cajas exis
st ieran (ya
que han salido
s del flu
ujo normal) y en la horizo
ont al comien
nza desde q ue un eleme
ent o float de
eja espacio
suficient e para poderr insert arse. Trat a de avanzar para envolver
e a la
a caja 4, perro al no hab er espacio
disponible
e salt a a la siiguient e línea.
Elimina ah
hora los párrrafos “ Un t ext o ant es de
e las cajas” y “ Un t ext o después
d de la
as cajas” y comprueba
el result ad
do (mant ien do el posicio
onamient o f lot ant e de la
as cuat ro caj as, t res a la izquierda y la
l cuart a a
la derecha
a).
Te podráss encont rar con

c algo así:
¿Qué est á ocurriendo

o? Que al sal ir del flujo n ormal los ele
ement os flott ant es dejan
n de ocupar espacio
e en
su caja co
ont enedora de
d forma qu
ue el valor he
eight de la caja
c cont ene
edora puede llegar a hac
cerse nulo.
Est o en allguna ocasió
ón puede que
e ni siquiera lo not emos.. No obst ant e, en alguno
os casos com o aquellos
nemos un b orde, color de fondo o imagen de fondo
donde t en f para la
l caja cont e
enedora pue
ede ser un
problema
a.
¿Cómo evvit ar que la caja

c cont ene
edora no inccluya a las ca
ajas flot ant es
e hijas y haccer que se d ibujen sus
fondos co ent os flot antt es? Hay varrias maneras para hacer est
orrect ament e engloband o a los eleme e o.
ma de hacerl o es convertt ir en flot an

Una form nt e t ambién a la caja ma aja flot ant e amplía su
adre. Una ca
t amaño para
p incluir a sus cajas hijjas, de forma
a que declarrando a la m adre como fflot ant e ya se
e ampliará
aut omát iccament e. Si hacemos est
e a modificación: div {border-st
{ yle
e: solid; margin:7px; ba
ackground-
color: #FF
FEFD5; float : left ; } el resu
ult ado será similar a est e:
om, 2006-2029
Propiedad float
f y posicion
namiento flotan
nte CSS.
Vemos có
ómo el elem
ment o body aparece “ co
omprimido” sin
s alt ura en
n la part e su
uperior, por que al ser
t ant o la caja madre co
omo las hijass flot ant es, est
e án fuera del
d flujo del document
d o y el elementt o body no
adquiere alt ura. Tene
er en cuent a que en estt e caso est amos viendo el element o body porq
que hemos
aplicado la propieda
ad border-stt yle:dot t ed; pero est o lo hacemoss en el ma
arco de un curso de
aje, en la práct ica profesiional el elem
aprendiza ment o body no
n lleva bord e práct icame
ent e nunca.
Ahora vea
amos ot ra alt ernat iva d ist int a a con
nvert ir en flo
ot ant e a la caja
c madre. Vamos a de
ejar la caja
madre co mo div {bord
der-st yle: so lid; margin:7
7px; backgro
ound-color: #FFEFD5;}
# yp
por el cont ra
ario vamos
a hacer esst a modificacción: .limpiador{padding
g:0; border-stt yle:none; cl ear:bot h; }
El result ad
do será simillar a est e:
¿Por qué ocurre est o?

o Porque all incluir un element
e o, en est e caso un div, con valor clear::bot h; que
indica qu e debe most rarse sin flo
ot ar, la caja se comportt a como si debajo
d de lo
os element os
s flot ant es
est uviera el element o con flujo normal,
n de modo
m que se
e muest ra co
ont eniendo t ant o a los element
e os
flot ant es como a est e element o. Si el elemen
nt o “ limpiad or” est á vaccío realment e no se mue
est ra, pero
como el navegador
n in t erpret a que
e hay algo, adapt a las dim
mensiones d e la caja.
Hay más formas de l ograr un ressult ado simi lar a est e (p

por ejemplo aplicando la
a propiedad overflow :
hidden; a la caja madrre), pero no vamos a entt rar a explica
arlas ahora.
EJERCICIO
O
Define un
n document o HTM L dond
de a t ravés del
d uso de la
as propiedad
des float y cle
ear y de las ant eriores
propiedad
des que hem
mos vist o a lo largo del cu
urso crees un
n diseño con est e aspect o
o:
a) En prim
mer lugar se
e deben mosst rar 8 cajas div de 50x5
50 píxeles, con
c margin-rright de 5 pííxeles para
cada una de ellas, y cada una d e ellas con dist int o colo
or de fondo , alineadas en horizont al
a hacia la
izquierda gracias al usso de float le
eft .
undo lugar se
b) En segu e debe mostt rar un div co
on un t ext o y color de fo ndo amarillo
o, con marge
en superior
e inferior de 20 píxele
es, abarcando
o t odo el anccho disponib
ble.
c) En t erccer lugar se deben mostt rar 3 cajas div

d de 200x5
50 píxeles, con
c margin-rright de 5 pííxeles para
cada una de ellas, y cada una d e ellas con dist int o colo
or de fondo , alineadas en horizont al
a hacia la
derecha gracias
g o de float right .
al uso
om, 2006-2029
d) En cuart o lugar un div de fondo de color #DEB887 que ocupe t odo el ancho disponible y cont enga el
t ext o <<Curso CSS aprenderaprogramar.com>>
Not a: si es necesario, usa los div cont enedores auxiliares que t e sean necesarios.
Para comprobar si t u código y respuest as son correct as puedes consult ar en los foros

Diseño web
b con dos, tres o más columna
as con float.
DISEÑO EN
E COLUM NA
AS
Uno de lo
os usos habitt uales de flo
oat y clear ess crear diseñ
ños donde las cajas t iene
en dist int os t amaños y
se crean una
u cabecerra de página w eb, una p art e cent ral,, una o varia
as columnas lat erales y un
u espacio
en la par t e inferior denominado
d pie o foot er.
e Veamos cómo
c podem
mos generarr est e t ipo de
d diseños
SS.
usando CS
Vamos a part
p ir de est e código HTM
M L:
<h
ht ml> <head>
<t it le>Port al web
c =" ut f-8" >
<liink rel=" st ylesh
heet " t ype=" t exxt/ css" href=" esst ilosCU01036D
DA.css" >
<// head>
<b
body>
<d
div id=" caja1" >C
Caja 1</ div> <d
div id=" caja2" >C
Caja 2</ div>
<d
div id=" caja3" >C
Caja 3</ div> <d
div id =" caja4" >Caja 4</ div>
<// body>
<// ht ml>
ent e código css

Y el siguie c de part id a (ponle el nombre
n de arrchivo adecu
uado):
/ * Cu
* {fon
d t ed; border--w idt h: 2px;}
div {b
border-st yle: so
olid; border-w id
dt h:2px; margin
n:7px; padding::7px; backgroun
nd-color: #FFEF
FD5; }
#caja
a1{ border-colo
or:red;}
#caja
a2{ border-colo
or:blue; }
#caja
a3{ border-colo
or:green;}
#caja
a4{border-colorr:orange;}
La sit uaci ón de part id

da es que sim
mplement e t enemos cua
at ro cajas (de
ent ro de las cuales se su
upone que
vamos a organizar
o los diferent es cont
c enidos de
d la página w eb):
om, 2006-2029
Diseño web con dos, tres o más columnas con float.
ANCHURA Y ALTURA ESPECIFICADA Y TOTAL DE UN ELEM ENTO ¿W IDTH NO FUNCIONA?
¿Cuál es el valor de la propiedad w idt h de la caja 1? Viendo el dibujo y el código podríamos pensar que
el cálculo para obt ener est e ancho sería: 410 px t ot ales – 7px * 2 lados = 396 píxeles
Sin embargo, el valor de la propiedad w idt h se refiere al ancho del espacio que ocupa el cont enido del
element o excluido el margen, borde y padding. Est o nos lleva a que el w idt h de la caja 1 se calcule
como 410 px t ot ales – 7 px * 2 márgenes – 7 px * 2 paddings – 2px * 2 bordes = 378 píxeles ¿Por qué es
est o así?
Podemos pensar en dist int os t ipos de anchura (nos referiremos a anchura, aunque para alt ura es
igualment e válido lo que expondremos). La anchura “ declarada” es la anchura que especificamos al dar
un valor a la propiedad w idt h. La anchura “ aparent e en pant alla” es la anchura que aparent a t ener el
element o en la pant alla (hast a el borde visible, si exist e). La anchura t ot al asociada al element o se
obt iene como margin + border + padding + width (en horizont al para w idht , o de la misma forma en
vert ical para height )
Al declarar un valor w idt h para un element o hijo en porcent ajes, se t oma como valor de referencia el
valor de la propiedad w idt h de su element o padre. Est o puede generar efect os ext raños y hace que
mucha gent e piensa que “ w idt h en porcent ajes no funciona” . En realidad sí funciona, pero hay que
saber cómo. Escribe est e código y visualiza los result ados:
<ht ml>
<head>
<t it le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
* {margin:0; padding:0;}
div{ border-st yle:solid; border-w idt h:1px; height : 115px;}
#caja1{w idt h:410px; }
#caja2{w idt h:410px; margin-left :20px;}
#caja3{w idt h:410px; margin-left :20px; padding-left :20px;}
#caja4{w idt h:410px; margin-left :20px; padding-left :20px; border-left -w idt h:20px;}
.int erior {margin-t op: 25px; w idt h:100%; height :40px; background-color:pink;}
</ st yle>
</ head>
<body>
<div id=" caja1" >Caja 1 <div class=" int erior" >100% caja 1</ div></ div>
<div id=" caja2" >Caja 2 con w idt h 410 px y margin-left 20px<div class=" int erior" >100% caja 2</ div></ div>
<div id=" caja3" >Caja 3 con w idt h 410 px, margin-left 20 px y padding-left 20px<div class=" int erior" >100% caja 3</ div></ div>
<div id =" caja4" >Caja 4 con w idt h 410 px, margin-left 20 px,
padding-left 20px y border-left -w idt h 20 px<div class=" int erior" >100% caja 4</ div></ div>
</ body>
</ ht ml>
Observamos algunas cosas “ ext rañas” :
a) En la caja 1 vemos cómo la caja int erior en color rosado sobresale “ ligerament e” por el lado
derecho ¿Por qué? Est a caja rosada int erior se posiciona just o en la esquina int erior del borde
superior izquierdo de la caja cont enedora (caja 1). Luego es desplazada hacia abajo 25px debido
a la propiedad margin-t op que t iene est ablecida. A cont inuación se dibuja ocupando un espacio
de 1px como ancho del borde izquierdo + 410 px de cont enido + 1 px de borde derecho. El
ancho visible en pant alla (delimit ado por los bordes) es de 412 px, igual que el de su caja padre,
pero est á ligerament e desplazada hacia la derecha, de ahí que sobresalga ligerament e por la
derecha.
b) En la caja 3 vemos que la caja int erior con un ancho del 100% no t oma las dimensiones de la
caja 3, sino que es más pequeña. ¿Por qué? Porque el borde que vemos de la caja 3 incluye el
padding aplicado a la caja 3 de 20 px de modo que la caja 3 “ se ve en la pant alla” con un ancho
de (410 px de cont enido + 20 px de padding-left + 2 px de bordes) = 432 px. Sin embargo la caja
int erior t iene el 100 % del valor w idt h de su caja cont enedora, es decir, 410 px, más 2 px de
borde, con lo que se ve con un ancho de 412 px.
En resumen, hay que t ener siempre present e que los valores w idt h y height son los relat ivos al
cont enido de un element o excluido el padding, borde y margen. El ancho apreciable en pant alla de un
element o puede ser superior al est ablecido con w idt h debido al padding y al borde. El ancho t ot al
asociado a un element o puede ser superior al est ablecido con w idt h debido al padding, al borde y al
margin.
Diseño web
b con dos, tres o más columna
as con float.
CREAR UN
N DISEÑO
Ahora vam
mos a ut iliza
ar el código CSS
C para crear un diseño
o con cabece
era, una colu
umna lat eral izquierda,
un espaci o principal y un pie de pá
ágina o foot er.
e
Escribe el siguient e có
ódigo CSS y comprueba
c lo
os result ado s sobre el có
ódigo HTM L d
de las 4 cajas
s:
/ * Cu
* {fon
d t ed; border--w idt h: 2px;}
div {b
border-st yle: so
olid; border-w id
dt h:2px;
marg
gin:7px; paddin g:7px;
backkground-color: #FFEFD5; }
/ * La anchura del co
ont enido de la caja
c 1 es:
410 - 14 de margin - 4 de border - 14 de padding
g, result a 378 px
x* /
#caja
a1{ border-colo
or:red;}
#caja
a2{ margin:0 7p
px 7px 7px; bor der-color:blue;
widtt h:75px; float :le
eft ; height :200p
px; }
/ * An
ncho t ot al 410 px
p - 8px bordes - 21 px de marrgin - 28 de pad
dding -75px con
nt enido caja 2
obt enemos
e 278 px* /
#caja
a3{ margin:0 7p
px 7px 0px; bor der-color:green
n;
widtt h:278px; float : left ; height : 30
00px;}
#caja
a4{border-colorr:orange; clear::bot h; height :55
5px;}
Hemos ap
plicado unoss valores de height para poder visua
alizar el diseñ
ño. En una w eb real hei ght puede
quedar si n especificar, de modo que las cajass irán agran dando su t amaño en vert ical en fun
nción de la
cant idad de
d cont enido
o que alberg
guen.
om, 2006-2029
EJERCICIO RESUELTO
Escribir el código CSS para crear un diseño similar al ant erior pero con cabecera, una columna lat eral
izquierda, un espacio principal y una columna lat eral derecha.
SOLUCIÓN
Añadiremos est a línea como últ ima línea del código HTM L, ant es del cierre de body, para rest ablecer el
flujo normal (realment e no t enemos element os debajo y no sería necesario hacerlo, pero podríamos
t enerlos):
El código CSS sería:

body {w idt h:410px; border-st yle: dot t ed; border-w idt h: 2px;}
div {border-st yle: solid; border-w idt h:2px;
margin:7px; padding:7px;
background-color: #FFEFD5; }
/ * La anchura del cont enido de la caja 1 es:
410 - 14 de margin - 4 de border - 14 de padding, result a 378 px* /
#caja1{ border-color:red;}
#caja2{ margin:0 7px 7px 7px; border-color:blue;
w idt h:65px; float :left ; height :200px; }
/ * Ancho t ot al 410 px - 12px bordes - 28 px de margin - 42 de padding -65px cont enido caja 2
-65 px cont enido caja 4 obt enemos 198 px* /
#caja3{ margin:0 7px 7px 0px; border-color:green;
w idt h:198px; float : left ; height : 300px;}
#caja4{ margin:0; border-color:orange; float : left ; w idt h:65px; height :200px;}
.limpiador {clear:bot h; padding:0; border-st yle:none; }
Comprueba los result ados en t u navegador.
Ten en cuent a que est e es un posible código para obt ener un diseño como el propuest o. Quizás a t i se
t e haya ocurrido ot ro código y será igualment e válido (o incluso mejor que est e). Por ejemplo, no hay
por qué usar px para fijar las dimensiones, podríamos usar % ó em u ot ras unidades. Ten en cuent a que
CSS y el diseño w eb no son mat emát icas. Lo import ant e es obt ener el result ado deseado y generar un
código lo mejor posible, pero no el “ código perfect o” porque est e no exist e (o requeriría demasiado
t iempo t rabajar para conseguirlo, sin obt ener vent ajas a cambio).
EJERCICIO
Define un document o HTM L donde a t ravés del uso de la propiedad float y de las ant eriores
propiedades que hemos vist o a lo largo del curso crees un diseño con est e aspect o:
Bienvenidos a aprenderaprogramar.com (color de fondo: #DEB887)
M enú Conoce las últ imas novedades del lenguaje

JavaScript . (color de fondo: #ADD8E6)
-Cursos Espacio reservado para
publicidad
-Humor Art ículo sobre Gimp, un programa de soft w are
libre para el diseño gráfico. (color de fondo:
-Divulgación #90EE90)
Cont act a con nosot ros (color de fondo: #DDA0DD) Aviso legal
Not a: los anchos de los element os serán del 100 % disponible si es t odo el ancho (por ejemplo
<<Bienvenidos>>), del 25 % si es una columna simple (por ejemplo <<M enú>>) y del 50 % si es una
columna doble (por ejemplo <<Art ículo sobre Gimp>>).

Concepto d e sprite CSS. ¿Q
Qué es y para qué
q sirve un sprite?
EFICIENCIIA Y VELOCID
DAD DE CARGA
Una págin
na w eb com pleja puede t ener que cargar
c decen
nas o cient oss de imágene
es, t ant o im ágenes de
fondo co mo imágene
es de cont enido. Hemo
os vist o que las imágen es de fondo
o se maneja
an con las
propiedad
des t ipo bacckground y que ent re est as propi edades t ene
emos alguna
as como ba
ackground-
posit ion que
q nos perm
mit en est able
ecer dónde debe
d sit uarse
e la imagen.
Uno de lo
os problemas con las qu e se enfrentt an las págin
nas w eb es que
q son cada
a vez más co
omplejas y
con frecu
uencia incluyyen un gran número de
e imágenes. Cargar una imagen con
nlleva una pet
p ición al
servidor, una respuest a del servvidor, carga en el naveg
gador, et c. e incluso si las imágen es son de
as est as pet i ciones consu
pequeño t amaño t oda umen t iempo
o y hacen qu
ue la página ccargue con le
ent it ud.
Gracias a las facilidad

des que ofre
ece CSS par a el manejo
o de imágen es de fondo
o podemos mejorar
m la
eficiencia del procesado de imáge
enes y la velo
ocidad de carrga de la pág
gina.
CONCEPT
TO DE SPRITE
E CSS
En progra
amación el co
oncept o de sprit
s e puede
e t ener dist in
nt os significa
ados. En CSS nos referim os a sprit e
para hace
er alusión a un
u conjunt o de imágene s agrupadas t odas ellas e
es diferent es en una mism
ma imagen.
Por ejemp
plo:
Est o que vemos es un

u ejemplo t ípico: diferrent es icono
os se agrupa
an en una i magen sigu iendo una
“ cuadrícu la” . La cuadrrícula es un element
e o qu
ue usan los diseñadores
d g
gráficos para
a saber que cada
c icono
ocupa exa
act ament e el
e mismo esp
pacio (por eje
emplo 64 pix
xeles de anccho y 64 pixe
eles de alt o),, pero una
vez t ermi nan de crear el diseño la
a imagen se suele guard ar sin cuadríícula (es deccir, no se ven
n líneas de
división ent re las dist int
i as imágen
nes). El fondo
o t ipo t ablero
o de ajedrezz en los progrramas de dis
seño como
Gimp ó Ph
hot oshop ind
dica que la im
magen es un a t ransparen ma part e de l a imagen en sí.
ncia, no form
om, 2006-2029
Concepto de sprite CSS. ¿Qué es y para qué sirve un sprite?
En el caso de agrupar iconos en una sola imagen, el número de iconos puede llegar a ser muy grande,
en algunos casos pueden ser decenas o cient os.
En la imagen ant erior t enemos 7x7 iconos en una sola imagen. Supongamos que en cargar una imagen
en la página w eb se t ardara 0,1 segundos. Si cargáramos los 49 iconos por separado requeriría 4.9
segundos mient ras que cargando el sprit e únicament e necesit amos 0.1 segundos (est o es una
simplificación, pero nos vale como ejemplo). Est e es el mot ivo por el que se usan los sprit es en diseño
w eb y en CSS.
Hast a ahora hemos vist o las imágenes dent ro del sprit e como imágenes t odas iguales, cada uno en un
espacio de la cuadrícula, pero est o no t iene por qué ser así. Por ejemplo se puede usar algo de est e
t ipo:
Aquí vemos cómo las dist int as imágenes que componen el sprit e siguen una cuadrícula, pero cada
cuadro es de dist int as dimensiones. Por ejemplo, el icono de la est rella t iene dist int o t amaño que el
icono del pulpo o el icono del escáner.
También puede crearse el sprit e considerando que una imagen ocupa varios espacios de la cuadrícula
como vemos aquí:
En la imagen ant erior vemos algunos iconos que ocupan un cuadro complet o, ot ros de menor t amaño
que solo ocupan part e de un cuadro y por ot ro lado una imagen de una cabeza de pájaro de mayores
dimensiones que ocupa varios espacios de la cuadrícula.
Un sprit e no sólo puede cont ener iconos, t ambién puede t ener ot ro t ipo de imágenes como logos,
bot ones, imágenes que represent en bordes o esquinas de cont enedores, fondos, et c.
GENERAR O CREAR LOS SPRITES CSS
Normalment e se part e de las imágenes que componen un sprit e por separado para luego reunirlas en el
sprit e. Est o se puede hacer de varias maneras:
a) Usando un programa de diseño gráfico (como Phot oshop, Gimp, et c.).

b) Usando herramient as on-line (sprit e generat ors) que a t ravés de páginas w eb nos permit en
subir las imágenes y nos devuelven el sprit e creado.
No vamos a profundizar en la creación de sprit es porque no es nuest ro objet ivo ahora ent rar en est e
t ipo de det alles. Con t ener el concept o o idea general nos bast a.
CÓM O USAR LOS SPRITES CSS
En un sprit e reunimos dist int as imágenes que van a aparecer en la página w eb como si fueran imágenes
independient es, aunque realment e sean una sola imagen. ¿Cómo se consigue est o? Tendremos que
jugar con el área visible de un element o y con la posición de la imagen. Con lo que hemos vist o en
apart ados ant eriores del curso ya conocemos cómo funcionan los fondos CSS, cómo se det ermina su
área visible y cómo se puede jugar con la posición de las imágenes de fondo. Por ello ya debemos ser
capaces de aplicar est os concept os a la resolución de un ejercicio.
EJERCICIO RESUELTO
Usando el código HTM L de base que venimos empleando a lo largo del curso, y en concret o el
fragment o siguient e:
<! -- menu -->

<div>
<div>M enú</ div>
<hr/ >
<ul>
</ ul>
</ div>
<! -- fin menu -->
Concepto d e sprite CSS. ¿Q
Qué es y para qué
q sirve un sprite?
Se desea realizar lo sig

guient e:
a) Reemplazar el
e element o <hr/ > con u n element o que t enga como
c fondo una imagen
n de 18x40
p ixeles de ancchoxalt o que
e se repita a lo largo de t odo el anch o disponible
e en la w eb, creando
c la
ap
pariencia de ser una barrra de separación.
La im agen a ut ilizzar debe ser la que pone

emos a cont i nuación (o cualquier
c ot rra con las dim
mensiones
indica
adas):
art iendo de un sprit e co

b) Pa onos, cada u no de los cu
on cuat ro ico uales ocupa 40x40 pixele
es, colocar
co
omo imagen
n de fondo en un elemen
nt o anexo a cada
c it em de
e menú cada
a uno de los iconos. La
magen a ut ili zar debe serr la que pone
im emos a cont inuación (o cualquier
c ot rra con las dim
mensiones
in
ndicadas):
Como cad ne 40 pixeless de ancho y 40 de alt o, el

da icono t ien o al del spritt e es de 160 pixeles de
e t amaño t ot
ancho po r 40 pixeles de alt o. Los 160 pixeles de ancho res
sult an de mu ancho de 40 pixeles de
ult iplicar el a
cada icon o por 4.
La idea a ut ilizar es l a siguient e: cada eleme

ent o anexo a un it em de drá un área visible de
e menú t end
40x40 pixxeles, de mod
do que al co locar el spritt e sólo se vea un icono (llos ot ros que
edarán ocultt os). En los
cuat ro ele
ement os ane
exos a los it em
e de menú
ú colocaremo
os la misma imagen, perro en dist intt a posición
según el element
e o, da
ando lugar a que en cad
da caso en el área visible
e se vea algo
o dist int o. La
a siguient e
imagen re
efleja la idea:
om, 2006-2029
Hemos dejado como t ransparent ados los iconos que no deben aparecer en la w eb (aquí los most ramos
t ransparent ados para que se aprecie la idea de que siempre est amos ut ilizando la misma imagen, pero
colocándola de dist int a manera para que en el área visible aparezca just o el t rozo de imagen que a
nosot ros nos int erese).
Not a: eliminar las viñet as de la list a que conforma el menú usando est a propiedad: li {list -st yle-t ype:
none;}
SOLUCIÓN AL EJERCICIO
Para el apart ado a) modificaremos el código HTM L de la siguient e manera:

<div id=" barra" ></ div>
Hemos coment ado el hr (con lo cual lo eliminamos), y a cambio hemos int roducido un cont enedor div
sin t ext o y con id=” barra” .
En el archivo de est ilos css int roduciremos el siguient e código:
#barra {w idt h: aut o; height : 40px; background-image: url(" barra.png" )}
Donde barra.png es el nombre de archivo con la imagen, que debe est ar localizado en el mismo
direct orio que el archivo ht ml. También se podría usar una URL ext erna como
ht t ps:/ / lh3.googleusercont ent .com/ -_6GcdriGAEI/ UkkjeJoZlOI/ AAAAAAAAAb0/ 5B8NPiEqYsM / s40/ CU01037D_5.png
Para el apart ado b) crearemos cont enedores de división donde alojar las imágenes de fondo.
No podemos usar <span> para crear los cont enedores porque span es un element o inline y necesit amos
aplicar w idt h y height , y hay que recordar lo siguient e: “ w idt h y height son sólo aplicables a element os
t ipo block y element os insert ados en una posición que son reemplazados por un objet o (ent re ellos img,
input , t ext area, select , object )” . Usaremos por t ant o element os div para crear las divisiones.
<ul id=" it emsM enu" >

<li><div></ div><a href=" #" >Inicio</ a></ li>
<li><div></ div> <a href=" libros.ht ml" >Libros de programación</ a> </ li>
<li><div></ div> <a href=" cursos.ht ml" >Cursos de programación</ a> </ li>
<li><div></ div> <a href=" humor.ht ml" >Humor informát ico</ a> </ li>
</ ul>
El código que proponemos como solución es el siguient e (t en en cuent a que t ú puedes haber creado
ot ro código diferent e. Lo import ant e es que el código est é bien const ruido y proporcione los result ados
deseados):

#barra {height : 40px; background-image: url(" barra.png" ); margin-bot t om:30px;}
li {list -st yle-t ype: none;}
#it emsM enu li {height : 45px; line-height :2em; margin-t op: 5px; }
#it emsM enu li div { height : 40px; w idt h:40px; margin-right :15px; background-image: url(cuat roIconos.png);
float :left ;}
#it emsM enu li:nt h-child(1) div {background-posit ion: 0px;}

Donde cuat roIconos.png es el nombre de archivo con la imagen, que debe est ar localizado en el mismo
direct orio que el archivo ht ml. También se podría usar una URL ext erna como
ht t ps:/ / lh6.googleusercont ent .com/ -KahySaHLhw w / UkkjeX4jh4I/ AAAAAAAAAcA/ iEIIJs6NvVw / s160/ CU01037D_6.png
Con los conocimient os que hemos adquirido a lo largo del curso debemos ser capaces de int erpret ar
est e código y sus result ados. Si t ienes dudas, consult a en los foros (aprenderaprogramar.com/ foros).
El result ado a obt ener será similar a est e:
Comprobamos cómo podemos usar una sola imagen y crear la apariencia de est ar usando cuat ro
imágenes jugando con el área visible y posición de la imagen.

Propiedade
es visibility y ov
verflow
VISIBILITY
Y CSS
En apart ados
a ant erio res hemos vist
v o cómo a t ravés de la propiedad
d display po
odíamos hac
cer que un
element o “ desaparecciera” de un a página w eb
e est ableci endo su val or en “ none
e” (el eleme
ent o no se
muest ra; el efect o es como si no exist iera, po
or lo que su espacio es ocupado po r ot ros elem
ment os). La
d visibilit y permit
propiedad p e crear un efectt o similar, pero
p en estt e caso el element o permanece
p
o su espacio, aunque no se
ocupando s muest ra.
PROPIIEDAD CSS visibility
Per mit e ocult arr element os sin que su espacio sea ocupado po
or ot ros y
edad
t am
mbién colapsa
ar filas o colu
umnas de un
na t abla.
Valor po
or defecto visi ble
Tod
dos los elem ent os (excep
pt o valor colllapse, sólo para filas o columnas
Aplicable a
de t ablas).
ble (el elemen

visib nt o es visible)
den (el element o es t ransp arent e, no es visible).

hidd
apse (aplicablle a filas o col umnas de t ab
colla blas las colapsa haciendo qu
ue sean no
esta pro
opiedad
visib
bles).
erit (se hereda

e).
Ejemplo s #co nt ent 1 {visibillit y: hidden;}

aprende
eraprograma
ar.com t r.fi laColapsada { visibilit y: colla
apse;}
Un aspectt o import antt e a t ener en cuent a es que est a pr opiedad se hereda

h direcct ament e po
or part e de
t odas las cajas hijas de una dada, de mod guna caja hi ja se most rrará (except o si t iene
do que ning
da la prop iedad como
est ablecid o visible). Est o t iene ciert o int erés,
e pues nos permitt e ocult ar
complet ament e una part
p e de una página w eb except o algunos elemen
nt os específi cament e señ
ñalados.
emos pregun
Nos pode nt ar: ¿para qué
q vamos a querer t ener en nuesst ra w eb un
n element o que
q no se
muest ra? Pueden exi st ir varios mot
m ivos. Uno
o de ellos, q ue queramo
os reservar u
un espacio que
q no sea
ocupado por ningún
n ot ro elem
ment o. Ot ro
o mot ivo p uede ser q ue a t ravéss de un len
nguaje de
programa
ación como PHP,
P Javascriipt , et c. querramos alt era
ar el valor de
e la propieda
ad visibilit y para
p que el
element o en algunos casos se mu est re y en ott ros no.
El valor co
ollapse pued
de no respon der correct ament
a e en al gunos naveg
gadores.
Veremos código para aplicar est a propiedad después

d de explicar la pro
opiedad overflow .
om, 2006-2029
Propiedades visibility y overflow
PROPIEDAD OVERFLOW CSS
Una caja dent ro del box-model de una página w eb puede t ener unas dimensiones limit adas y el
cont enido exceder esas dimensiones. A eso se le llama “ desbordamient o” (overflow en inglés). La
propiedad overflow sirve para cont rolar cómo debe act uar el navegador en caso de que el cont enido
(por ejemplo t ext o) de una caja exceda las dimensiones de la misma.
PROPIEDAD CSS overflow
Permit e definir cómo debe comport arse el navegador en caso de que el

cont enido de una caja exceda su t amaño.
Valor por defecto visible
Aplicable a Element os t ipo block
visible (el cont enido no se cort a, se sale de su cont enedor y se superpone con
los element os adyacent os que puedan exist ir)
hidden (el cont enido que se muest ra es sólo el que cabe en la caja cont enedora
y el rest o queda no visible).
Valores posibles para scroll (el cont enido que se muest ra es sólo el que cabe en la caja cont enedora y
esta propiedad el navegador muest ra barras de scroll que permit en acceder al cont enido no
visible; el scroll se muest ra incluso si el cont enido no excede la caja).
auto (el comport amient o es el que est ablezca el navegador por defect o para
casos de desbordamient o, normalment e most rar scroll)
Ejemplos #cont ent 1 {overflow : hidden;}

aprenderaprogramar.com .element oExpress {overflow : scroll;}
Crea un document o HTM L con est e cont enido:
<ht ml> <head>

</ head>
<body>
<div id=" caja1" >Caja 1 aprenderaprogramar.com w eb de didáct ica y divulgación de la programación cursos humor y más
El t ut orial css desde cero permit e aprender sin t ener conocimient os previos</ div>
<div id =" caja4" >Caja 4 aprenderaprogramar.com w eb de didáct ica y divulgación de la programación cursos humor y más
</ body>
</ ht ml>
Y un archivo de hoja de est ilos con est as reglas (pon el nombre de archivo adecuado) que nos
permit irán ver el result ado de aplicar los dist int os valores de overflow :

div {border-st yle: solid; border-w idt h:2px; margin:56px 0px 7px 7px;
padding:7px; background-color: #FFEFD5; w idt h:100px; height :200px; }
#caja1{ border-color:red; float :left ; overflow : visible;}

#caja2{ border-color:blue; float :left ; overflow : hidden;}
#caja3{ border-color:green; float : left ; overflow : scroll;}
#caja4{ border-color:orange; float : left ; overflow : aut o;}
.limpiador {clear:bot h; padding:0; w idt h:0; height :0; border-st yle:none; }
En la caja 1 con la propiedad overflow : visible; comprobamos cómo el cont enido se sale de la caja t ant o
hacia la derecha como hacia abajo. No obst ant e hay una diferencia: hacia la derecha el t ext o se
encuent ra ot ro element o y queda “ t apado” , mient ras que hacia abajo no encuent ra ot ros element os, y
a pesar de salirse de la caja cont enedora (incluso se sale del element o body) se muest ra.
Prueba ahora a est ablecer la propiedad visibilit y para dist int as cajas con dist int os valores, e incluso para
el element o body, y comprueba los result ados.
PROPIEDADES OVERFLOW -X Y OVERFLOW -Y CSS
Las propiedades overflow-x y overflow-y son complet ament e análogas a la propiedad overflow , sólo
que en vez de cont rolar t ant o el desbordamient o horizont al como vert ical, únicament e cont rolan el
horizont al (overflow -x) o el vert ical (overflow -y). De est a manera, se pueden especificar dist int os
comport amient os en horizont al y en vert ical.
Est as propiedades pueden no funcionar correct ament e en algunos navegadores por lo que son menos
usadas que la propiedad overflow . También t ienen definidos algunos valores como no-display y no-
cont ent que no son reconocidos por algunos navegadores.
En algunos casos, al est ablecer valores visible o hidden para est as propiedades en sent ido horizont al o
vert ical el navegador int roduce barras de scroll en el ot ro sent ido, aún no habiéndose especificado nada
al respect o.
EJERCICIO
Crea un cont enedor div con las siguient es caract eríst icas definidas a t ravés de CSS: ancho y alt o 200
píxeles, color de fondo amarilo, borde color azul de 2 píxeles de ancho t ipo sólido, un t ext o de t amaño
30 píxeles y con un largo suficient e para exceder la capacidad del div cont enedor, y mediant e la
propiedad overflow haz que aparezcan scrolls horizont al y vert ical que permit an visualizar t odo el t ext o.

Propiedad z-index.
z Superp
posición de ele mentos.
PROPIEDA
AD Z-INDEX
Hast a ah ora hemos hablado de

el posiciona
amient o de element os en el plan
no de la pa
ant alla de
os direccion
visualización y en do nes: horizontt al (x) y vert ical (y). CSS permit e, aunque co
on algunas
limit acion
nes, gest iona n en la vert ical (eje z) de modo que dados
ar la posición d dos ele
ement os sup
perpuest os
arse encima y cuál debaj o.
se pueda indicar cuál debe most ra
PROP
PIEDAD CSS z-index
z
edad Per mit e definir cómo se col ocan unos element os en
ncima de ot ro
os.
Valor po
or defecto aut o
Aplicable a Elem
ment os con posición est ablecida
a exp
plícit ament e.
o (no hay z-in dex especifica

auto ado)
Valores posibles parra Un número ente ro (el elemen

nt o est á más próximo
p al usuario cuant o mayor sea
esta pro
opiedad el va ndex; se admitt en números negat ivos).
alor de su z-in
erit (se hereda

e).
Ejemplo s #co nt ent 1 {z-inde

ez: 22;}
aprende
eraprograma
ar.com .element oJukeBo
ox {z-index:0;}
Es importt ant e dest acar que z-ind ex no vale para

p superpo
oner cont eniidos a nuest ro ant ojo, ya
a que sólo
funciona cuando
c se cu
umplen det erminadas
e co
ondiciones.
En el caso
o de un elem
ment o “ A” cuyyo cont enido
o (t ext o) se sale
s de su co
ont enedor y sse superpon e con ot ro
element o “ B” sit uado M L, el t ext o quedará po r debajo del element o
o con post er ioridad en el código HTM
“ B” debid
do al orden del
d código. La
L propiedad
d z-index no funcionará ya que ni siq
quiera se t ra
at a de una
superposiición ent re element
e os, siino del t ext o desbordado
o de uno con
n el cont ened
dor de ot ro.
En el caso
o de un elem
ment o “ A” po o posicionad o, no podrá est ablecerse el orden
osicionado y ot ro “ B” no
en el eje z usando z in
ndex ya que ambos
a elem ent os t endríían que est ar posicionad os para resp
ponder a z-
index.
En el caso
o de elemen
nt os sit uado
os dent ro de cajas cont enedoras,
e su
u valor de z--index se estt ablece en
relación a la caja con t enedora. Supongamos que una cajja “ A” t iene posición y zz-index 10 y dent ro de
ella hay u na caja “ B” con
c posición
n y z-index “ 20”
2 . Ot ra caja
a “ C” t iene posición
p y z-i ndex 15. Si l as cajas A,
B y C se superponen ¿En
¿ qué ord en se muestt ran? Se mos
st rará la caja ón superior (por t ener
a C en posició
z-index 15
5 frent e al valor
v 10 de l a ot ra caja en o nivel) y debajo la caja A (con la ca
e su mismo aja B en su
int erior). La caja B es hija de la cajja A por lo q ue su z-index es relat ivo
o a su padre, no puede co
ompararse
o est én en su
con ot ras cajas que no u mismo nive
el.
om, 2006-2029
Propiedad z-index.
z Superp
posición de ele mentos.

H L con estt e cont enido
o:
<ht ml>
<head>
<t it le>Portt al w eb - apren
nderaprogramar.com</ t it le> <met
< a charset ="" ut f-8" >
<link rel=" st ylesheet " t yp
pe=" t ext / css" h ref=" est ilosCU0
01039DA.css" >
</ head>
<body>
<div id=" ca
aja1" >Caja 1 Ap
prender</ div>
<div id=" ca
aja2" >Caja 2 a<
</ div>
<div id=" ca
aja3" >Caja 3 prrogramar</ div>
>
<div id =" caja4"
c >Caja 4 . com</
c div>
</ body>
</ ht ml>
hivo de hoj a de est iloss con est as reglas (pon

Y un arch n el nombre
e de archivo
o adecuado ) que nos
permit irán ver el resu lt ado ant es de
d aplicar z-index:
/ * Curso CSS
C est ilos aprenderaprograma
ar.com* /
* {font -fam
mily: arial;}
body {w idtt h:507px; bord er-st yle: dot t ed
d; border-w idt h:
h 2px;}
div {borde
er-st yle: solid; border-w
b idt h:2p
px;
padding:7 px; background
d-color: #FFEFD
D5; w idt h:150pxx; height :150px
x; posit ion:abso
olut e; }
#caja1{ bo
order-color:red;; t op: 55px; leftt : 50px; }
#caja2{ bo
order-color:blue
e; t op: 25px; lefft : 175px; }
#caja3{ bo
order-color:gree
en; t op: 70px; le
eft : 200px; }
#caja4{ bo
order-color:oran
nge; t op: 100pxx; left : 100px; }
Ahora aña
ade propieda
ades z-index de la siguien
nt e manera y compara lo
os result adoss de una form
ma y ot ra:
#caja1{ bo
order-color:rred; t op: 55p
px; left : 50pxx; z-index:40;; }
#caja2{ bo
order-color:bblue; t op: 25
5px; left : 1755px; z-index:1
10;}
#caja3{ bo
order-color:ggreen; t op: 70px;
7 left : 20
00px; z-indexx:20 }
#caja4{ bo
order-color:oorange; t op: 100px; left : 100px; z-ind dex:0;}
om, 2006-2029
Propiedad z-index. Superposición de elementos.
Elimina la propiedad posit ion:absolut e; para t odos los div, mant eniendo el rest o del código igual. Si
visualizas el result ado comprobarás que las propiedades t op y left son ignoradas y que el
posicionamient o sigue el flujo nat ural de element os block en un document o. Declara ahora posición
absolut a únicament e para la caja 4 con #caja4{ border-color:orange; t op: 100px; left : 100px; z-index:0;
posit ion:absolut e;} El result ado será que la caja 4 se superpone con las ot ras cajas. Sin embargo, el
hecho de que la caja 4 t enga un z-index 0 y las ot ras cajas un z-index superior no lleva a que la caja 4 se
vaya al fondo. ¿Por qué? Porque z-index sólo funciona ent re element os con posición est ablecida. En
est e caso la caja 4 t iene una posición absolut a est ablecida y est á fuera del flujo normal del document o,
mient ras que las ot ras cajas no t ienen posición est ablecida y est án dent ro del flujo normal.
Las cajas con posición absolut a se sit úan por encima de las cajas dent ro del flujo normal del
document o, es como si est uvieran en dos planos dist int os, un plano superior para element os con
posición absolut a y un plano inferior para element os dent ro del flujo normal.
Con frecuencia se t rat a de aplicar z-index para element os no posicionados, o ent re element os
posicionados y no posicionados, y el result ado es que aparent ement e z-index “ no funciona” . z-index sí
funciona, pero de acuerdo con unas reglas y limit aciones que debemos conocer para no t ener
quebraderos de cabeza innecesarios.
EJERCICIO
Analiza el siguient e código, visualiza su result ado y responde a las pregunt as:
<ht ml>
<head>
<t it le>Ejemplo aprenderaprogramar.com</ t it le>
<met a charset =" ut f-8" >
* {font -family: sans-serif;}
#cajaGris { w idt h: 225px; height : 225px; border: solid 1px #ccc; background: #ddd; margin-t op:20px; }
#cajaAzul {w idt h: 225px; height : 225px; border: solid 3px #4a7497;
background: #8daac3; margin-t op: -50px; margin-left : 50px;}
#cajaOcre { w idt h: 225px; height : 225px; border: solid 2px #8b6125;
background: #ba945d; margin-t op: -50px; margin-left : 100px; margin-bot t om: 20px;}
</ head>
</ st yle>
<body>
<div id =" cajaGris" >Caja gris</ div><div id =" cajaAzul" >Caja azul</ div><div id =" cajaOcre" >Caja ocre</ div>
</ body>
</ ht ml>
a) ¿Cuánt as cajas cont enedoras hay? ¿Est án ident ificadas por id o por class?
b) ¿Cuál es el grosor del borde de la caja azul y en qué unidades est á expresado?
c) ¿Por qué se superponen unas cajas encima de ot ras? ¿En qué orden aparecen las cajas superpuest as
(es decir, cuál est á arriba, cuál est á en posición int ermedia y cuál est á en el fondo)? ¿Por qué aparecen
con ese orden y no ot ro?
Propiedad z-index. Superposición de elementos.
d) Queremos que la caja gris se sit úe por encima del rest o de cajas. ¿Qué modificaciones en el código
hemos de hacer para lograr est e objet ivo?
e) M odifica el código para que la caja ocre quede en el fondo, la caja azul en posición int ermedia y la
caja gris encima.
Para comprobar si tu código y respuest as son correct as puedes consult ar en los foros

Propiedade
es para control del texto CSS.
PROPIEDA
ADES PARA CONTROL
C DE
EL TEXTO CS
SS
CSS dispo
one de una serie de prop
piedades que
e permit en cont
c rolar la forma
f en qu
ue se muest ra
r el t ext o.
Ent re ella
as vamos a est
e udiar algu
unas como t ext
e -align, co lor, t ext -deccorat ion, t exxt -indent , w hit
h e-space.
Algunas de
d ellas son muy usadas como t ext -a
align. Ot ras como w hit e-space,
e aún siendo men
nos usadas
t ienen un gran pot enccial.
AD TEXT-ALI GN
PROPIEDA
PROPIE
EDAD CSS te
ext-align
edad Per mit e definir cómo se alin
nea una unid
dad de t ext o (párrafo o siimilar).
Valor po
or defecto left
Aplicable a Con
nt enido de element os t ip
po block y co nt enido de t ablas
Valores posibles parra left,, right, centerr, justify (el t ext

e o se alinea según se indiq
que)
esta pro
opiedad erit (se hereda
e).
Ejemplos #co nt ent 1 {t ext -a

align: cent er;}
aprende
eraprograma
ar.com .element oJukeBo
ox {t ext -align: just ify;}
Los eleme
ent os inline dent ro del t ext o como
o imágenes o spans que
edan t ambié
én afect ados
s por est a
propiedad dad act úa siiempre en r elación a la alineación horizont
d. La propied h el t ext o. La alineación
al de
vert ical ha
abrá que rea
alizarla usand
do ot ras prop
piedades.
Alineación de
el t ext o left Al ineación del t extt o right Alin
neación del t ext o cent er Alin
neación del t extt o just ify el
t extt o queda alinead
do t ant o por
derecha como po r la izquierda
la d
med
diant e el ajust e del
d espacio.
Est a prop iedad se herreda direct am

ment e por pa
art e de los element os hijjos.
AD COLOR
PROPIEDA
Para est ablecer el collor de un t exxt o se usa la

a propiedad color. En realidad sería más razonable que se
llamara t ext -color, pe
ero por mo t ivos hist óriicos se ha mant
m enido la ación color. Ya hemos
a denomina
hablado de
d la forma
a de expresar colores y grados de
e t ransparen
ncia para co
olores usand
do CSS en
ant erioress apart ados del curso. Recordar q ue es posib
ble usar not ación
a RGB d
decimal o porcent
p ual,
not ación hexadecima
al o not acion
nes RGBA, HSL
H y HSLA. Ejemplo: co
ont ent JBox {ccolor: # FF0
0000;} Est a
d se hereda direct amen
propiedad nt e por partt e de los ele
ement os hij os con la ú nica excepción de los
enlaces <a
a> … </ a>, cu
uyo color t ie
ene que est ablecerse dire
ect ament e sii quiere ser ccambiado.
om, 2006-2029
Propiedades para control del texto CSS.
PROPIEDAD TEXT-DECORATION
PROPIEDAD CSS text-decoration
Permit e definir algunos element os decorat ivos para t ext o como el

subrayado o el efect o de t achado.
Aplicable a Text os
none (no hay decoración), underline (subrayado normal), overline (subrayado

Valores posibles para por encima), line-through (efect o de t achado)
esta propiedad
Ejemplos #cont ent 1 {t ext -decorat ion: none;}

aprenderaprogramar.com .element oJukeBox {t ext -decorat ion: line-t rough;}
Est a propiedad sirve para evit ar el uso de las ant iguas et iquet as HTM L de subrayado <u> … </ u> y
t achado <st rike> … </ st rike>. ¿Por qué no deben usarse est as et iquet as HTM L? Porque como ya hemos
coment ado con ant erioridad en los desarrollos w eb act uales HTM L debe usarse exclusivament e para
definir la est ruct ura y cont enedores del document o, mient ras que los est ilos deben est ar definidos por
separado mediant e CSS.
Un valor adicional para est a propieadad era blink, que servía para indicar que el t ext o debía parpadear.
No obst ant e, est e valor se ha eliminado del est ándar por lo que no debe usarse.
El valor none puede usarse para anular el subrayado que por defect o int roducen los navegadores para
los links (element os a) si est ablecemos a {t ext -decorat ion: none;}.
Aunque t ext -decorat ion es una propiedad sencilla, t iene un aspect o que puede result ar bast ant e
problemát ico. Supongamos que queremos est ablecer que t odo el t ext o dent ro de un div vaya
subrayado, pero que en el element o con id=” cont ent M box” el t ext o no lleve subrayado. Podríamos
pensar en usar est e código:
div {t ext -decorat ion: underline;}

#cont ent M box {t ext -decorat ion: none;}
El result ado es que aún dent ro del element o para el que hemos especificado t ext -decorat ion:none; el
t ext o sigue est ando subrayado. ¿Por qué? Porque t ext -decorat ion es una propiedad un t ant o especial
que se dibuja acumulat ivament e t ransmit iéndose de padres a hijos sin ser anulable por los hijos. En
est e caso lo que ocurre es que a t odos los div se le aplica el subrayado y luego, acumulat ivament e, al
element o cont ent M box se le aplica t ext -decorat ion: none;. El result ado es underline + none =
underline, el t ext o aparece subrayado. Supongamos ahora que escribimos est o:
div {t ext -decorat ion: underline;}

#cont ent M box {t ext -decorat ion: overline;}
El t ext o dent ro del element o cont ent M box aparecerá con una línea por abajo (underline) y una línea
por arriba (overline) debido al caráct er acumulat ivo de est a propiedad.
PROPIEDAD TEXT-INDENT
PROPIEDAD CSS text-indent
Permit e definir el indent ado (desplazamient o hacia dent ro) de la

primera línea de un párrafo de t ext o.
Valor por defecto 0
Aplicable a Text os
Valores posibles para Una unidad de medida absolut a o relat iva (incluido %) permit ida en CSS
esta propiedad inherit (se heredan las caract eríst icas del element o padre).
Ejemplos #cont ent 1 {t ext -indent : 20px;}

aprenderaprogramar.com .element oJukeBox {t ext -indent : 0.6em;}
En el caso de ut ilizarse un valor en %, el porcent aje se calcula como porcent aje del valor w idt h del
element o padre.
PROPIEDAD W HITE-SPACE
PROPIEDAD CSS w hite-space
Det ermina el t rat amient o que le da el navegador a los espacios en

blanco.
Valor por defecto normal
normal (si aparece una secuencia de varios espacios en blanco dent ro de un

t ext o en el document o HTM L, el navegador los colapsa dejando un solo
espacio; el espacio en blanco se usa para generar salt os de línea si se excede el
t amaño del cont enedor. Los salt os de línea en el document o HTM L se ignoran)
now rap (el comport amient o es como el normal, pero el espacio en blanco no se usa
para generar salt os de línea, por lo que t odo el t ext o queda en una sola línea)
Valores posibles para esta pre (el t ext o se conserva t al y como est é en el document o HTM L, conservando
las secuencias de espacio y salt os de línea como est én allí definidos)
propiedad
pre-w rap (el comport amient o es como con w rap pero los espacios en blanco
se usan para generar nuevas líneas si no hay espacio sufient e disponible)
pre-line (se mant ienen los salt os de línea definidos en el document o HTM L, se
colapsan secuencias de espacios en blanco y se usan espacios en blanco para
generar nuevas líneas si no hay espacio suficient e disponible)
Ejemplos #cont ent 1 {whit e-space: pre;}

aprenderaprogramar.com .element oJukeBox {w hit e-space: now rap;}
Est a propiedad evit a el uso de la et iquet a HTM L <pre> cuyo uso es no recomendado.
Puede result ar de gran int erés para realizar ciert as maquet aciones de ciert as part es de páginas w ebs
donde queremos que el t ext o se comport e de una manera específica en relación a los espacios en
blanco, t abuladores y salt os de línea.
Crea un document o HTM L con est e cont enido (respet ando los espacios y salt os de línea):
<ht ml>
<head>
</ head>
<body>
<div id=" caja1" >Caja 1 aprenderaprogramar.com w eb
de didáct ica y divulgación de la
programación cursos humor y más
</ div>
programación cursos humor y más</ div>
<div id =" caja4" >Caja 4 aprenderaprogramar.com w eb
<div id =" caja5" >Caja 5 aprenderaprogramar.com w eb
</ body>
</ ht ml>
Y un archivo de hoja de est ilos con est as reglas (pon el nombre de archivo adecuado) que nos
permit irán ver el result ado del uso de w hit e-space:

div {border-st yle: solid; border-w idt h:2px; margin:56px 0px 7px 7px;
padding:7px; background-color: #FFEFD5; w idt h:290px; height :110px; }
#caja1{ border-color:red; w hit e-space:normal;}
#caja2{ border-color:blue; w hit e-space: now rap; font -size:12px;}
#caja3{ w idt h: 225px; border-color:green; w hit e-space: pre;}
#caja4{ w idt h: 225px; border-color:orange; w hit e-space: pre-w rap;}
#caja5{ w idt h: 225px; border-color:black; w hit e-space: pre-line}
.limpiador {clear:bot h; padding:0; w idt h:0; height :0; border-st yle:none; }
En la caja 1 vemos el comport amient o normal, según el cual varios espacios en blanco seguidos son
ignorados y el t ext o se va desarrollando sobre la caja y aprovechando un espacio en blanco para crear
el salt o de línea cuando es necesario debido a que el t amaño del cont enedor es insuficient e.
En la caja 2 vemos el comport amient o no-w rap. El t ext o no salt a de línea y se mant iene en una única
línea, excediendo el t amaño del cont endor sin adapt arse a él. Si quisiéramos evit ar que el t ext o salga
fuera del cont enedor podríamos usar la propiedad overflow .
En la caja 3 vemos el comport amient o con pre. El t ext o se mant iene t al cual ha sido definido en el
document o HTM L, incluyendo secuencias de espacios, t abuladores, salt os de línea, et c.
En la caja 4 vemos el comport amient o con pre-w rap. En est e caso se mant iene el t ext o t al cual ha sido
definido en el document o HTM L, pero allí donde no hay espacio suficient e el t ext o crea nuevas líneas
aprovechando espacios en blanco para hacerlo.
En la caja 5 vemos el comport amient o con pre-line. En est e caso se mant ienen los salt os de línea del
document o HTM L, pero los espacios en blanco se colapsan y se generan salt os de línea aut omát icos
cuando el cont enido excede el t amaño del cont enedor.
EJERCICIO
Crea un document o HTM L y un archivo con la hoja de est ilos CSS que cumpla con est os requisit os:
a) Deben exisit ir t res cont enedores (div1, div2 y div3) sit uados en horizont al, cada uno con margin 20px
en t odas direcciones, relleno de 10 píxeles en t odas direcciones, ancho de 200 píxeles, alt ura de 400
píxeles y borde sólido de 4 píxeles de anchura.
b) El div 1 debe t ener alineación del t ext o cent rada, color de t ext o #FF6347. Debe cont ener un t ext o
suficient ement e largo, con algunas palabras subrayadas y el primer párrafo indent ado un 10%.
c) El div 2 debe t ener alineación del t ext o a la derecha, color de t ext o #008080. Debe cont ener un t ext o
suficient ement e largo, con algunas palabras subrayadas por encima y el primer párrafo indent ado en 50
píxeles. Est e div est ará definido en el HTM L como un t ext o con salt os de línea definidos en ciert os
punt os. Al most rarse por pant alla, deben usarse propiedades CSS para se mant engan los salt os de línea
definidos en el document o HTM L, se colapsen secuencias de espacios en blanco y se usen espacios en
blanco para generar nuevas líneas si es necesario
d) El div 3 debe t ener alineación del t ext o just ificada, color de t ext o #8B4513. Debe cont ener un t ext o
suficient ement e largo, con algunas palabras t achadas, y el primer párrafo indent ado en un 20%.
Además el t ext o cont endrá una frase donde exist an 15 espacios en blanco seguidos, y dichos espacios
deben most rarse cuando se visualice el t ext o (si coincide con un borde del cont enedor deberán
cont inuar en una nueva línea).

Propiedade
es para control del texto CSS y efecto sombra
a.
CONTROL
L DEL TEXTO CSS
Ya conoce
emos alguna
as propiedad
des para dar format o a t ext os, como
o t ext -align, ccolor, t ext -d ecorat ion,
t ext -inden
nt , w hit e-spa
ace, et c. Vam
mos a cont in
nuar repasan
ndo propied ades que result an de in t erés para
darle form
mat o a t ext o s como t ext -overflow
- , lin
ne-height y t ext -shadow . Con t ext -sh
hadow podre
emos crear
sombras con
c dist int oss efect os lo cual
c nos resu
ult ará út il parra mejorar n uest ros diseños w eb.
PROPIEDA
AD TEXT-OV
VERFLOW
Ya conoce
emos la pro
opiedad overrflow , que permit
p e defi nir cómo de
ebe comportt arse el navegador en
nido de una caja exceda su t amaño, por ejemplo
caso de q ue el cont en o si el t ext o que excede el t amaño
a cont enedorra debe perm
de su caja manecer visib
ble, ocult o, o accesible mediant
m e barrras de scrolll.
La propiedad t ext -ove

erflow se con
ncibió para dar
d un mayo
or cont rol sob
bre cómo de
ebería comp ort arse un
t ext o que
e se sale de
e su cont ene ext o por un os punt os
edor, permitt iendo el reemplazo del final del t e
suspensivvos (ellipsis) o por una cadena definid
da por nosot ros, por ejem
mplo podría ser “ Leer má
ás…” .
Para apliccar est a prop

piedad t enem
mos que estt ablecer ant es
e la propied
dad overflow
w con valor hidden,
h ya
que si no lo hacemos no observarremos efect o alguno (pre
evalecerá lo indicado porr overflow ). Además
A lo
indicado se
s aplicará al
a t ext o que no quepa en
n sent ido ho rizont al pero
o en cualqui er punt o del t ext o, no
nal. Est o puede generar efect
sólo al fin e os ext ra emplo que u nos punt os ssuspensivos aparezcan
años (por eje
en un pun
nt o int ermed
dio, cuando realment e sólo deberían a evit ar est o habremos
n aparecer al final). Para
de forzar que el t ext o no haga salt
s os de líne
ea usando w hit e-space: now rap; gra
acias a lo qu
ue el t ext -
overflow se aplicará exact
e ament e a la part e fi nal del t ext o.
o
PROPIED
DAD CSS textt-overflow
Per mit e genera

ar un t rat am
mient o espe
ecífico para t ext o que excede
e el
edad
t am
maño de su co
ont enedor.
Valor po
or defecto clip
Aplicable a Elem
ment os t ipo block con t ext
e o
clip (el t ext o se co

ort a al llegar al
a borde del cont enedor)
psis (la part e final del t ext

ellip e o se reem
mplaza con … ant es de salirse
s del
Valores posibles parra contt enedor)
esta pro
opiedad Una
a cadena, escrrit a ent re com
millas simples, por ejemplo ‘Leer más’ (no
o admit ido
por algunos nave
egadores)
erit (se hereda

e).
Ejemplos
#co nt ent 1 {overf low : hidden; whit
w e-space: now
n rap; t ext --overflow : elli psis;}
aprende
eraprograma
ar.com
om, 2006-2029
Propiedades para control del texto CSS y efecto sombra.
Supongamos que | represent a el límit e del cont enedor. Supongamos est e t ext o:
aprenderaprogramar.com es una w | eb para aprender programación.
Los result ados que obt endríamos para los dist int os casos serían:
clip: aprenderaprogramar.com es una w |
ellipsis: aprenderaprogramar.com es una …|
‘...cont inúa’ : aprenderaprogramar.com …cont inúa |
Not a: debido a las limit aciones y problemas de compat ibilidad ent re navegadores no recomendamos el
uso de est a propiedad. Usa preferiblement e overflow en lugar de t ext -overflow .
PROPIEDAD LINE-HEIGHT
Est a propiedad es de amplio uso para est ablecer la separación ent re líneas cuando se muest ra un t ext o.
PROPIEDAD CSS line-height
Función de la propiedad Permit e fijar la alt ura ocupada por las líneas (int erlineado).
normal (el int erlineado será el predet erminado por el navegador o el exist ent e
por herencia)
Valores posibles para Un número sin especificar unidades (el int erlineado será t ant as veces el
int erlineado normal como indique el número)
esta propiedad
Una unidad de medida relativa o absoluta (se admit en porcent ajes)
Ejemplos #cont ent 1 {line-height : 1.3;}

aprenderaprogramar.com .element oJukeBox {line-height : 130%;}
Se recomienda no especificar unidades para line-height porque puede ent rar en conflict o con el t amaño
del t ext o. Por ejemplo si el t ext o es de 14px y especificamos line-height 10px el t ext o no cabría en la
línea y se generaría una superposición. Ot ro caso problemát ico sería t ener un element o h1 dent ro de
un div y aplicar line-height : 1.1em. Al hacer est o se fuerza al h1 a que t ome como int erlineado 1.1 veces
el t amaño de let ra definido para el div, lo que puede generar dist orsiones. En cambio especificando
simplement e 1.1 sin unidades t odos los element os t omarán como int erlineado 1.1 veces lo que sería su
int erlineado normal, lo cual proporciona un result ado más seguro que ot ra especificación basada en
unidades.
PROPIEDAD TEXT-SHADOW
Est a propiedad sirve para añadir efect os de sombra a un t ext o, lo cual permit e generar diseños
at ract ivos.
La sint axis a emplear es la siguient e:
select orElement o {t ext -shadow : valorX valorY blurOpcional colorOpcional; }
Donde valorX indica el t amaño o desplazamient o de la sombra respect o al t ext o hacia la derecha
(valores posit ivos) o hacia la izquierda (valores negat ivos), expresado con una unidad de medida válida
en CSS.
ValorY indica el t amaño o desplazamient o de la sombra respect o al t ext o hacia abajo (valores posit ivos)
o hacia arriba (valores negat ivos), expresado con una unidad de medida válida en CSS.
blur es un parámet ro opcional que indica un efect o de desenfoque o difuminado de la sombra,

expresado con una unidad de medida válida en CSS. A mayor valor, la sombra t iene un mayor
difuminado y se vuelve más clara y brillant e.
El color es un parámet ro opcional. Si se indica, especifica el color de la sombra. Si no se indica, el color

de la sombra será el mismo que el color que t enga el t ext o.
PROPIEDAD CSS text-shadow
Función de la propiedad Permit e definir un efect o de sombra para el t ext o.
none (no hay efect o de sombra)
valorX valorY blurOpcional colorOpcional (genera una sombra de acuerdo a los

parámet ros especificados; se permit en especificar 2 ó más sombras, separando
esta propiedad
su especificación mediant e comas)
Ejemplos #cont ent 1 { text -shadow : 2px 2px red;}

aprenderaprogramar.com .element oJukeBox { t ext -shadow : -6px -6px 12px blue ;}
Est a propiedad est á disponible en t odos los navegadores recient es, pero algunos más ant iguos pueden
no reconocerla.
Crea un document o HTM L con est e cont enido para probar est a propiedad y visualiza los result ados:
<ht ml>
<head>
h1 {padding:10px 20px;}
</ st yle>
</ head>
<body>
<h1 st yle=" color: black; t ext -shadow : 2px 2px red;" >aprenderaprogramar.com</ h1>
<h1 st yle=" color: black; t ext -shadow : 2px 2px 4px red;" >aprenderaprogramar.com</ h1>
<h1 st yle=" color: black; t ext -shadow : 2px 2px 12px red;" >aprenderaprogramar.com</ h1>
<h1 st yle=" color: black; t ext -shadow : 2px 2px 12px red, -6px -6px blue ;" >aprenderaprogramar.com</ h1>
<h1 st yle=" color: black; t ext -shadow : 2px 2px 12px red, -6px -6px 12px blue ;" >aprenderaprogramar.com</ h1>
</ ht ml>
En la imagen ant erior observamos en primer lugar una sombra sólida de color rojo con desplazamient o
hacia la derecha y abajo. En segundo lugar t enemos esa misma sombra con un ligero difuminado (blur)
y en t ercer lugar la misma sobra con un mayor difuminado aún. En cuart o lugar t enemos dos sombras,
una hacia abajo a la derecha roja y difuminada y ot ra hacia arriba a la izquierda azul y sólida. En quint o
lugar la sombra azul ant erior se ha difuminado, con lo cual observamos el efect o de dos sombras
difuminadas, una roja hacia abajo a la derecha y ot ra azul hacia arriba a la izquierda.
EJERCICIO
en t odas direcciones, relleno de 8 píxeles en t odas direcciones, ancho de 240 píxeles, alt ura de 300
píxeles y borde sólido de 3 píxeles de anchura con color de borde azul.
b) El div 1 debe cont ener un t ext o suficient ement e largo como para exceder el t amaño del cont enedor,
y el excedent e de t ext o no debe most rarse apareciendo en el punt o final unos punt os … . La alt ura de
línea debe ser un 5 % superior a lo normal. Un fragment o del t ext o (delimit arlo con span) debe t ener
t amaño de fuent e 18 píxeles y una sombra sólida de color rojo con desplazamient o hacia la derecha y
abajo.
c) El div 2 debe cont ener un t ext o suficient ement e largo como para exceder el t amaño del cont enedor,
y el excedent e de t ext o no debe most rarse aunque rebase al cont enedor, y no deben aparecer punt os
en el lugar donde se cort e el t ext o. La alt ura de línea debe ser un 10 % superior a lo normal. Un
fragment o del t ext o (delimit arlo con span) debe t ener t amaño de fuent e 18 píxeles y una sombra sólida
de color azul con desplazamient o hacia la izquierda y abajo.
d) El div 3 debe t ener alineación del t ext o just ificada y color de t ext o #8B4513. Debe cont ener un t ext o
suficient ement e largo como para exceder el t amaño del cont enedor. La alt ura de línea debe ser un 20
% superior a lo normal. Un fragment o del t ext o (delimit arlo con span) debe t ener t amaño de fuent e 18
píxeles y una sombra con efect o de difuminado de color verde de modo que parezca que exist e vapor
verde det rás del t ext o.

Propiedade
M ÁS CON
NTROL DEL TEXTO CSS
Cont inuam
mos repasan
ndo propieda
ades que result an de in t erés para darle
d formatt o a t ext os como
c t ext -
t ransform
m, que nos pe
ermit irá ent re
r ot ras posiibilidades t ra
ansfomar un
n t ext o a mayyúsculas o minúsculas.
m
Además veremos
v com
mo w ord-sp acing y let t er-spacing
e nos
n permit en
n variar el e
espacio de separación
s
ent re pallabras o lett ras y w ord -w rap nos permit irá ro
omper palab
bras largas que no cab
ben en su
en espacios i nt ermedios que permit an
cont ened or y no t iene a crear salt os
o de línea.
PROPIEDA
AD TEXT-TRA
ANSFORM
PROPIEDA
AD CSS text--transform
edad Per mit e t ransfo
ormar la aparriencia de un
n t ext o.
Valor po
or defecto non
ne
Aplicable a Tod
dos los eleme
ent os
ne (no hay t ran

non nsformación del
d t ext o)
percase (t ransforma el t ext o a mayúscula

upp as)
wercase (t ransfforma el t ext o a minúsculas)
low
opiedad
esta pro
capiitalize (convie
ert e la primera
a let ra de cad a palabra en mayúsculas)
erit (se hereda

e).
Ejemplos
#co nt ent 1 {t ext -tt ransform: up percase;}
aprende
eraprograma
ar.com
mos que t ene

Supongam emos el t ext o: “ La mejorr w eb para APRENDER a programar”
p . Los efect os serían:
e : LA M EJOR
uppercase RA WEB PARA
A APRENDER
R A PROGRAM
M AR
e : la mejor w eb para aprrender a prog

low ercase gramar
e : La M ejor Web
capitalize W Para Aprrender A Pro
ogramar
Recordar que hay un

n select or q ue nos perm
mit e definir est ilos para
a la primera let ra de t ext o de un
párrafo o cont enedo
or que es firrst -let t er. Po mbinar est e select or con
odemos com n t ext -t ransfform para
poner la primera lett ra en un format
f o esp
pecial. Por ejemplo
e p::ffirst -let t er {ffont -size: 30
00%; t ext -
t ransform
m: uppercase
e;} nos perrmit e ponerr la primerra let ra en mayúsculass y con un
n format o
ext ragran de.
om, 2006-2029
Propiedade
PROPIEDA
ADES LETTER
R-SPACING Y W ORD-SPA
ACING
Se t rat a de
d dos propiiedades de uso
u no habitt ual que perrmit en est ab
blecer una se
eparación en
nt re let ras
específica
a o una separración ent re palabras esp
pecífica.
Su valor por
p defect o es normal y se est ableccen indicand
do una unida
ad de medid
da válida en CSS como
valores en
n píxeles o en em.
Ejemplos:: cont ent 1 { let

l t er-spacin
ng: 9px;}
#jukBox { w ord-spacin
ng: 1.3em;}
Se admit en
e valores ne
egat ivos, perro en alguno
os casos pueden generarr efect os ext raños indese
eados (por
ejemplo superposició
s n de palabra
as o let ras un
nas encima de
d ot ras).
PROPIEDA
AD W ORD-W
W RAP
Ya sabem
mos que a n o ser que hayamos
h esp
pecificado lo
o cont rario con
c la propi edad w hit e--space, las
palabras aprovechará
án espacios en blanco para
p sit uarse
e en una nu
ueva línea cu
uando el espacio a lo
ancho es insuficient e en el cont en
nedor. No o bst ant e, exis
st e el proble una palabra puede ser
ema de que u
t an larga que ocupe t odo el ancho disponib le y se salga nedor sin po sibilidad de crear una
a del cont en
nueva líne
ea por la faltt a de espacio o (est o se po dría denomi nar “ palabra
os en blanco a irrompible”” ). Usando
la propied
dad w ord-w rap cuyo valor por defe
ect o es norm
mal y cuyo único
ú posible es b reak-w ord
valor p
podemos especificar que la palab
bra deberá cont
c inuar en una nueva línea incluso
o cuando no
o exist a un
espacio en blanco parra generar el salt o de líne
ea.

H o para probar est a propie
L con estt e cont enido edad y visualliza los resultt ados:
<ht ml> <h ead> <t it le>Po rt al w eb - aprenderaprograma

ar.com</ t it le> <met
< a charset ="
= ut f-8" >
<st yle t ype
e=" t ext / css" >
* {font -fam
mily: arial; }
h1 {margin
n: 20px; paddin
ng:10px 20px; border-st
b yle: so lid; border-colo
or: red; border--w idt h: t hin;}
</ st yle> <// head>
<body> <h
h1 st yle=" w idt h:210px;
h backgrround-color:yel low ;" >aprenderaprogramar.co
om</ h1>
<h1 st yle=
=" w idt h:210px; background-co
olor:yellow ; w o rd-w rap: break-w ord;" >apren deraprogramarr.com</ h1>
</ body><// ht ml>
om, 2006-2029
EJERCICIO
en t odas direcciones, sin relleno, ancho de 180 píxeles, alt ura de 300 píxeles y borde sólido de 6 píxeles
de anchura con color de borde rojo.
b) El div 1 debe cont ener un t ext o suficient ement e largo, con numerosos párrafos, como para exceder
el t amaño del cont enedor. El t ext o del ht ml debe t ransformarse complet ament e a mayúsculas
mediant e el uso de propiedades CSS. La separación ent re let ras debe ser un 5% superior a lo normal. La
primera let ra de cada párrafo debe t ener un t amaño un 250% lo normal.
c) El div 2 debe cont ener un t ext o suficient ement e largo como para exceder el t amaño del cont enedor.
El t ext o del ht ml debe t ransformarse complet ament e a minúsculas mediant e el uso de propiedades
CSS. La separación ent re let ras debe ser un 10% superior a lo normal. Debe cont ener una palabra
(cadena de t ext o cualquiera) de gran longit ud, de modo que no quepa en el cont enedor, y “ romperse”
para no exceder la capacidad del cont enedor usando la propiedad w ord-w rap.
d) El div 3 debe cont ener un t ext o suficient ement e largo como para exceder el t amaño del cont enedor.
El t ext o del ht ml debe t ransformarse para que t oda palabra comience con una let ra mayúscula
mediant e el uso de propiedades CSS. La separación entre palabras debe ser un 10% superior a lo
normal. Debe cont ener una palabra (cadena de t ext o cualquiera) de gran longit ud, de modo que no
quepa en el cont enedor, y no romperse.

vertical-alig
gn CSS. Alinear verticalmente elementos.
CENTRAD
DO VERTICAL
L DE ELEM EN
NTOS
Hemos visst o un núme

ero relat ivam
ment e amplio
o de propied
dades CSS qu
ue nos perm
mit en t rabajar aspect os
de alineacción en la h orizont al y, sin embargo
o, las posibil idades de t rabajo
r en la vert ical son menores.
Vamos a est udiar la propiedad
p ve
ert ical-align que permit e el posicion amient o y ce
ent rado de element
e os
en la vert ical, aunque su funcionamient o t iene
e ciert as com
mplicaciones.
PROPIEDA
AD VERTICAL-ALIGN
Es muy frrecuent e oir la expresión

n “ vert ical-allign no funciiona bien” a personas q ue est án co menzando
con CSS o que t ienen un conocim
mient o superfficial de CSS.. La realidad es que hay que conocer para qué
sirve est a propiedad y comprende
erla para pod
der valorar lo
os result adoss que se obt iienen con ellla.
opiedad que
Es una pro e al principio result a difícil de ent end er, vamos a t rat ar de haccerlo poco a poco.
PROPIED
DAD CSS verttical-align
Perm
mit e posicio nar elementt os inline en
n dist int as alineaciones vert icales
edad resp
pect o a una
a línea. Tam
mbién permitt e alinear ve
ert icalment e cualquier
elem
ment o dent ro de una celda de una t abla..
Valor po
or defecto base
eline
Aplicable a Elem
ment os inline y element os dent
d ro de celd
das de t ablas
eline (el elem

base ment o se alinea
a como lo harría normalmen
nt e)
ddle (elementt os inline se alinean de modo

mid m que se cent ran vertt icalment e
resp
pect o a la líne
ea del elemen t o padre en l a que est án; e
element os en
n celdas de
t abl as se cent ran vert icalment e en la celda de
d la t abla)
top y bottom (ele

ement os inlin
ne se alinean de
d modo que se su part e superior
s se
ea con la línea en la que es
aline st án; elementt os en celdas de t ablas se colocan
c en
la pa
art e superior en la celda de
e la t abla)
bottom (elem
textt-top y text-b ment os inline se alinean d
de modo que
e su part e
supe
erior se alinea
a con la part e superior de la
a línea del ele
ement o padre; su efect o
esta pro
opiedad
suelle ser muy sim
milar al de t op
p y bot t om)
sub y super (elem

ment os inline
e se alinean de
d modo que se su part e superior
s se
ea con las líne
aline eas de subínd ice o superínd
dice del eleme
ent o padre)
Una
a unidad de medida rellat iva o absolut a válida en CSS (se
e admit en
porccent ajes. Desplaza la línea de base del element o haccia arriba respect o a su
base
eline en la medida
m indicad e a baseline; si es % se
da. Si se indicca 0 equivale
calccula respect o al
a valor de line
e-height . Se admit
a en valore
es negat ivos.))
erit (se hereda

e).
om, 2006-2029
vertical-alig
PROPIED
DAD CSS verttical-align
Ejemplos
img {vert ical-align
n:middle;}
eraprograma
aprende ar.com
mos la prop
Como vem piedad vert iccal-align t ien
ne ciert a com
mplejidad, ent
e re ot ras ccosas porqu e muest ra
dist int o comport
c amie
ent o según se
s aplique a element os en cont ene
edores “ norm
males” o a element
e os
dent ro de
e celdas de t ablas.
a
Dent ro de
e una t abla el
e comport am
mient o de ve
ert ical-align podemos
p deccir que es el que espera la mayoría
de la gentt e: permit e cent
c rar vert iccalment e.

H L con estt e cont enido
o para probarlo y visualiza los result ados:

< a charset ="
= ut f-8" >
<st yle t ype
e=" t ext / css" > * {font -family: arrial; } t able {ma
argin:20px; back
kground-color:yyellow ;}
t d {height : 100px; t ext -al ign:cent er; pad
dding:2px;}
</ st yle> </
< head>
<body>
<t able borrder=" 1" cellpad
dding=" 0" cellspacing=" 0" st ylle=" w idt h: 450p
px;" >
<t r> <t d stt yle=" vert ical-align:baseline;" ><p>Un text o<
</ p></ t d>
<t d st yle="" vert ical-align:tt op;" ><p>Un t ext
e o</ p></ t d>
<t d st yle="" vert ical-align:b
bot t om;" ><p>U
Un t ext o</ p><// t d>
<t d st yle="" vert ical-align:m
middle;" ><p>U
Un t ext o</ p></ t d>
</ t r> </ t ab
ble> </ body> </ ht ml>
Con las ce
eldas de una t abla el resu
ult ado es el esperado: co
on t op el t exxt o se coloca arriba, con bot t om se
coloca ab ajo y con mi ddle se cent ra vert icalm ent e.
mos a int entt ar emular est e comportt amient o con

Ahora vam n cont enedo
ores “ normal es” como di v. Crea un
documentt o HTM L con
n est e cont en
nido para pro
obarlo y visu
ualiza los result ados:

< a charset ="
= ut f-8" >
<st yle t ype
e=" t ext / css" > * {font -family: arrial; }
div {heightt : 100px; w idt h :112px; t ext -al ign:cent er; pad
dding:2px; float :left ; backgroun
nd-color:yellow
w ; border-st yle:solid;}
</ st yle> </
< head>
<body>
<div st yle=
=" vert ical-align::baseline;" ><p >Un t exto</ p><
</ div>
<div st yle=
=" vert ical-align::t op;" ><p>Un t ext o</ p></ divv>
<div st yle=
=" vert ical-align::bot t om ;" ><p>
>Un t ext o</ p><
</ div>
<div st yle=
=" vert ical-align::middle;" ><p>Un t ext o</ p><// div>
</ body> </
< ht ml>
om, 2006-2029
vertical-alig
¿Por qué no se aline

ea el t ext o? Pues porque
e la propied
dad vert ical-align funcion
na de una manera
m en
t ablas y de
d ot ra man
nera fuera de
d las t ablass. Fuera de t ablas, est a propiedad no puede aplicarse
a a
element os n puede apl icarse a un cont
o t ipo block.. Por t ant o no c enedor esperando
e q
que lo que ha
aya dent ro
de él se cent re vert ica
alment e. El código
c ant errior no t iene sent ido (aun
nque mucha gent e int en
nt a realizar
alineacion
nes vert icales así, de ahí que se oiga con t ant a fre
ecuencia que
e “ no funcion
na” ).
Fuera de t ablas, est a propiedad se

e aplica a ele
ement os inlin
ne para centt rarlos respect o a la línea
a en la que
se insert an,
a no puede
e ser aplicad
da a un con t enedor parra que los element os de
ent ro de él se alineen
vert icalme mplet ament e dist int o en t ablas que fuera
ent e. El conccept o es com f de t abl as (lo cual es
s curioso y
ue pregunt arle a los cr eadores de CSS por qu
habría qu ué han hech
ho est o así).. Para comp
prender el
concept o de vert ical-align fuera de
d t ablas fíja
at e en est a imagen porq
que supone un resumen
n didáct ico
del uso de
e vert ical-alig
gn fuera de t ablas.
En el recuadro superrior izquierd o vemos lo que sería una

u línea dent ro de un cont enedor div en su
posición nat
n ural: se coloca
c en la part e super ior del div. En
E el recuad
dro inferior izzquierdo vem
mos cómo
aparecería la imagen si se insert a dent ro de u na línea sin especificar
e v ical-align (o lo que es lo mismo,
vert
aplicándo
ole vert ical-align: baselin e;). En el reccuadro superior derecho
o se ha aplica
ado vert ical--align: t op;
a la image
en y ést a lo que
q hace es poner su pa
art e superiorr alineada co
on la línea de
ent ro de la cual
c est á la
imagen. En
E el recuad gn: middle; a la imagen y ést a se
dro inferior derecho se ha aplicado vert ical-alig
cent ra vert icalment e respect o a la
a línea dent ro
r de la cual est á.
om, 2006-2029
vertical-align CSS. Alinear verticalmente elementos.
Podemos dest acar lo siguient e:
a) vert ical-align se aplica al element o inline para alinearlo respect o a la línea dent ro de la cual est á
(por el cont rario, t ext -align se aplica al cont enedor para alinear horizont alment e su cont enido,
lo cual es un concept o dist int o).
b) vert ical-align no alinea respect o al cont enedor, sino respect o a la línea.
M ost ramos ahora el código HTM L. Escríbelo, visualiza los result ados y t rat a de comprenderlo:
<ht ml> <head> <t it le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
img { margin-left : 5px; margin-right :5px; }
div { w idt h: 360px; height : 210px; margin: 10px; padding:5px 20px; border-st yle: solid; border-color: red;
border-w idt h: t hin; background-color: yellow ; t ext -align: cent er;}
</ st yle> </ head>
<body>
<div st yle=" float :left ;" >Línea de text o sin una imagen</ div>
<div st yle=" float :left ;" >
<p> Línea de t ext o<img st yle=" vert ical-align:baseline;" src=" ht t p:/ / i.imgur.com/ afC0L.jpg" >con una imagen</ p>
</ div>
<div st yle=" clear:bot h; float :left ;" >
<p> Línea de t ext o<img st yle=" vert ical-align:t op;" src=" ht t p:/ / i.imgur.com/ afC0L.jpg" >con una imagen</ p>
</ div>
<div st yle=" float :left ;" >
<p> Línea de t ext o<img st yle=" vert ical-align:middle;" src=" ht t p:/ / i.imgur.com/ afC0L.jpg" >con una imagen</ p>
</ div> </ body> </ ht ml>
¿Y CÓM O ALINEAM OS ENTONCES VERTICALM ENTE?
Ya hemos vist o que vert ical-align no nos va a servir para realizar un cent rado vert ical de un element o
dent ro de un cont enedor, pero est o nos int eresará hacerlo con frecuencia. ¿Cómo hacerlo ent onces?
Est a es una cuest ión que suele generar problemas a los programadores y diseñadores w eb porque no
exist e un único mét odo, sino que hay varias maneras de hacerlo y cada una t iene sus vent ajas y sus
inconvenient es.
Exist en aproximadament e una docena de mét odos más o menos est ándar descrit os para cent rar
vert icalment e con CSS. Sin embargo, ninguno de ellos es la solución perfect a. Aquí vamos a poner un
ejemplo de un mét odo sin que est o signifique que sea el mejor ni que lo recomendemos. Simplement e
lo ponemos a modo de ejemplo.
En nuest ro caso vamos a t rat ar de cent rar vert icalment e un div int erior sit uado dent ro de un div
ext erior. A su vez el div int erior t iene un t ext o y vamos a t rat ar de cent rarlo vert icalment e.
La sit uación de part ida es est a:
vertical-alig

< a charset ="
= ut f-8" >
<st yle t ype
e=" t ext / css" >
* {font -fam
mily: arial; }
img { marg
gin-left : 5px; m argin-right :5px; }
div { w idt h:
h 360px; heightt : 210px; margiin: 10px; paddin
ng:5px 20px; bo
order-st yle: sol id; border-colo
or: red;
border-w id
dt h: t hin; backg
ground-color: yellow
y ; t ext -alig
gn: cent er;}
</ st yle> </
< head>
<body>
<div st yle=
=" float :left ;" >Líínea de text o si n una imagen</ div>
<div st yle=
=" float :left ;" >
<p> Línea de t ext o<img st
s yle=" vert ical-a
align:baseline;" src=" ht t p:/ / i.im
mgur.com/ afC0
0L.jpg" >con una
a imagen</ p>
</ div>
<div st yle=
=" clear:bot h; flo
oat :left ;" >
s yle=" vert ical-a
align:t op;" src=" ht t p:/ / i.imgur .com/ afC0L.jpg
g" >con una imagen</ p>
</ div>
<div st yle=
=" float :left ;" >
s yle=" vert ical-a
align:middle;" src="
s ht t p:/ / i.im gur.com/ afC0L
L.jpg" >con una imagen</ p>
</ div> </ body>
b </ ht ml>
Y el códig
go que nos va a servir como soluciión, basado en posicion amient o abssolut o del div
d int erior
respect o al
a ext erior, es
e est e:

< a charset ="
= ut f-8" >
<st yle t ype
e=" t ext / css" >
* {font -fam
mily: arial; }
div {w idt h : 300px; heightt : 300px; border-st yle:solid; ba
ackground-colo
or:#FED2FB; possit ion:relat ive;}
div div {w i dt h:100px; heig
ght : 100px; t exxt -align:cent er; background-color:yellow ; bo
order-st yle:dash
hed;
border-w id
dt h:2px; t op:50
0%; margin-t op :-52px; left : 50%
%; margin-left :-52px;
posit ion:absolut e; line-h eight :4em;}
div div p {ccolor:blue; }
</ st yle> </
< head>
<body>
<div> <divv ><p>Jump! </ p></
p div> </ div>
>
</ body> </
< ht ml>
om, 2006-2029
vertical-align CSS. Alinear verticalmente elementos.
Escribe ambos códigos, visualiza el result ado y compara una sit uación y ot ra. Trat a de comprender t odo
lo que hemos hecho (con los conocimient os adquiridos a lo largo del curso ya debemos ser capaces de
int erpret ar est e código). En un caso hemos posicionado el div int erior respect o al int erior y en el caso
del t ext o hemos aplicado line-height para forzar al t ext o a desplazarse vert icalment e. Si algo no t e
queda claro escribe una consult a en los foros (ht t p:/ / aprenderaprogramar.com/ foros).
A modo de resumen: no hay un mét odo universal para cent rar vert icalment e en CSS. Cada programador
o diseñador usa uno o varios mét odos y t rat a de buscar soluciones adapt adas a cada sit uación que se le
plant ea.
EJERCICIO
Analiza el siguient e código, visualiza su result ado y responde a las pregunt as:
<ht ml>
<head>
div { w idt h: 360px; height : 210px; margin: 10px; padding:5px 20px;
border-st yle: solid; border-color: red; border-w idt h: t hin;
background-color: yellow ; t ext -align: cent er; float : left ;}
#vcent { display: t able; }
#vcent span { display: t able-cell; vert ical-align:middle;}
</ st yle>
</ head>
<body>
<div><span>Línea de t ext o cont enedor 1</ span></ div>
<div id=" vcent " ><span>Línea de t ext o cont enedor 2</ span></ div>
</ body>
</ ht ml>
a) ¿Cuánt as cajas cont enedoras hay? ¿Est án ident ificadas por id o por class o por ninguno de ellos?
b) Visualiza el result ado en al menos dos navegadores dist int os. ¿Quédiferencias observas ent re
ambos? ¿A qué crees que se deben?
c) ¿Por qué el t ext o <<Línea de t ext o cont enedor 2>> se muest ra cent rado vert icalment e?
e) M odifica el código para que el t ext o <<Línea de t ext o cont enedor 1>> se muest re cent rado
vert icalment e.

Tipografía y fuentes CSS. Propiedades
P re
elacionadas.
TIPOGRAFÍA CSS
mos viendo posibilidades

Cont inuam p s que ofrece CSS en relac
ción a los t exxt os. Un aspe
ect o import ant
a e de los
t ext os es el t ipo de let ra que usan
u y cóm o se configura la let ra. Hay dist in t as propied ades para
configurar la t ipografíía, ent re ellas font -size, font
f -w eight y font -st yle.
PROPIEDA
AD FONT-SIZ
ZE
PROPI EDAD CSS fo

ont-size
edad Per mit e est able
ecer el t amañ
ño de let ra.
Valor po
or defecto med
dium
Aplicable a Tod
dos los eleme
ent os
Una
a unidad de medida
m absolutt a o relat iva (iincluido %, en
n cuyo caso el cálculo se
hace
e respect o al t amaño de lett ra del element o padre) pe
ermit ida en CS
SS
Una
a palabra clavve: xx-small, x-small, sma
all, medium, large, x-large
e, xx-large
Valores posibles parra don de medium es el t amaño por
p defect o qu
ue aplica el na
avegador.
esta pro
opiedad
Una
a palabra clavve: larger ó sm
maller, que significa más g
grande o más
s pequeño
que el t amaño de
e let ra del elem
ment o padre.
erit (se hereda

e).
Ejemplos #co nt ent 1 {font -ssize: 20px;}

eraprograma
aprende ar.com .element oJukeBo
ox {font -size: small;}
s
Cuando se
e usan las un
nidades em y ex para fija
ar el t amaño de let ra, el cálculo
c de ésst e se hace respect
r o al
t amaño de
d let ra del element
e o pad
dre. En camb
bio cuando se
s usa em y ex en ot ro cont ext o, el t amaño de
let ra que se t oma com
mo referencia
a es el del prropio elemen
nt o.
Hay que t ener en cue

ent a que al aplicar fontt -size se pue
eden est ar modificando
m dimensiones de ot ros
o de la pági na w eb deb
element os bido a que hay
h unidades
s de medida
a como em y ex que t om
man como
referencia
a el t amaño de let ra.
Si est able
ecemos como
o t amaño de
e let ra en el element o body
b un valo r como 12 p
píxeles, ent o nces 1 em
serán 12 píxeles,
p m serán 24 p íxeles y así sucesivamen
2 em s t e. Si no se ha
h est ablecid
do un valor de
d t amaño
de let ra, ent onces 1 em correspo
onde al valo
or del t amañ
ño de let ra por
p defect o que use el navegador
n
malment e es de 16 píxele
(que norm es).
Usar t ama
años de let r a relat ivos basados
b en em
e ó en pala
abras clave puede
p ser in t eresant e, puest
p o que
nos perm it irán cambi ar la aparien e variando el t amaño d e fuent e de referencia
ncia de t oda la página w eb
a t ravés de
d su definici ón en el elem
ment o body.
om, 2006-2029
Tipografía y fuentes CSS. Propiedades relacionadas.
Algunos programadores y diseñadores w eb usan una t écnica consist ent e en est ablecer el t amaño de
fuent e en body en el 62.5% (de 16 px) que son 10 px de modo que 1 em serán 10 px. En el rest o de
element os usan valores en em cuya correspondencia en píxeles es direct a, ya que 1 em serán 10px, 1.2
em serán 12px, 1.6em serán 16px y así sucesivament e.
Los t ít ulos suelen t ener una equivalencia similar a la que most ramos a cont inuación.
Tipo de título Palabra clave Píxeles em (* )
h1 xx-large 24 1.5
h2 x-large 22 1.375
h3 large 18 1.125
h4 medium 16 1
h5 small 12 0.75
h6 xx-small 10 0.625
(* ) Tener en cuent a que el valor de un em es cambiant e si se modifica el t amaño de fuent e de

referencia.
PROPIEDAD FONT-W EIGHT
PROPIEDAD CSS font-w eight
Función de la propiedad Permit e est ablecer el grosor de let ra.
Un valor numérico múlt iplo de 100 comprendido ent re 100 y 900
Una palabra clave: normal (equivale a 400), bold (equivale a 700), bolder (indica
“ más grueso que el grosor de fuent e del element o padre” ), light er (indica
esta propiedad
“ menos grueso que el grosor de fuent e del element o padre” ).
Ejemplos #cont ent 1 {font -w eight : bold;}

aprenderaprogramar.com .element oJukeBox {font -w eight : 300;}
Algunas fuent es sólo permit en los valores normal y bold. En est e caso cualquier valor ent re 100 y 500 se
consideraría normal y cualquier valor ent re 600 y 900 se consideraría bold.
Tipografía y fuentes CSS. Propiedades relacionadas.
PROPIEDAD FONT-STYLE
Est a propiedad es una propiedad sencilla que permit e poner una fuent e en cursiva (it alic) o en oblícuo
(oblique), siempre que la fuent e que est é en uso lo permit a (no t odas las fuent es permit en la cursiva
por ejemplo).
La cursiva y la oblícua son muy similares, de hecho a veces ni se dist inguen. La diferencia ent re ambas
est á en que la cursiva usa caract eres parecidos a los de la fuent e original, pero dist int os, mient ras que
la oblícua ut iliza los mismos caract eres que la fuent e original pero ligerament e inclinados.
El valor por defect o para est a propiedad es ‘normal’ y sus valores posibles ‘normal’, ‘it alic’ y ‘oblique’.
Un ejemplo de aplicación sería est e: p.it alic { font -st yle:it alic }
EJERCICIO
Elige dos navegadores dist int os y rellena la siguient e t abla para cada uno de ellos.
Tipo de título Píxeles em
h1
h2
h3
h4
h5
h6

font-family,, font-variant, shortand
s font.
TIPOGRAFÍA CSS
mos viendo posibilidades

Cont inuam p s que ofrece CSS en relac
ción a los t exxt os. Un aspe
ect o import ant
a e de los
t ext os es el t ipo de let ra que usan
u y cóm o se configura la let ra. Hay dist in t as propied ades para
configurar la t ipografíía, ent re ellas font -familyy, font -varian
nt y la propie
edad short an
nd font .
PROPIEDA
AD FONT-FA
AM ILY
Fuent e (fo e let ra. Así, t amaño de fuent

ont ) suele u sarse como sinónimo de f e signiffica t amaño de let ra y
t ipo de f uent e signiffica t ipo de let ra. Hay t ipos de fue
ent es muy conocidos co
omo Arial, Times
T New
Roman, Calibri…
C pero la realidad es e cient os o miles de t ipo
e que exist en os de let ras.
Las fuentt es disponib

bles en un comput
c adorr se corresp
ponden con archivos do
onde se enc
cuent ra la
informaci ón de dicha fuent e. Porr ejemplo en
n Window s podemos
p usa
ar la fuent e arial porque
e exist e un
archivo d enominado arial.t t f en el
e sist ema. El
E t ipo (form
mat o o ext en
nsión) del ar chivo puede
e variar de
unos sist emas
e a ot ross: ext ensione
es habit ualess son t t f, w offf, svg, et c.
El t ipo de
e let ra que ussa una págin
na w eb ha si do hist óricament e un prroblema deb
bido a que lo
os int ent os
de usar det
d erminado s t ipos de fu
uent es choca ue los navegadores emp leaban fuen t es que el
aban con qu
usuario t uviera
u dispon
nible en su ordenador
o o disposit ivo de
d visualizaciión. Si el dise
eñador o pro
ogramador
creaba la página w eb pensando en
e un t ipo de
e fuent e “ X” y el usuario no disponía de dicha fue
ent e en su
ordenado
or, la página ualizaba t al y como se había prevvist o (y en m
a no se visu muchas ocasiones los
result ado s eran desasst rosos). La propiedad
p fo
ont -family t r at ó de defin ir una vía qu
ue evit ara es
st e t ipo de
problema
as y se ha usa
ado y sigue usando
u much
ho, aunque hoy
h día se co ot ras solucio nes (como
ombina con o
@font -facce, que vere e t rat an de ser la solucción definit ivva al problema de las
emos más adelant e) que
fuent es en los desarro
ollos w eb.
En desarr ollos w eb se
e usan los sig
guient es conccept os:
a) Liist a de prior idad: permitt e definir varrias posibilid

dades respecct o a las fuen
nt es a emple
ear en una
p ágina w eb, de
d modo que
e la fuent e que
q se usará
á es la primera en la list a de priorida
ad siempre
q ue est é disp onible. En ca
aso de no est ar disponib le la primera
a fuent e en l a list a de pr ioridad, se
p asaría a la se
egunda y así sucesivament e. Si no hu
ubiera dispon
nible ningun a fuent e den
nt ro de las
d efinidas en l a list a de pri oridad, se ussaría la fuentt e por defectt o.
b) Fa
amilia t ipográfica o fue
ent e concrett a: alude a una fuent e concret a y t odas sus variant es
(n
negrit a, cursiiva, et c.). Un
na familia t ip
pográfica es por ejemplo “ Times New
w Roman” , o t ra familia
t i pográfica ess “ Times” y ot
o ra familia t ipográfica es
e “ Arial” . Pa
ara escribir u
una familia t ipográfica
n CSS debem
en mos hacerlo
o ent re com illas simples
s o dobles siempre
s que
e el nombre cont enga
esspacios en b lanco.
om, 2006-2029
font-family, font-variant, shortand font.
c) Familia genérica: alude a un grupo de fuent es de caract eríst icas similares y que se dist inguen
sólo por pequeñas variaciones ent re ellas. CSS permit e indicar familias genéricas como
mecanismo de seguridad para poder buscar alguna fuent e dent ro del sist ema del usuario que
t enga caract eríst icas parecidas a las que desea el diseñador o programador. Sirve por t ant o
como “ mecanismo de seguridad” para poder usar una fuent e lo más parecida posible a una
deseada. Hay 5 familias genéricas que se usan en CSS: serif (ejemplo: Times), sans-serif
(ejemplo: Arial), monospace (ejemplo: Courier) , cursive (ejemplo: Zapfino ) y fant asy (ejemplo:
Comic Sans M S).
Normalment e en una list a de prioridad se escriben primero las familias t ipográficas y en últ imo lugar las
familias genéricas. Ejemplo: Arial, Helvet ica, sans-serif; es una list a de prioridad donde los dos primeros
nombres aluden a t ipos de let ra concret os y el últ imo a una familia genérica a usar en caso de no est ar
disponible ninguna de los t ipos concret os indicados.
PROPIEDAD CSS font-family
Permit e indicar el t ipo de fuent e que se debe usar y est ablecer un orden
de prioridad para el caso de no disponibilidad de algunas fuent es.
Valor por defecto No exist e un valor por defect o, depende del navegador
Un t ipo de fuent e concret o
Una familia genérica de fuent es

Una list a de prioridad que puede incluir t ipos de fuent e concret as o familias
esta propiedad
genéricas, separadas por comas.
Ejemplos #cont ent 1 { “ Trebuchet M S” , Helvet ica, sans-serif;}

aprenderaprogramar.com .element oJukeBox { font -family: 'Courier New ', Courier, monospace;}
Aunque se admit e especificar sólo un t ipo de fuent e específico, se recomienda indicar siempre un t ipo
de fuent e genérico para el caso de que no pueda cargarse la fuent e específica deseada.
Cuando se definen prioridades, el hecho de que sea posible aplicar el primer crit erio especificado no
significa que no se vaya a usar el segundo. Por ejemplo, podría exist ir un símbolo no disponible en la
fuent e deseada, y en ese caso se recurre a la segunda posibilidad en la list a de prioridades.
Para crear diseños con t ipos de let ra que no sean los más comunes habremos de recurrir a una regla
especial CSS, @font -face, que est udiaremos más adelant e.
PROPIEDAD FONT-VARIANT
Est a propiedad es una propiedad sencilla que permit e poner una fuent e en un modo especial
denominado de “ pequeñas mayúsculas” , “ versales” o “ small-caps” . Si usamos t ext -t ransform:
uppercase; el t ext o se pondrá en mayúsculas normales. Si usamos font -variant : small-caps; el t ext o se
pondrá en una mayúscula condensada, de un t amaño inferior a la mayúscula normal correspondient e a
esa let ra.
El valor por defect o para est a propiedad es ‘normal’ y el único valor alt ernat ivo que admit e es ‘small-
caps’. Por ejemplo: p { font -variant :small-caps;}
PROPIEDAD SHORTAND FONT
Al igual que con ot ras propiedades, CSS permit e el uso de una propiedad short and denominada font
donde se pueden declarar abreviadament e dist int as propiedades relacionadas con las fuent es.
Recordar que hay que t ener una precaución con las propiedades short and: un valor no declarado en la
propiedad será sobreescrit o a su valor por defect o. Si no t enemos est o en cuent a, podemos est ar
sobreescribiendo una propiedad sin darnos cuent a.
La sint axis a emplear es la siguient e:
select orElement o {Valor-font -st yleOpcional Valor-font -variant Opcional Valor-font -w eight Opcional
ValorFont -sizeObligat orio/ ValorLine-height Opcional valoresList aPrioridad-font -family }
Ejemplo Significado
p { font: 12px/ 2em sans-serif } El t amaño de let ra se est ablece en 12 pixeles, el

int erlineado se est ablece en 2em y el t ipo de let ra
es la familia genérica sans-serif. El rest o de
propiedades implicadas quedan est ablecidas a sus
valores por defect o.
Ejemplo Significado
#content1 { font: bold 1.3em "Trebuchet font -st yle será negrit a (bold), el t amaño de let ra
M S",Arial,Sans-Serif; } 1.3em y se usará priorit ariament e la fuent e
Trebuchet M S. Si no est uviera disponible se usaría
Arial. Si no est uviera disponible se usuaría
cualquier fuent e de t ipo Sans-Serif. El rest o de
propiedades implicadas quedan est ablecidas a sus
valores por defect o.
EJERCICIO
a) Deben exisit ir t res cont enedores (div1, div2 y div3) sit uados uno debajo de ot ro, cada uno con margin
33px en t odas direcciones, con relleno 25 px en t odas direcciones, ancho 100% del disponible, y borde
sólido de 5 píxeles de anchura con color de borde rojo.
b) El div 1 debe cont ener un t ext o suficient ement e largo (varios párrafos), t ipo de fuent e genérica serif,
t amaño de fuent e 18 píxeles y al menos un párrafo de varias líneas con la fuent e est ablecida como
mayúscula condensada (small caps).
c) El div 2 debe cont ener un t ext o suficient ement e largo (varios párrafos), t ipo de fuent e genérica sans
serif, t amaño de fuent e 14 píxeles y color del t ext o #B22222.
d) El div 3 debe cont ener un t ext o suficient ement e largo (varios párrafos), y las propiedades de t ext o
est ablecidas con la propiedad CSS font (short and). El t ipo de fuent e será genérica fant asy y el t amaño
del t ext o 2 veces lo normal .

@font-face CSS. Especifica
ar nombre y rutta de fuente.
@FONT-F
FACE CSS
Hemos co
oment ado las dificult ade
es que hist órricament e ha
an exist ido en
e relación a
al uso de t ipo
os de let ra
en página
as w eb. Est o se debía pr incipalment e a que los navegadores
n s se venían b
basando en un
u archivo
de fuent e inst alada en el propio ordenador
o d usuario y no se podía
del a garant izar que el usuario t uviera
disponible
e la fuent e q ue especificaba el progr amador o dis
señador.
REGLA @ FONT-FACE
erar la limit ación de t ene

Para supe er que depender de las fuent
f ponibles por part e de cad
es disp da usuario
se creó la
a regla @fon t -face que permit
p e espe
ecificar un no ocalización (url) de un archivo con
ombre y la lo
la fuent e que se desea usar en un
na página w eb.
e De est a manera,
m cam bia el concep
pt o t radicion
nal, ya que
nt -face podre
con @fon emos usar fu
uent es que h emos definid
do y localizad
do nosot ros mismos, sin depender
de las fue
ent es de que
e disponga el
e usuario. Te
en en cuent a que @fontt -face est á d
disponible en
n t odos los
navegado
ores modern os, pero que
e versiones ant
a iguas de navegadoress no admit en el uso de est
e a regla,
de ahí qu e siempre de ecificar una familia t ipog
ebamos espe gráfica genérrica como altt ernat iva de seguridad
para el caso de que un
na fuent e especificada n o pueda carg
garse.
Una fuen t e es un arcchivo inform a informació n necesaria para que u n sist ema o perat ivo o
mát ico con la
programa o de let ra d et erminado . Por ejemp lo, en Wind
a puede mosst rar un t ipo dow s se disp
pone de la
fuent e “ Arial”
A ma de archi vos exist e u n archivo de
graciass a que dentt ro del sist em enominado arial.t
a t f. Si
borramoss ese archivo
o, la fuent e deja de estt ar disponib
ble. El t ipo (format o o e
ext ensión) del
d archivo
puede varriar de unos sist emas a ot
o ros: ext enssiones habit uales
u son t t f, ot f, w off, svvg, et c.
La ext ensión w off (W

Web Open Fo nt Format ) ha
h sido creada específica
ament e com
mo t ipo de fu
uent e para
os web y asp
desarrollo pira a conver t irse en un est
e ándar. Sin
n embargo, la
a realidad ess que no exis
st e t odavía
un formatt o de archivo
o est ándar q ue se haya im
mpuest o parra t odos los navegadores
n s.
El uso bássico de la re ace conlleva definir dos parámet ros: por un lad o, el “ alias” o nombre
egla @font -fa
e vamos a d esignar a la fuent e cuan do la empleemos en nu est ras reglass CSS. Por ott ro lado, la
con el que
rut a dond
de se localiza
a el archivo que
q cont iene
e la fuent e.
La sint axiss básica a em

mplear es de est e t ipo:
@
@font -face { font -family: " nombreDeFuent e" ; srrc: url(nomb reDeArchivo
o.ext ension); }
Con est a regla definiimos un nom

mbre de fue
ent e p.ej. “ burlesque”
b e indicamos una rut a del
d archivo
donde est á disponibl e esa fuent e p.ej. burle
esque.w off. En
E est e caso
o hemos ind
dicado simpl ement e el
om, 2006-2029
@font-face CSS. Especificar nombre y ruta de fuente.
nombre del archivo, por lo que la rut a debe ser la misma donde se ubique el archivo css de est ilos.
Ahora est e nombre de fuent e puede ut ilizarse como se haría normalment e con los nombres de fuent e
en la propiedad font -family, por ejemplo h1 {font -family: burlesque, sans-serif; }
También es posible definir rut as de archivos alojados ext ernament e indicando su url. Por ejemplo:
@font -face { font -family: " Bit st ream Vera Serif Bold" ;
src: url(ht t ps:/ / mdn.mozillademos.org/ files/ 2468/ VeraSeBd.t t f); }
Y est e nombre de fuent e se podría aplicar por ejemplo en body { font -family: " Bit st ream Vera Serif
Bold" , serif }
Tener en cuent a que siempre es recomendable dar al menos una familia genérica para indicar el t ipo de
fuent e que se debería usar en el caso de que no se pueda cargar la fuent e deseada.
Debido a que la regla @font -face se ha ido int roduciendo en los últ imos años y los diferent es
navegadores han ido admit iendo format os de fuent es dist int os poco a poco, un “ t ruco” al que recurren
muchos diseñadores y programadores para garant izar que la mayor part e de navegadores usen la
fuent e deseada es especificar las rut as de los archivos fuent e en dist int os format os, de modo que se
usará el primero en ser reconocido por el navegador. Por ejemplo:
@font -face { font -family: Sansat ;
src: url('Sansat ion_Light .w off'), url('Sansat ion_Light .t t f'), url('Sansat ion_Light .eot ') ; }
La regla @font -face permit e que se especifique si se debe buscar la fuent e primero en el ordenador del
usuario y usarla en caso de est ar disponible, ant es que usar una fuent e especificada mediant e un
archivo. Para ello se especifica el origen como local(“ nombreDeFuent eEnSist emaUsuario” ). Est o es lo
que se hace en est e ejemplo:
@font -face { font -family: Sansat ; src: local(“ Sansat ion Light ” ),
url('Sansat ion_Light .w off'), url('Sansat ion_Light .t t f'), url('Sansat ion_Light .eot ') ; }
Se podrían especificar varios nombres de fuent es locales separados por comas si se desea.
LAS M EJORES FUENTES W EB GRATUITAS
Exist en diferent es páginas w eb donde se ofrecen archivos de fuent es grat uit os. Es difícil decir cuál es la
página que ofrece las mejores fuent es, ent re ot ras cosas porque en est as páginas hay cambios
cont ínuos y se van incorporando nuevas fuent es y nuevos format os cont inuament e. A cont inuación
damos una relación de sit ios que permit en el uso de fuent es grat uit as, sin recomendar ninguno en
concret o. Pruébalos y usa el que más t e gust e.
Nombre URL Comentarios
Colección de fuent es no sólo para desarrollos

Font Squirrel ht t p:/ / w w w .font squirrel.com/
web. Archivos de descarga disponibles en
det erminados format os.
Da Font ht t p:/ / w w w .dafont .com/ Colección de fuent es con clasificación por

t emát icas.
Servicio de google que ofrece fuent es grat uit as.

Google fonts ht t p:/ / w w w .google.com/ font s Google ofrece una url que permit e enlazar al
archivo de fuent e alojado en sus servidores, o
t ambién la descarga de la fuent e.
CONVERTIDORES DE FUENTES ONLINE
M uchas veces las fuent es que t enemos disponibles para descarga est án en un solo format o como t t f y
para asegurarnos de que se visualicen bien deseamos disponer de ellas en varios format os. Los
format os más usados son: WOFF, EOT, TTF, OTF y SVG.
En principio usando TTF y EOT nos garant izamos que nuest ra fuent e sea reconocida por la mayoría de
los navegadores, aunque si buscamos el máximo de seguridad convendría incluir los cinco format os.
Exist en dist int os convert idores on-line, ent re los cuales el de Font Squirrel es quizás el más usado y el
que mejores crít icas recibe.
Nombre URL Comentarios
Permit e subir un archivo en un format o

Font Squirrel ht t p:/ / w w w .font squirrel.com/ t ools/ w ebfont -
y descargar un archivo zip con la fuent e
converter generat or
en diferent es format os incluyendo w off,
eot , t t f y svg.
Online Font
ht t p:/ / onlinefont convert er.com/ Admit e la conversión ent re dist int os
Converter
format os.
ht t p:/ / w w w .files-conversion.com/ font -

Files conversion Admit e la conversión ent re dist int os
convert er.php
format os.
Font converter ht t p:/ / w w w .font convert er.org/ Admit e la conversión ent re dist int os
format os.
Ten en cuent a que al realizar la conversión la fuent e convert ida será muy similar a la original, pero
quizás no exact ament e igual (pueden aparecer pequeñas diferencias en el espacio ent re let ras por
ejemplo). Recomendación: no t rat es de cuadrar una página w eb “ al milímet ro” . Considera siempre que
puede ocurrir que la fuent e que se cargue no sea exact ament e la que t ú habías previst o.
PROBLEM AS CON @FONT-FACE
La regla @font -face se ha int roducido en los últ imos años y su est andarización t odavía no es suficient e,
aunque su uso es cada vez más amplio. Te podrás encont rar con sit uaciones como que:
a) Un det erminado navegador no reconozca la regla @font -face, con lo cual recurrirá a la fuent e
est ándar que hayas definido, o si no la has definido, a la fuent e por defect o.
b) Un det erminado navegador no reconozca el format o de la fuent e que hayas indicado.
c) Un det erminado navegador no responda bien a la sint axis que hemos descrit o y sea necesario
aplicar “ un parche” o código específico para ese navegador.
d) Algunas reglas CSS no se aplican bien con un det erminado format o de fuent e. Por ejemplo,
quizás t e encuent res que al aplicar t ext -t ransform: uppercase; con algunas fuent es no t e
funcione.
Para muchos de los problemas que genera font -face exist en soluciones específicas o parches de los que
no vamos a hablar porque supondría ent rar en det alles muy concret os y no es ese nuest ro objet ivo.
Recuerda que el objet ivo de est e curso es conocer la lógica de CSS y sus aspect os más import ant es, sin
ent rar en det alles relat ivos a navegadores concret os.
Algunos programadores o diseñadores t rabajan con fórmulas alt ernat ivas a font -face (normalment e
script s escrit os en algún lenguaje de programación) buscando evit ar los problemas que les surgen.
EJERCICIO EJEM PLO RESUELTO DE USO DE @FONT-FACE
Usando el código HTM L de base que venimos empleando a lo largo del curso, y usando la regla @font -
face, definir t res t ipos de let ra dist int os (obt enidos desde alguna de las fuent es w eb grat uit as que
hemos indicado) para las et iquet as h1, h2 y p. Para comprobar si t u código y respuest as son correct as
puedes consult ar en los foros aprenderaprogramar.com.
SOLUCIÓN
Nosot ros vamos a usar las siguient es fuent es:
Tít ulos h1: fuent e “ Bubblegum Sans” . Nos hemos descargado la fuent e en format o ot f (BubblegumSans-
Regular.ot f) desde font squirrel.com
Tít ulos h2: fuent e “ Just Got t a Smile” . Nos hemos descargado la fuent e en format o t t f (Just Got t a
Smile.t t f) desde dafont .com.
Párrafos p: fuent e “ Alef” . Nos hemos descargado la fuent e en format o t t f (Alef-Regular.t t f) desde
google.com/ font s
Si quieres usar ot ras fuent es no hay problema.
Junt o al archivo css de definición de est ilos debemos colocar los archivos de las fuent es (los t res
archivos que hemos cit ado, en nuest ro caso de ext ensión ot f, t t f y t t f). El código básico que resuelve el
ejercicio y el result ado a obt ener sería el siguient e (escribe el código y visualiza el result ado; si no
obt ienes el result ado previst o sigue leyendo):

* {font -family: arial; background-color:yellow ;}
@font -face { font -family: " bubblegum" ; src: url('BubblegumSans-Regular.ot f'); }
@font -face { font -family: " Just Got t a Smile" ; src: url('Just Got t a Smile.t t f'); }
@font -face { font -family: " Alef-Regular" ; src: url('Alef-Regular.t t f'); }
h1 {font -family: " bubblegum" , arial; font -size: 42px; }
h2 {font -family: " Just Got t a Smile" , arial; font -size: 30px; }
p {font -family: " Alef-Regular" , arial; }
p a {font -family: " Alef-Regular" , arial;}
Not a: hemos puest o un fondo amarillo y let ra arial para los element os sin let ra definida; además hemos
dot ado de un t amaño de let ra adecuado a los element os h1 y h2. También hemos definido el t ipo de
let ra específicament e para los element os a (links) dent ro de párrafos porque ést os no heredan el t ipo
de let ra definido.
¿Qué problema más común nos podemos encont rar con est e código? Que algunos navegadores no
reconozcan el format o de la fuent e. Para t ener mayor seguridad en cuant o a que los navegadores
apliquen la fuent e deseada vamos a generar las fuent es en los format os más comunes.
En nuest ro caso accederemos a un servicio w eb grat uit o para convert ir fuent es, en concret o vamos a
usar ht t p:/ / w w w .font squirrel.com/ t ools/ w ebfont -generat or y subimos los ficheros fuent e que t enemos
(BubblegumSans-Regular.ot f, Just Got t a Smile.t t f y Alef-Regular.t t f) y nos descargamos el archivo zip
con las fuent es convert idas a dist int os format os.
Ahora para cada fuent e t endremos cuat ro archivos, cada uno de los cuales corresponde a una
ext ensión. Por ejemplo para BubblegumSans-Regular ahora t endremos cuat ro archivos como
bubblegumsans-regular-w ebfont .w off, bubblegumsans-regular-w ebfont .t t f, bubblegumsans-regular-
w ebfont .eot , bubblegumsans-regular-w ebfont .svg. Para las ot ras fuent es lo mismo, con lo cual en t ot al
t endremos 12 archivos.
Ahora escribimos el código indicando que en caso de no reconocerse un format o, se ut ilice el siguient e
disponible. Ten en cuent a que debes colocar los 12 archivos con las fuent es en la misma ubicación en la
que t engas el archivo css de est ilos. El código quedaría así:
* {font -family: arial; background-color:yellow ;}
@font -face { font -family: " bubblegum" ; src: url('bubblegumsans-regular-w ebfont.w off'),
url('bubblegumsans-regular-w ebfont .t t f'), url('bubblegumsans-regular-w ebfont .eot '), url('bubblegumsans-regular-
w ebfont .svg'); }
@font -face { font -family: " Just Got t a Smile" ; src: url('just _got t a_smile-w ebfont .w off'),
url('just _got t a_smile-w ebfont .t t f'), url('just _got t a_smile-w ebfont .eot '), url('just _got t a_smile-w ebfont .svg'); }
@font -face { font -family: " Alef-Regular" ; src: url('alef-regular-webfont .woff'),

url('alef-regular-webfont .t t f'), url('alef-regular-webfont .eot '), url('alef-regular-webfont .svg'); }
h1 {font -family: " bubblegum" , arial; font -size: 42px; }
h2 {font -family: " Just Got t a Smile" , arial; font -size: 30px; }
p {font -family: " Alef-Regular" , arial; }
p a {font -family: " Alef-Regular" , arial;}
Con est e código t enemos mayores garant ías de que la visualización será correct a en la mayor part e de
los navegadores. Pero la garant ía no es del 100%, de ahí que siempre sea convenient e especificar qué
fuent e debe most rarse en caso de no poder cargar la deseada. En nuest ro caso hemos indicado “ arial” .

Pseudoclase
es CSS. Links. liink, visited, hov
ver, active.
PSEUDOC
CLASES PARA
A LINKS
Cuando hablamos
h de
e select oress nombramo
os las pseud
doclases CSS
S y dijimos que las pse
eudoclases
permit en ident ificar ciert
c os elem ent os o sit uaciones
u nt ro de una página w eb para aplicar un est ilo
den
o a dichos ellement os o sit
específico s uaciones. Por ejemplo
o, la pseudo clase :first -child permit e definir el
est ilo a ap
plicar al prim
mer element o de una seriie.
CSS defin e ot ra serie nados pseud oelement os que van prrecedidos de

e de select orres denomin e :: y cuya
función es
e análoga a la de las pseudoclases
p s. También hemos
h habla
ado de elloss ant eriorme
ent e en el
or ejemplo ::first -let t er nos permit e definir un est ilo para la primera let ra del t ext o de un
curso, po
element o.
o
Vamos a hablar ahora

a de cómo dot
d ar de est ilos a los lin
nks en CSS. Para
P ello es necesario re
eferirnos a
algunas p seudoclases que son las que permit en
e hacer est o.
o
Pseudocla
ase Aplic
cable a Signifficado
:link
k Los l inks Se usa para defin
nir est ilos pa
ara links qu e no han
sido pinchados
p po
or el usuario,, aunque si no
n est á en
el orrden adecua
ado puede sobreescrib
bir ot ros
est ilos
s de links
:visite
ed Sólo links que ya han sido
s Se usa
a para defin
nir est ilos para links que han sido
pinch
hados por el usuario ados por el usuario y assí dist inguirl os de los
pincha
no pin
nchados
:focus Cual quier element o que t ien

ne el sa para defiinir est ilos para element os que
Se us
foco por est ar se
eleccionado con n el foco. Un link puede t ener el foco
t ienen o.
el ratt ón o por uso del t abulad
dor
:hove
er Cual quier element o que t ien
ne el Se u sa para definir
d est ilo
os específic
cos para
puntt ero del rat ó n encima de
e él eleme
ent os por loss que el usua
ario pasa el rat ón por
ma, aún sin piinchar en ell os
encim
:active Cual quier elem

ment o en el Se usar para defiinir est ilos e
específicos para
p links
ment o de serr act ivado
mom <a> o bot ones <b
but t on> en e
el just o mom
ment o en
que so
on pulsados..

e la que ya conocemos: t ipoElemen t o:nombrePseudoclase { … }
om, 2006-2029
Pseudoclases CSS. Links. link, visited, hover, active.
A la hora de aplicar est as pseudoclases es import ant e el orden en que se aplican, ya que si no se hace
correct ament e se pueden anular est ilos definidos. Por ejemplo:
a:hover {color: orange;}
a:link {t ext -decorat ion:none; font -weight : bold; color:blue;}
Podríamos pensar que los links sobre los que se sit uara el rat ón se most rarían naranjas, pero no va a ser
así. Se most rarán azules porque a:link sobreescribe lo definido en a:hover porque :link afect a a t odos
los links (incluso los que t ienen el rat ón encima de ellos) mient ras que :hover sólo afect a a
det erminados links. Por ello si sit uamos :link después de :hover est aremos anulando lo definido en
:hover.
Para evit ar est o se usa una regla mnemot écnica: LVHA (link-visit ed, hover, act ive; es convenient e
recordar y aplicar est e orden para evit ar sobreescribir indebidament e. Podemos usar una frase como
“ Llegamos vivos hast a amanecer” o “ Luego vuelvo hast a allí para acordarnos de est e orden.
La pseudoclase :focus se suele colocar just o ant es de :hover.
Veremos ejemplos de uso de est as propiedades a cont inuación.
PROPIEDAD OUTLINE CSS
La propiedad out line CSS es una propiedad short and análoga a la propiedad border. De hecho, lo que
hace es crear un cont orno similar a un borde, con la diferencia de que no ocupa espacio. Su uso suele
ser para marcar los cont ornos de un element o (muchas veces lo usan los diseñadores y programadores
para ver las cajas del modelo de cajas mient ras est án realizando el diseño).
Al igual que con los bordes exist en propiedades individuales que son: out line-st yle, out line-widht y
out line-color, pero en general será preferible usar la propiedad short and.
Dado que est a propiedad es complet ament e análoga a la propiedad border, t e remit imos a leer el
apart ado de bordes si quieres profundizar en su manejo. En el código del ejemplo que vemos a
cont inuación puedes ver un ejemplo de aplicación de est a propiedad.
EJEM PLO DE APLICACIÓN
Usando el código HTM L de base que venimos empleando a lo largo del curso, escribe un archivo de
est ilos css con est e código:

* {font -family: sans-serif; }
a:link {t ext -decorat ion:none; font -weight : bold; color:blue; }
a:visit ed {color: #6D006D;}
a:focus {out line: dashed t hin red;}
a:hover {color: orange;}
a:act ive {font -st yle: it alic;}
li {margin:5px;}
li a:link{border-bot t om:solid #B22222 2px; font -weight : bold; color:#B22222;}
Pseudoclase
ver, active.
En la imag
gen ant eriorr vemos el re
esult ado de aplicar
a el có digo css indiicado. En naranja el aspe
ect o de un
link sobre
e el que t uvié
éramos sit ua
ado el rat ón encima. Aba
ajo en azul, la
a línea punt e
eada roja ind
dica que el
link t iene
e el foco. El color azul con
c fuent e en
e negrit a es el que hem
mos definid o para t odo
os los links
except o lo
os que est én
n dent ro de element
e os li, que se mue
est ran en la part
p e superio
or de ot ro co
olor.
Hemos el iminado el subrayado

s p or defect o de
d los links y a cambio hemos
h usado
o la propieda
ad border-
bot t om. Est
E o es una práct
p ica que usan mucho
os diseñadorres porque le
es permit e u n mayor con
nt rol sobre
los links (evit a que queden
q cort adas
a las parrt es inferior es de las let ras, permitt e est ablecer grosores
personalizzados, et c.).
Not a: en algunos
a nave
egadores pu ede haber comport amie
ent os ext raño
os o part icullares. Por eje
emplo que
los links visit
v ados defiinidos con a::visit ed no re
espondan y no
n muest ren
n los est ilos d
definidos a t ravés
r de la
regla css correspondie
c ent e. Est o ha
a sido int rod
ducido como
o opción de seguridad
s en
n algunos navegadores
para evit ar que se pueda
p rast re
ear lo que ha
h hecho el usuario y qué links ha
a visit ado durant
d e su
ón. Podemo
navegació os modificarr las opcion
nes de seg
guridad en nuest ro navegador (en
n algunos
navegado
ores est o se hace acced
diendo a Op
pciones, Priv
vacidad y eli giendo “ Reccordar mi h ist orial de
descargass y navegació
ón” ), pero esst o sólo afectt ará a nuest ro
r navegado r.
Consejo: acost
a úmbratt e a acept ar que los nave
egadores t en
ngan dist int os
o comport am
mient os. Es algo
a con lo
que t end
drás que con
nvivir. En algunos caso
os se podrán
n aplicar so
oluciones esspecíficas o “ parches”
os para cada navegador y en ot ros casos simplem
específico ment e habrá que acept ar lo así.
EJERCICIO
O RESUELTO
Usando el
e código HT
TM L de base
e que venim
mos emplean
ndo a lo larg
go del curso
o, se desea realizar lo
siguient e::
Para los liinks dent ro de

d element os
o li: est ableccer su color como #B222
222. Est os lin
nks deben ap
parecer sin
subrayado
o y en negritt a.Poner la siguient e ima
agen (que m ide 38x38 pxx) a la izquierda de los lin
nks dent ro
de list as:
om, 2006-2029
Pseudoclase
ver, active.
Para los l inks dent ro de párrafos:: est ablecer su color com

mo azul, form
mat o negrit a
a, sin subrayado. Color
ndo han sido
para cuan o visit ados: #6D006D. Color
C al pasa
ar el rat ón encima
e de elllos: naranja
a. Poner la
siguient e imagen (que
e mide 38x38
8 px) a la derrecha de los links dent ro de párrafos:
ment e: cuan
Adicionalm r ón encim a de un elem
ndo el usuariio ponga el rat ment o que llleva el icono
o rosado la
imagen d e fondo deb
berá cambiarr y pasar a ser
s la imagen
n con el icon
no azul. Del mismo mod
do, cuando
ponga el rat ón encim
ma de un ele
ement o que lleva el icon
no azul la im ndo deberá cambiar y
magen de fon
pasar a se
er la imagen con el icono
o rosado. Es decir,
d el colo
or del icono debe
d cambia
ar al pasar ell rat ón por
encima de
el link genera
ando un “ efe
ect o de camb
bio” .
Not a: elim et as de las lisst as usando est a propied

minar las viñe dad: li {list -stt yle-t ype: no
one;}
SOLUCIÓN
N
Aquí t e pl ant eamos u na posible so

olución (en t u caso t endrrás que pone
er las rut as d
de imágenes que hayas
ut ilizado). Ten en cue
ent a que se puede
p llegarr a un result ado
a de dist in
nt as manera
as, por t ant o t u código
podría se
er dist int o a est e código
o. Para com
mprobar si t u código y respuest as son correct as
a puedes
consult ar en los foros aprenderap
programar.co
om.
/ * Curso CSS
ar.com* /
* {font -fam
mily: sans-serif; }
li {list -st yle

e-t ype: none; }
a:link {t extt -decorat ion:no

one; font -weigh
ht : bold; color:b
blue;
backgroun
nd: url('CU0104
47D_2.png') no--repeat right ;
padding-riight :38px; displ ay:inline-block; line-height :2.5
5em;}
a:visit ed {ccolor: #6D006D
D;}
a:focus {ou
ut line: dashed t hin red;}
a:hover {color: orange; b ackground: url(('CU01047D_3.png') no-repeat right ;}
a:act ive {fo
ont -st yle: it alic;;}
li {margin: 5px;}
li a:link{t exxt -decorat ion:n
none; font -weig
ght : bold; color :#B22222;
backgroun
nd: url('CU0104
47D_3.png') no--repeat left ;
padding-le
eft :46px; line-he
eight :2.5em; diisplay:inline-blo
ock; }
li a:hover{background: urrl('CU01047D_2
2.png') no-repe
eat left ;}
En est e código
c hemo
os int roducid
do el icono como image
en de fondo y hemos crreado t amañ
ño para él
int roducie
endo un pa
adding lat erral (right o left según nos int eresse). A su vvez hemos hecho las
modificacciones necessarias (márge
enes, displayy, line-heigh
ht ) para consseguir una b
buena visual ización. El
result ado que debes obt
o ener debe
e ser similar a el que mo st ramos a co
ont inuación.
Cuando el usuario sit úe

ú el rat ón encima de un
n link, el icon o correspon dient e debe cambiar de color.
om, 2006-2029
Pseudoclases CSS. Links. link, visited, hover, active.

Estilos para
a listas CSS list-s
style. type, pos
sition, image.
APLICAR ESTILOS
E A LI STAS
Al t rabaja
ar con docum
ment os HTM L es habit ual el uso de liist as para realizar enume
eraciones. La
as list as se
clasifican en dos gran des t ipos. Po
or un lado las list as deso rdenadas o ul
u (unordere
ed list s) en lo
os cuales el
orden no se considera
a import ant e.
e Por ot ro la
ado las list as ordenadas, et iquet a <ol > (ordered liist s).
Una list a desordenad a podría ser por ejemplo

o de “ person
nas asist ent es
e a la conferencia” , don
nde no hay
un prime
er asist ent e y un segun
ndo asist ent e, sino simp
plement e assist ent es. Esst as list as es habit ual
representt arlas usand o viñet as (e
element o gr áfico que p uede ser un
n pequeño ccírculo u ot ro
r t ipo de
element o como un cu
uadrado, una
a est rella, et c.).
c Ejemplo:
• Ju
uan
• Pe
edro
• Issmael
Una list a ordenada po

odría ser po r ejemplo “ Punt
P uación obt
o enida por los alumnoss en el exame
en” donde
el alumno
o con mayo
or punt uació ment o 1º d e la list a, el
ón es el elem e siguient e el element o 2º , y así
sucesivam
ment e. Est as list as es hab
bit ual represe
ent arlas usan
ndo número
os. Ejemplo:
1. Ju
uan
2. Pe
edro
3. Issmael
Los naveg
gadores suelen int roduccir márgeness o paddings por defectt o a las list a
as. En caso de querer
eliminar est
e os valoress de defect o deberemos est ablecer u na regla de est
e e t ipo:
ul { mar gin: 0; pad ding: 0; }
Sin embarrgo est o pue

ede hacer qu e los elemen n demasiado al borde izq uierdo del
nt os de la listt a se peguen
cont ened or. Para haccer que se alineen
a aproxximadamentt e con los p árrafos t al y como los muest
m ra el
navegado
or se puede usar
u una reglla del t ipo ul li { margin-left : 1em; }
PROPIEDA
AD LIST-STYL
LE-TYPE
PROPIED
DAD CSS list-s
style-type
Perm
mit e est ablece
er el t ipo de símbolo
s a mosst rar precedie
endo a los elem
ment os de
edad
una list a.
discc (muchos navvegadores usa

an disc para liist as desorden
nadas ul y decimal para
Valor po
or defecto
list as
a ordenadas ol)
o
Elem
ment os li de una list a des
sordenada u ordenada
o o e
element os a los
l que se
Aplicable a
haya
a aplicado la propiedad
p display: list -it em
m;
om, 2006-2029
Estilos para listas CSS list-style. type, position, image.
PROPIEDAD CSS list-style-type
disc (se most rará un círculo relleno, opción por defect o), circle (se most rará un
círculo no relleno) ó square (most rará un cuadradit o relleno).
none : no se most rará ningún símbolo
decimal (números empezando en 1), decimal-leading-zero (números de dos

dígit os desde 01 hast a 99)
low er-roman (números romanos en minúsculas, i, ii, iii, iv…) ó upper-roman

Valores posibles para (números romanos en mayúsculas)
esta propiedad
low er-alpha (let ras minúsculas empezando por la a) ó upper-alpha (let ras
mayúsculas empezando por la A). M ismo efect o con low er-latin y upper-latin.
Ot ros valores menos usados: low er-greek (let ras griegas), armenian
(numeración armenia), georgian (numeración georgiana), et c.
Algunos navegadores incluyen soport e para numeraciones en ot ros idiomas
Ejemplos ul li {list -st yle-t ype: square;}

aprenderaprogramar.com li {list -st yle-t ype: upper-lat in;}
El color de la viñet a será el mismo que sea aplicable a la list a.
M uchas veces se crean menús de navegación que se basan en list as. En est e caso normalment e se
prescinde de las viñet as o numeraciones para lo cual se est ablece est a propiedad con el valor none.
PROPIEDAD LIST-STYLE-POSITION
PROPIEDAD CSS list-style-position
Función de la propiedad Permit e cont rolar la posición de las viñet as.
Valor por defecto out side
Element os li de una list a desordenada u ordenada o element os a los que

Aplicable a
se haya aplicado la propiedad display: list -it em;
out side (la viñet a o numeración aparecerá a la izquierda fuera del bloque de
t ext o que queda a la derecha de la viñet a)
inside (la viñet a o numeración aparecerá como si fuera part e del t ext o al
esta propiedad
comienzo de la primera línea)
Ejemplos .myList li {list -st yle-posit ion: inside;}

aprenderaprogramar.com .sandList li {list -st yle-posit ion: out side;}
Si hay poco t ext o puede que no se aprecie la diferencia en est a propiedad. Sólo cuando t enemos varias
líneas se puede comprobar el dist int o efect o que se genera. Ejemplo:
• En est e ejemplo t enemos la viñet a out side, la viñet a est á a la izquierda y el bloque de t ext o a la
derecha. En est e ejemplo t enemos la viñet a out side, la viñet a est á a la izquierda y el bloque de
t ext o a la derecha.
• En est e ejemplo t enemos la viñet a inside, la viñet a est á a la izquierda y el bloque de t ext o se
alinea con la viñet a como si ést a fuera t ext o. En est e ejemplo t enemos la viñet a inside, la viñet a
est á a la izquierda y el bloque de t ext o se alinea con la viñet a como si ést a fuera t ext o.
PROPIEDAD LIST-STYLE-IM AGE
PROPIEDAD CSS list-style-image
Permit e definir una imagen específica para ser usada en lugar de un

símbolo t ipo viñet a de ent re los predefinidos para list as.
Element os li de una list a desordenada u ordenada o element os a los que

Aplicable a
se haya aplicado la propiedad display: list -it em;
none (no se aplica una imagen a modo de viñet a)

url (rut aDeLaImagenDeseada)
esta propiedad
Ejemplos .myList li {list -st yle-image: url(CU01048D_1.png);}

aprenderaprogramar.com .sandList li { list -st yle-image: url(CU01048D_1.png);}
Est a propiedad da poco juego a la hora de crear efect os adicionales, modificar t amaños, posiciones, et c.
por lo que muchos programadores y diseñadores prefieren colocar una imagen a modo de viñet a
usando una imagen de fondo y anulando la viñet a propiament e dicha en lugar de usando est a
propiedad.
PROPIEDAD SHORTAND LIST-STYLE
Al igual que con muchas ot ras propiedades, CSS permit e definir una propiedad short and o abreviada
para aplicar est ilos a list as. La sint axis básica a emplear es de est e t ipo:
select orElement o {Valor-list -st yle-t ype valor-list -st yle-posit ion valor-list -st yle-image }
Las propiedades se pueden indicar en cualquier orden. Ejemplos:
ul li {list -st yle: square inside; }
ul li {list -st yle: square out side url(ht t p:/ / i.imgur.com/ afC0L.jpg) ; }
¿Para qué definir un t ipo de viñet a si definimos una imagen? Al definir una imagen, est a será la que se
muest re siempre que sea posible cargarla. Si no es posible cargarla, se most rará el t ipo de viñet a que
hayamos especificado (o si no hemos especificado ninguna, la viñet a que aplique el navegador por
defect o).
EJERCICIO
Crea una list a ul con 27 element os li (puedes part ir del menú que t enemos en el código HTM L de base
que venimos empleando a lo largo del curso si lo deseas). Sobre dicha list a aplica los siguient es est ilos a
los element os de la list a: los t res primeros element os t ipo disc y out side sin usar la propiedad short and,
los t res siguient es t ipo circle e inside sin usar la propiedad short and, los t res siguient es t ipo square e
inside, los t res siguient es none, los t res siguient es decimal y out side, los t res siguient es decimal-leading-
zero y out side, los t res siguient es low er-roman e inside, los t res siguient es upper-alpha e inside, y los
t res últ imos con una imagen mediant e list -st yle-image. Para comprobar si t u código y respuest as son
correct as puedes consult ar en los foros aprenderaprogramar.com.

M enús vertticales y menús
s horizontales CSS.
C
M ENÚ VE
ERTICAL Y M ENÚ HORIZO
ONTAL CSS
A part ir de
d list as de
e t ipo ul es habit ual cr ear menús de navegación en págiinas w eb do
onde cada
element o del menú se
e correspond
de con un el ement o de l a list a. Para ello hemos de crear reglas css por
ara eliminar los est ilos p or defect o d e la list a y po
un lado pa or ot ro para generar la a
apariencia de
e menú.
Para ver un
u ejemplo de
d aplicación
n usaremos el
e código HTM
M L de base que
q venimoss empleando
o a lo largo
del curso,, y en concre
et o el fragme
ent o siguientt e:
<! -- menu -->

<div>
<div>M en ú</ div>
<hr/ >
<ul>
<li><a hreff=" #" >Inicio</ a></
a li>
<li> <a hre
ef=" libros.ht ml"" >Libros de pro gramación</ a>
> </ li>
<li> <a hre
ef=" cursos.ht mll" >Cursos de prrogramación</ a>
a </ li>
<li> <a hre
ef=" humor.ht m l" >Humor inforrmát ico</ a> </ li>
</ ul>
</ div>

Dot aremo
os de definición de clase al menú así:: <ul class=" menuVert
m 1" >
Y crearem
mos los est ilo
os necesario s para visualizar la list a como un me
enú vert ical.. Escribe est e código y
comprueb
ba los result ados:
a
/ * Curso CSS
ar.com* /
* {font -fam
mily: sans-serif; }
hr{display:none;}
ul.menuVe
ert 1 {w idt h: 220
0px; list -st yle: none;
n
t ext -align : cent er; t ext -sh
hadow : 2px 2pxx 4px red; padd
ding:0;}
ul.menuVe
ert 1 li {padding
g: 10px 0px; borrder: groove blu
ue;
border-w id
dt h: 6px 6px 0p
px 6px; backgro
ound-color: #F7
7FE2E;}
ul.menuVe
ert 1 li:last -child
d { border-bot t om:
o groove blue
e; border-bot t om-w
o idt h: 6px; }
ul.menuVe
ert 1 li a:link, ul..menuVert 1 li a:visit
a ed { t ext -d
decorat ion: non
ne; color:black;}
ul.menuVe
ert 1 li:hover {ba
ackground-colo
or: #FFD700;}
om, 2006-2029
M enús verticales y menús horizontales CSS.
Todos los efect os que hemos aplicado en est e código han sido explicados durant e el desarrollo del
curso, por lo que deberías ser capaz de int erpret ar t odas las reglas que hemos definido.
M ENÚ HORIZONTAL CSS
Vamos a crear un menú horizont al a part ir del ant erior de la siguient e manera.
a) En el código HTM L int roducimos est a línea después del cierre del element o ul del menú: <div
class=" limpiador" ></ div>
b) Definimos el código CSS de la siguient e manera:

* {font -family: sans-serif; }
hr{display:none;}
ul.menuVert 1 { list -st yle: none; t ext -align: cent er; t ext -shadow : 2px 2px 4px red; padding:0; }
ul.menuVert 1 li {w idt h: 220px; padding: 10px 0px; border: groove blue;

border-w idt h: 6px 6px 6px 6px; background-color: #F7FE2E; float :left ;}
ul.menuVert 1 li a:link, ul.menuVert 1 li a:visit ed { t ext -decorat ion: none; color:black;}

ul.menuVert 1 li:hover {background-color: #DC143C;}
.limpiador{padding:0; border-st yle:none; clear:bot h; }
El mot ivo para int roducir un element o limpiador (y la exist encia de alt ernat ivas a est e procedimient o)
ya la hemos discut ido ant eriorment e. El result ado a obt ener será similar a est e.
USAR M ENÚS HORIZONTALES PREDISEÑADOS
Cuando est emos creando una w eb es posible que nos den un diseño en format o de “ imagen” creado
por un diseñador gráfico que t engamos que t ransformar en un diseño w eb. También es posible que
t engamos que crear una página w eb const ruyendo nosot ros mismos un diseño.
En el área de CSS exist e una gran cant idad de código que ya ha sido creada por ot ros programadores y
diseñadores y que t enemos a nuest ra disposición en int ernet . En general será más út il usar algo ya
disponible que crear un diseño desde cero (aunque depende de la sit uación y de cada caso). Para hacer
uso de código predefinido únicament e debemos elegir páginas w eb de diseñadores que ofrecen su
código grat uit ament e y que nos result en út iles o nos gust en.
Vamos a most rar un código que hemos adapt ado desde un código ofrecido por un diseñador a t ravés
de int ernet para crear un menú horizont al con aspect o de solapas y vamos a t rat ar de int erpret arlo.
En primer lugar el código HTM L:
<ht ml>
<head>
<link rel=" st ylesheet " t ype=" t ext/ css" href=" est ilos2.css" >
</ head>
<body>
<div id=" navcont ainer" >
<ul id=" navlist " >
<li id=" act ive" ><a href=" ht t p:/ / aprenderaprogramar.com" id=" current " >Inicio</ a></ li>
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Cursos</ a></ li>
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Libros</ a></ li>
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Divulgación</ a></ li>
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Humor</ a></ li>
</ ul>
</ div>
</ body>
</ ht ml>
Y a cont inuación el código CSS (define correct ament e el nombre de archivo) y el result ado de
visualización:
M enús vertticales y menús
s horizontales CSS.
C
body {fontt -family: sans-serif; backgroun

nd-color: yellow
w ; font -size: 14p
px;}
#navlist { padding:
p 3px 0p
px;
border-bo t t om: 1px solid
d #778;
font : bold 16px Verdana, sans-serif; }
#navlist li { list -st yle: non e; display: inlin e; margin-left :1

10px;}
#navlist li a { padding: 3p x 1em;

border: 1p
px solid #778; border-bot
b t om: none;
backgroun
nd: #DDE; t ext -d
decorat ion: non
ne; }
#navlist li a:link
a { color: #4
448; }
#navlist li a:hover
a {color: #000; backgro und: #AAE; borrder-color: #227
7; }
#navlist li a#current
a { bacckground: #AAE
E; }
Vamos a proceder a i nt erpret ar el

e código. El código
c HTM L de la part e del menú, esquemat iza
adament e,
es el siguiient e:
<div id=" navcont

n ainerr" >: define el cont enedo r para alojar el menú com
mo con id “ n
navcont ainerr”
<ul id=" na
avlist " >: defi ne la list a qu
ue const it uye
e el menú co
omo con id “ navlist
n ”
<li><a hre
ef=" …" id=" cu
urrent " >…<// a></ li>: defi ne un eleme
ent o a con id
d “ current
<li>…</ li>
>: se crean va
arios elemen
nt os de list a dent
d ro de ul y dent ro de navcont aine
er
</ ul> </ diiv>: se cierra

an los elemen
nt os
En el códi go CSS enco nt ramos lo siguient

s e:
body {…}: define el co

olor de fondo
o, t ipo de fue
ent e y t amañ
ño de fuent e
#navlist { padding: 3p
px 0; margin--left : 0; bord er-bot t om: 1px
1 solid #77
78; font : bol d 16px Verd
dana, sans-
o más impo
serif; }: lo ort ant e es el
e uso de bo
order-bot t om
m para crear una línea horizont al inferior al
cont ened or a t odo lo ancho de la
a página. El padding
p t op y bot t om se
e est ablece e
en 3px lo cua
al desplaza
el borde hacia
h abajo.
om, 2006-2029
#navlist li { list -st yle: none; margin: 0; display: inline; margin-left :10px;}: elimina los símbolos de viñet a
de list a y hace que los element os de list a se muest ren inline (uno a cont inuación de ot ro en la misma
línea) en lugar de como element os block, con una separación ent re ellos.
#navlist li a { padding: 3px 0.5em; border: 1px solid #778; border-bot t om: none; background: #DDE;
t ext -decorat ion: none; }: cada link dent ro de un element o de list a lleva un relleno (al ser de 3px hacia
abajo, la part e inferior de est e relleno coincide con la línea de borde que hemos colocado
ant eriorment e. También se crean los bordes eliminando el inferior (que ya est á const ruido mediant e la
línea de borde a t odo lo ancho), se pone un color de fondo y se elimina el subrayado por defect o de los
link.
#navlist li a:link { color: #448; }: est ablece el color de t ext o para los links dent ro de element os li del
menú.
#navlist li a:hover {color: #000; background: #AAE; border-color: #227;}: est ablece que cuando el rat ón
se sit úa sobre un element o de list a el t ext o se muest re negro, cambie su color de fondo y su color de
borde.
#navlist li a#current { background: #AAE; }: est ablece un color de fondo dist int o para el element o que
est á ident ificado con el id “ current ” .
Not a: en un ejemplo de menú horizont al ant erior hemos usado float :left ; mient ras que en est e ejemplo
hemos usado display:inline; ¿Por qué? No es obligat orio hacer las cosas de una det erminada manera,
por eso usamos una u ot ra forma para ver dist int os ejemplos de formas de t rabajar. Con los
conocimient os que ya t enemos, debemos pensar que hay una diferencia import ant e ent re usar float
left y usar display inline: cuando los element os float no caben en el espacio disponible se colocan
debajo creando una nueva línea. En cambio los element os inline se siguen mant eniendo siempre en una
línea. En muchos casos usar float será más vent ajoso para poder añadir t ant os element os de menú
como se deseen sin preocuparnos de si caben en el espacio disponible o no.
EJERCICIO
Analiza el código HTM L y CSS que most ramos a cont inuación y realiza una int erpret ación descript iva del
código, explicando el significado de cada una de sus part es (Not a: como referencia, puedes ver cómo se
ha hecho la int erpret ación descript iva del código de ejemplo que hemos vist o ant eriorment e).

<ht ml><head><tit le>Port al w eb - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
/ * Curso CSS aprenderaprogramar.com* /
#nav-menu ul {font -family: sans-serif; list -st yle: none;
padding: 0;margin: 0; }
#nav-menu li {float : left ;margin: 0 0.15em; border: 5px groove #FFAA33 ;}
#nav-menu li a { background-color: #FFC0CB; height : 2em; line-height : 2em; float : left ;
w idt h: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; t ext -decorat ion: none;
t ext -align: cent er;}
#nav-menu li a:hover {background-color: #FF6347; }
</ st yle></ head>
<body><div id=" nav-menu" >
<ul id=" navlist " ><li id=" act ive" ><a href=" ht t p:/ / aprenderaprogramar.com" id=" current " >Inicio</ a></ li>
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Cursos</ a></ li>
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Libros</ a></ li>
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Divulgación</ a></ li>
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Humor</ a></ li>
</ ul></ div></ body></ ht ml>

M enú desplegable horizon
ntal CSS. Efecto
o dropdow n.
M ENÚ DE
ESPLEGABLE CSS
e muchas ocasiones la
Aunque en a generació n de efect os
o visuales relat
r ivamentt e complejo s se hace
mediant e un lenguaje ar como usando HTM L y CSS podemo
e como javasscript , vamoss a comproba os generar
un menú desplegable at ract ivo y con
c un efect o visual muy
y int eresant e.
e
Vamos a diseñar
d un menú
m con 4 it
i ems princip
pales. Cada it
i em principa
al t iene subi t ems o sube
element os.
El esquem
ma que define cuáles son los it ems
e pales y cuál es los subi t ems lo de
princip efinimos a
cont inuacción.
Item principal Subitems
Apre
ender a programar desde
e cero
Libros Crea
ación y admin
nist ración w e
eb con Joom
mla
Leng
guaje de prog
gramación Ja
ava
Divulgació
ón Los 100
1 t rucos de
e CSS
Pre
eguntas frecuentes
Hum
mor informát ico
i
mor bases de dat os

Hum
Humor
Hum
mor programa
ación
Hum
mor universid
dad
Podemos comprobar que el prim er it em de menú

m o aparrt ado t endrá
á t res subit ems o subapa
art ados. El
segundo it
i em t endrá un solo sub
bit em. El t erccer it em no t endrá ningú
ún subit em. El cuart o it em
e t endrá
cuat ro su bit ems.
a página w eb
Cuando la b cargue iniciialment e mo
ost raremos sólo los it emss principales del menú:
om, 2006-2029
M enú desplegable horizon
ntal CSS. Efecto
o dropdow n.
Cuando el
e usuario po
osicione el punt ero del rat ón sobr e un element o principa
al, aparecerá
á el menú
desplegab
ble con los subit ems cor respondient es. Por ejem
mplo al posicionarnos sob
bre el it em “ Libros” se
verán los t res subit em
ms correspon
ndient es y se podrá elegirr aquel que se
s desee:
La idea general
g es la
a siguient e. En HTM L se
s definen t odos los it ems
e y subit ems. Los it ems
e serán
element os
o li dent ro de
d una list a ul. Los men
nús que se despliegan
d serán elemen
nt os ul que cont ienen
element os
o li y que a su
s vez est án dent ro de lo
os element os
s li del menú
ú principal. P
Puede parece
er un poco
complicad
do, pero est udiando
u el có
ódigo llegará
ás a ent enderlo fácilmentt e.
Escribe est
e e código HTM L y co
omprueba su
s est ruct urra. Hazt e un
n esquema donde indiiques qué
element os
o van qued ando dent ro
o de ot ros. Fíjat e en lo
os coment arios que he
emos incluid
do, que t e
servirán de
d guía. Ten en cuent a que
q en el do
ocument o HT
TM L no se define
d qué será visible al
a cargar la
página y qué
q no será visible,
v ya qu
ue est o lo haremos a t rav
vés de CSS.
<ht ml>
<head> <t it le>Port al w eb
c =" ut f-8" >
pe=" t ext/ css" h ref=" est ilosCU0
01050D.css" >
</ head>
<body>
<div id=" w rap" > 
<h2>CSS-M
M enú desplegable</ h2>
<p>aprend
deraprogramar .com</ p>
<ul id=" navbar"> 
<li><a hreff=" ht tp:/ / apren
nderaprograma
ar.com" >Libros<
</ a> 
<ul> 
>
nderaprograma
ar.com" >Aprend
der a programa
ar desde cero<// a></ li> 
nderaprograma
ar.com" >Creació
ón y administ ra
ación w eb con Joomla</
J a></ li > 
nderaprograma
ar.com" >Lengua
aje de program
mación Java</ a>
></ li> 
</ ul>
</ li>
nderaprograma
ar.com" >Divulga
ación</ a> 
<ul> 
>
nderaprograma
ar.com" >Los 100 t rucos de CSS
S</ a></ li> 
</ ul>
</ li>
nderaprograma
ar.com" >Pregun
nt as frecuent es
s</ a></ li>
om, 2006-2029
M enú desplegable horizontal CSS. Efecto dropdow n.
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Humor</ a> 

<ul> 
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Humor informát ico</ a></ li> 
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Humor bases de dat os</ a></ li> 
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Humor programación</ a></ li> 
<li><a href=" ht tp:/ / aprenderaprogramar.com" >Humor universidad</ a></ li> 
</ ul>
</ li>
</ ul>
<div class=" limpiador" ></ div> 
</ div>
</ body>
</ ht ml>
Escribe ahora el código CSS. Con los cont enidos que hemos vist o a lo largo del curso debes ser capaz de
int erpret ar t odas las inst rucciones que aparecen en el mismo. Pon el nombre de archivo css adecuado.
Ten en cuent a que en algunos navegadores, en especial en los más ant iguos, es posible que no
obt engas el result ado deseado.

body {font : 62.5%/ 1.2 Arial, Helvet ica, sans-serif; background-color: #eee; }
h2 {margin:0;}
/ * Caja cont enedora* /

#w rap { font -size: 1.8em; w idt h: 520px; padding: 20px;
margin: 0 aut o; / * Da lugar al cent rado de la caja en el element o superior body* /
background-color: #fff;}
/ * Est ilos que crean el menú desplegable * /

/ * Eliminamos padding y margin que int roducen navegadores por defect o en list as* /
#navbar { padding:0; margin:0; }
/ * Element os it ems principales de menú que se muest ran siempre* /

#navbar li { list -st yle: none; float : left ; margin:10px;}
#navbar li a {
display: block; / * Usamos display block para poder aplicar propiedades de caja a links * /
padding: 3px 8px; background-color: #5e8ce9; color: #fff;
t ext -decorat ion: none; }
/ * List as de subit ems de menú* /

#navbar li ul {
display: none; / * La list a inicialment e no se muest ra debido a display:none; * /
background-color: #69f;}
#navbar li:hover ul {
font -size: 12px;
display: block; / * Al sit uar el cursor sobre el it em la list a de subit ems pasa de display none a display block y se muest ra* /
posit ion: absolut e; / * Al desplegarse el submenú no ocupa espacio y no desplaza a ot ros element os gracias a que
est ablecemos posit ion absolut e* /
margin: 0; padding: 0; / * Anulamos margin y padding que por defect o int roducen navegadores* /
}
M enú desplegable horizontal CSS. Efecto dropdow n.
#navbar li:hover li { float : none; } / * Anulamos el float left que define el element o padre para que los subit ems se muest ren en
vert ical * /
/ * Creamos la apariencia de los subit ems de menú, color de fondo, borde inferior, color de t ext o* /
#navbar li:hover li a { background-color: #69f; border-bot t om: 1px solid #fff; color: #000; }
/ * Creamos el efect o de cambio de color y aspect o cuando ponemos el punt ero del rat ón sobre un subit em de menú* /
#navbar li li a:hover { background-color: #8db3ff; }
.limpiador{padding:0; border-st yle:none; clear:bot h; } / * Forzamos a la caja a most rarse aún cont eniendo element os
flot ant es* /
Es import ant e que comprendas t odo el código HTM L y t odo el código CSS que hemos ut ilizado.
Señalaremos algunos aspect os principales que se usan para generar el efect o de menú desplegable:
a) Las list as de subit ems no se muest ran inicialment e porque t ienen est ablecida la propiedad
display como “ none” . Hacemos que se muest ren cuando el usuario pone el rat ón encima de un
it em principal indicando que la list a hija de ese element o pase a t ener su propiedad display
como “ block” .
b) Las list as de subit ems no desplazan a ot ros element os porque est ablecemos su propiedad
posit ion como “ absolut e” . El valor absolut e permit e que un element o se desplace respect o al
origen de coordenadas del primer element o cont enedor posicionado ó respect o a la esquina
superior izquierda de la vent ana de visualización; el rest o de element os act úan como si el
element o con posit ion absolut e no exist iera, por lo que su espacio es ocupado por ot ros
element os. Nosot ros no usamos absolut e para crear un desplazamient o, pero sí nos
aprovechamos de que da lugar a que no se ocupe espacio.
Además en est e ejemplo ut ilizamos ot ras propiedades como float que ya hemos est udiado
ant eriorment e en el curso y que aquí nos sirven para repasar y reafirmar conocimient os. Si est ás
siguiendo el curso y t ienes dudas, consult a en los foros en ht t p:/ / aprenderaprogramar.com/ foros.
Un aspect o que merece la pena coment ar es cómo CSS int roduce element os que le permit en realizar
t areas asemejables a las de un lenguaje de programación. En concret o, fíjat e cómo la lógica del menú
desplegable es de t ipo condicional, una capacidad propia de los lenguajes de programación. En
concret o, se t rat aría de ejecut ar “ Si el usuario t iene el rat ón apunt ando a un it em de menú { M ost rar
list a desplegable de subit ems} sino { M ost rar sólo el it em principal }” . No lo hemos expresado así, pero
la lógica se aproxima a est o. Coment amos en su moment o que CSS no es un lenguaje de programación,
no obst ant e se ent remezcla con ést os al escribirse embebidos unos lenguajes con ot ros, o t iene algunas
analogías como la que est amos coment ando que se asemeja a una operación lógica.

Aplicar estillos a tablas con
n CSS. border-c
collapse.
ESTILOS PARA
P TABLAS
En el pasado las t abl as fueron element os qu

ue muchos diseñadores
d o programa
adores ut ilizaban para
crear un diseño
d donde
e las celdas eran
e cont ene
edores part es
e de la web.. Hoy en día est o ya no se usa y los
diseños se crean usando elemen t os flot ant es o nuevas capacidadess de CSS parra crear colu
umnas. Sin
o element os import
embargo, las t ablas si guen siendo i ant es dent ro de una
u web.
edar claro qu
Debe que ue no est á re
ecomendado
o el uso de t ablas
a para crrear division es de maque
et ación en
la web. Por ejemplo un
u menú no
o es recomen carlo dent ro de una t abl a, será prefe
ndable coloc erible usar
element os
o flot ant es para
p ello. Si n embargo, muchas vec
ces est aremo
os t rabajand
do en desarrrollos w eb
donde no
os será necessario int rodu
ucir t ablas sim
mplement e porque
p se t r at a de un co
ont enido t ab ulado. Por
cont enido
o t abulado hacemos
h alu egist ros que describen los valores de ciert os
usión a una serie de re
parámet r os que se ind
dican en la cabecera
c l t abla. Por ejemplo, un
de la de servir par a describir
na t abla pued
los nut rient es de los aliment
a os.
o nut ricionall por cada 10

Cont enido 00 g de alime
ent o.
Alime
ento Calorías (k
kCal) Grasas (g) Pro
oteína (g) Carbohid
dratos (g)
Aránd
dano 49 0.2 0.4 12
2.7
Plát ano 90 0.3 1.0 23

3.5
Cere
eza 46 0.4 0.9 10
0.9
Fre
esa 37 0.5 0.8 8.3
Para repr esent ar est e t ipo de con

nt enidos t ab
bulados usam
mos t ablas y para lograr que la t abla
a t enga un
aspect o est
e ét ico adeccuado aplicam
mos est ilos CSS.
C
Recordare
emos ahora algunos conccept os básiccos de HTM L:
<t able> … </ t able> de

elimit a la t ab
bla.
<capt ion>
> … </ capt io n>: elementt o opcional que
q permit e poner un t ítt ulo de t abla
a. M uchas ve
eces no se
usa.
<t head> … <t head>: delimit
d a filas o celdas que
e no son celd
das de dat os, sino encabe
ezados de la t abla.
<t h> … <// t h>: delimit a una celda de eader). A vecces t odas las celdas de un
d encabezado (t able he na t abla se
definen co
omo celdas normales
n y se
s prescinde del uso de t h.
<t body> … <t body>: delimit
d a las fiilas y celdas de dat os de una t abla.
<t r> … </ t r>: delimit a una fila (t ab
ble row).
<t d> … <// t d>: delimit a una celda normal
n de da
at os (t able d at a cell).
<t foot > … </ t foot >: de
elimit a el pie
e de t abla.
om, 2006-2029
Aplicar estilos a tablas con CSS. border-collapse.
Vamos a ut ilizar el siguient e código HTM L para t rabajar los est ilos de t ablas. Escribe el código en un
edit or y guarda el document o HTM L.
<ht ml>
<head> <t it le>Port al web - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
<link rel=" st ylesheet " t ype=" t ext / css" href=" est ilosCU01051D.css" >
</ head>
<body>
<t able >
<capt ion>Cont enido nut ricional por cada 100 g de aliment o.</ capt ion>
<t r> <t h>Aliment o</ t h> <t h>Calorías (kCal)</ t h> <t h>Grasas (g)</ t h>
<t h>Prot eína (g)</ t h> <t h>Carbohidrat os (g)</ t h>
</ t r>
<t r> <t d>Arándano</ t d> <t d>49</ t d> <t d>0.2</ t d>
<t d>0.4</ t d> <t d>12.7</ t d>
</ t r>
<t r> <t d>Plát ano</ t d> <t d>90</ t d> <t d>0.3</ t d>
<t d>1.0</ t d> <t d>23.5</ t d>
</ t r>
<t r> <t d>Cereza</ t d> <t d>46</ t d> <t d>0.4</ t d>
<t d>0.9</ t d> <t d>10.9</ t d>
</ t r>
<t r> <t d>Fresa</ t d> <t d>37</ t d> <t d>0.5</ t d>
<t d>0.8</ t d> <t d>8.3</ t d>
</ t r>
</ t able>
</ body>
</ ht ml>
Por t radición era (y en ciert a medida sigue siendo) muy habit ual usar at ribut os de la et iquet a HTM L
t able para definir los bordes y espaciado en las t ablas, por ejemplo <t able border=" 1" cellpadding=" 14"
cellspacing=" 0" >
Est os at ribut os no los usaremos en nuest ros desarrollos web, ya que como venimos indicando a lo largo
de t odo el curso debemos separar la est ruct ura del document o (ht ml) de su apariencia (css).
Si la t abla no t iene definido ningún est ilo se most rará como por defect o la muest re el navegador, en
general sin bordes. Para int roducir bordes t enemos que definir el borde de la t abla (borde ext erno) y el
borde de las celdas (bordes int ernos). Escribe est e código CSS, guárdalo en un archivo css con el
nombre adecuado, y comprueba la diferencia ent re visualizar la t abla sin est ilos o con est e est ilo básico:

body {font -family: Arial, Helvet ica, sans-serif; }
t able, t h, t d {border: 1px solid #000;}
Podemos comprobar que al dibujar la t abla se dibuja un borde ext erno para la t abla en su conjunt o y
luego un borde int erno para cada una de las celdas. El efect o que se genera es un poco ext raño al t ener
la t abla “ líneas dobles” de separación. Est e efect o se puede anular usando la propiedad border-collapse
como veremos a cont inuación.
ATRIBUTOS QUE NO SE HEREDAN EN TABLAS
Algunas reglas que normalment e se heredan no son heredadas por las t ablas. Por ejemplo si aplicamos
una regla como body {font -size: 8px;} podremos comprobar que en algunos navegadores las t ablas no
heredan est e t amaño. Tendremos ent onces que especificar est os valores para t ablas usando
declaraciones como t able {font -size: 8px;}. Aunque sean los mismos at ribut os que los definidos para la
et iquet a body, será necesario para evit ar que el navegador aplique el valor por defect o que t enga
previst o para t ablas.
Not a: ot ra vía por la que se puede conseguir la herencia de algunos at ribut os como font -size en t ablas
es añadiendo una declaración en cabecera del document o HTM L del t ipo <!DOCTYPE ht ml PUBLIC " -
/ / W3C/ / DTD HTM L 4.01/ / EN" " ht t p:/ / www.w3.org/ TR/ ht ml4/ st rict .dt d" >. Est e t ipo de declaraciones
pueden dar lugar a que el navegador act úe de una forma u ot ra (se dice que el navegador ut iliza un
modo u ot ro), lo cual nos vuelve a referenciar al problema de las diferent es formas en que los dist int os
navegadores pueden most rar un mismo código HTM L. En general preferiremos reescribir el at ribut o y
asegurarnos de que el navegador act uará conforme esperamos ant es que fiarnos de que t odos los
navegadores respondan igual ant e una declaración en la cabecera del document o HTM L.
ANCHURA Y ALTURA DE TABLAS Y ELEM ENTOS DE TABLAS
La anchura de una t abla será la necesaria para most rar sus cont enidos y cada celda t endrá el ancho
necesario, except o si est ablecemos indicaciones específicas. Una forma int eresant e de hacerlo es
usando porcent ajes. Por ejemplo si est ablecemos un ancho para la t abla de 550 px y t enemos 5
columnas, podemos indicar que t odas las columnas t engan el mismo ancho dividiendo el 100% de
ancho de la t abla ent re 5 para obt ener un 20 %. Aplicaríamos reglas de est e t ipo: t able {w idt h: 550px;}
t h, t d {widt h: 20%;}
Si la t abla est á dent ro de ot ro cont enedor y queremos que ocupe el 100% de espacio disponible
podemos aplicar reglas del t ipo t able {w idt h: 100%; }
ATRIBUTOS NO APLICABLES A TABLAS
Podemos est ablecer un valor de height para las celdas de t ablas pero est e valor no será respet ado si el
cont enido de la celda es mayor que el espacio disponible. Si int ent amos aplicar un at ribut o como t h, t d
{ overflow: hidden;} comprobaremos que probablement e no funcione. Si necesit amos aplicar un valor
height y que ést e no sea modificable de ninguna manera, podemos int roducir el cont enido de las celdas
en el HTM L dent ro de element os div. Por ejemplo:
<t d><div>Arándano est e t ext o es muy largo y va a exceder el espacio disponible</ div></ t d>
Ahora est ableceríamos el cont rol de la alt ura de los element os div y el valor de la propiedad overflow
que sí es aplicable a los element os div de forma similar a est a:
t h, t d {t ext -align: cent er; padding:0.5em; widt h:25%; height : 1em; overflow: hidden;}
t h div, t d div {height : 1em; overflow: hidden; color:red;}
Haz pruebas escribiendo código para verificar lo que hemos expuest o.
PROPIEDAD BORDER-COLLAPSE
PROPIEDAD CSS border-collapse
Permit e cont rolar si en una t abla cada element o mant iene un borde
Función de la propiedad propio generando un efect o de “ bordes dobles” o si los bordes se
fusionan generando un efect o de “ borde único” .
Valor por defecto separat e
Aplicable a Tablas
separat e (cada element o conserva su borde)

collapse (los bordes se fusionan en un borde único)
esta propiedad
inherit (se heredan las característ icas del element o padre).
Ejemplos .myTable {border-collapse: separat e;}

aprenderaprogramar.com .myTableSP {border-collapse: collapse;}
Aunque el valor separat e es el valor por defect o para est a propiedad, la mayoría de las veces se aplica
el valor collapse porque genera una visualización más sencilla y acorde a las expect at ivas de los
usuarios.
M odifica el código CSS del ejemplo ant erior como indicamos a cont inuación y comprueba el efect o que
se produce:

body {font -family: Arial, Helvet ica, sans-serif; }
t able, t h, t d {border: 1px solid #000; border-collapse: collapse;}
t h, t d {t ext -align: cent er; padding:0.5em;}
Comprobarás que ahora los bordes se muest ran como bordes únicos.
EJERCICIO
Crea un document o HTM L con t res t ablas, t odas ellas iguales, con un t ít ulo de t abla, cinco columnas y 7
filas (la primera ella, fila de encabezados que no son dat os propiament e dichos). Aplícale los siguient es
est ilos y comprueba la visualización obt enida:
a) La t abla 1 tendrá una anchura de 600 píxeles y cada columna t endrá un 20% de la anchura t ot al de la
t abla. Exist irán bordes únicos de color gris y t endrán un grosor de 8 píxeles.
b) La t abla 2 t endrá una anchura igual al 100 % disponible en la vent ana y cada columna t endrá un 20 %
de la anchura t ot al de la t abla. Exist irán bordes dobles de color marrón y t endrán un grosor de 2
píxeles.
c) La t abla 3 t endrá una anchura de 500 píxeles y cada columna t endrá 100 píxeles de anchura. Sólo
exist irán bordes en la part e inferior de las filas (es decir, no habrá bordes lat erales ni superiores), t ipo
borde único, con un grosor de 6 píxeles y color azul.
Para comprobar si t us respuest as y código son correct os puedes consult ar en los foros

Tablas CSS. border-spacing
g, caption-side
e, empty-cells.
DISEÑO CSS
C DE TABLA
AS
Hay una serie de prropiedades que

q nos perrmit en defin
nir est ilos p ara t ablas. Vamos a es
st udiar las
propiedad
des border-sspacing, captt ion-side y empt y-cells. Además
A abo rdaremos có
ómo ut ilizar los fondos
en las t ab
blas, cómo crear
c filas co
on colores diferent
d es y veremos un
n ejemplo de
e cómo ut ili zar est ilos
creados por
p ot ros pro
ogramadoress o diseñadorres.
PROPIEDA
AD BORDER--SPACING
PROPIEDA
AD CSS bord
der-spacing
Per mit e cont ro

olar la sepa
aración ent re
r bordes d
dent ro de una
u t abla
edad
cuando los bord
des no est án fusionados con border-ccollapse.
Valor po
or defecto 0
Aplicable a Tab
blas sin borde
er-collapse est
e ablecido o con border -collapse: se
eparat e;
Una
a unidad de m edida válida en
e CSS (indica separación vert ical y horiz
zont al)
Valores posibles parra Dos unidades de medida sepa

aradas con un
n espacio (la p
primera unida
ad indicará
opiedad
esta pro sepa
aración horizo
ont al y la segu
unda separaci ón vert ical)
erit (se hereda

inhe an las caracte
eríst icas del el ement o padre
e).
Ejemplo s .myTable {borderr-spacing: 2em

m;}
eraprograma
aprende ar.com .myTableSP {bord
der-spacing: 15px
1 5px;}
Est a prop
piedad es análoga
a al at
a ribut o cell spacing que
e se usaba t radicionalm
ment e en HTM
H L para
est ablecer una separa
ación ent re celdas
c en lass t ablas. En el
e caso de la ant igua pro piedad cellp
padding, se
puede ob t ener un efe
ect o análogo en t ablas sim
mplement e usando
u la prropiedad pad
dding.
Si se est ablece
a borde
er-spacing: 0;
0 el efect o es similar a definir borrder-collapse
e:collapse; aunque
a en
realidad son
s sit uacion
nes dist int as.. Usando borrder-spacing
g:0; los borde
es dobles sig
guen exist ien
ndo, lo que
ocurre ess que est án t an junt os que
q visualme
ent e sólo se
e aprecia un a línea de b
borde. En es
st e caso el
grosor de las líneas de
e borde será doble del esspecificado (ya
( que se ju nt an dos líne
eas de borde
e). Usando
ollapse: collapse; no exist en líneas de
border-co e borde para
a cada celda,, sino que las líneas colin
ndant es se
fusionan en una sol a línea. En est e caso el grosor de
d las líneass de borde será exact ament
a e el
especifica
ado.
om, 2006-2029
Tablas CSS. border-spacing, caption-side, empty-cells.
PROPIEDAD CAPTION-SIDE
Es una propiedad que permit e colocar el element o capt ion en una posición concret a. Los valores
permit idos son t op, right , left , bot t om y hacen que el t ít ulo est ablecido en capt ion se coloque en el
lugar especificado. Por defect o el t ít ulo se coloca en posición t op (encima de la t abla). En posiciones t op
y bot t om (debajo de la t abla) el t ít ulo aparece por defect o cent rado horizont alment e. Si queremos
est ablecer una alineación horizont al específica podemos usar t ext -align como en est e ejemplo, que
coloca el t ít ulo abajo a la derecha:
t able {widt h: 550px; capt ion-side:bot t om;}
capt ion {t ext -align:right ;}
En el caso de las posiciones left y right por defect o el t ít ulo se coloca en el lat eral, alineado con la part e
superior de la t abla. Si queremos cent rarlo vert icalment e podemos hacerlo como en est e ejemplo:
t able {widt h: 550px; capt ion-side:left ;}
capt ion {vert ical-align:middle;}
Est a propiedad es una propiedad poco usada, aunque en algunos casos concret os puede result ar de
int erés.
PROPIEDAD EM PTY-CELLS
Normalment e las celdas t ienen un cont enido. Por ejemplo <t d>9</ t d> es una celda con cont enido 9.
<t d>& nbsp;</ t d> es una celda con un espacio en blanco. No obst ant e, en algunos casos las celdas
pueden est ar complet ament e vacías en forma <t d></ t d>. Est o es bast ant e frecuent e cuando no se
t ienen algunos dat os y result a imposible rellenar la t abla complet ament e.
La propiedad empt y-cells sirve para definir cómo debe most rar el navegador las celdas vacías. Tiene dos
valores posibles: show (valor por defect o) y hide. Si usamos show (o simplement e si no especificamos
est a propiedad) las celdas vacías se most rarán de la misma manera que las celdas normales. Si usamos
hide los bordes y fondo (background) de la celda no se most rarán
Est a propiedad es una propiedad poco usada, aunque en algunos casos concret os puede result ar de
int erés.
FONDOS (BACKGROUND EN TABLAS)
Se pueden aplicar colores de fondo o imágenes de fondo a las t ablas. La única peculiaridad a t ener en
cuent a es que en una t abla exist en dist int os element os y a la hora de aplicar fondos cada element o
queda en una capa inferior o superior a la hora de visualizarse, de modo que un fondo en una capa
inferior puede quedar ocult o por un fondo est ablecido en una capa superior. Los fondos que pueden
est ablecerse y el orden en que quedarían ordenados son los siguient es:
1. Fondo del element o t able, es el que se sit úa “ más abajo” y será t apado t ot al o parcialment e por
ot ros fondos si se est ablecen.
2. Fondo de grupos de columnas
3. Fondo de columnas
4. Fondo de grupos de filas

5. Fondo de filas
6. Fondo de celdas, que son los que se sit úan “ más arriba” y t apan t ot al o parcialment e a los
fondos que exist an debajo.
COLORES DE FILAS INTERCALADOS O ALTERNOS
Es frecuent e present ar t ablas donde los colores de filas est én int ercalados o alt ernos. Est o se puede
hacer de forma sencilla con CSS. Una forma de hacerlo sería est ablecer en el document o HTM L una
especificación de clase para cada fila. Por ejemplo <t r class=” t r_t ype1” >…</ t r> alt ernando con <t r
class=” t r_t ype2” >…</ t r>.
Pero en general será mucho más práct ico y sencillo usar los select ores avanzados :nt h-child(odd) y :nt h-
child(even) que ya hemos explicado ant eriorment e en el curso para conseguir alt ernar los colores de
fondo. Aquí most ramos un código de ejemplo donde aplicamos un color de fondo amarillo a las celdas
de cabecera de la t abla y un color gris a las filas impares y un color rosado a las filas pares.
t able t h {background-color: yellow; }
t able t r:nt h-child(odd) {background-color: grey;}
t able t r:nt h-child(even) {background-color: pink;}
El result ado que se consigue es del t ipo que most ramos a cont inuación.
USAR DISEÑOS EXISTENTES
Como ya hemos coment ado en ot ras ocasiones, exist en muchos diseños at ract ivos que han sido
creados por diseñadores expert os que son puest os a disposición de t odos por sus creadores a t ravés de
int ernet . Normalment e será int eresant e usar est os diseños cuando queramos ahorrar t iempo y nos
result e út il un diseño que se nos proponga. Para encont rar diseños para t ablas bast a con usar un
buscador e int roducir una búsqueda como “ css t able designs” ó “ diseños css para t ablas” . En los
result ados, podremos encont rar diferent es propuest as de diseño y de código.
A cont inuación t e indicamos el código de un diseño de t abla propuest o por un diseñador. Escribe el
código HTM L y el código CSS y comprueba el result ado.
<ht ml>
<link rel=" st ylesheet " t ype=" t ext / css" href=" est ilosCU01051D.css" >
</ head>
<body>
<t able >
<capt ion>Cont enido nut ricional por cada 100 g de aliment o.</ capt ion>
<t r> <t h>Aliment o</ t h> <t h>Calorías (kCal)</ t h> <t h>Grasas (g)</ t h>
<t h>Prot eína (g)</ t h> <t h>Carbohidrat os (g)</ t h>
</ t r>
<t r> <t d>Arándano</ t d> <t d>49</ t d> <t d>0.2</ t d>
<t d>0.4</ t d> <t d>12.7</ t d>
</ t r>
<t r> <t d>Plát ano</ t d> <t d>90</ t d> <t d>0.3</ t d>
<t d>1.0</ t d> <t d>23.5</ t d>
</ t r>
<t r> <t d>Cereza</ t d> <t d>46</ t d> <t d>0.4</ t d>
<t d>0.9</ t d> <t d>10.9</ t d>
</ t r>
<t r> <t d>Fresa</ t d> <t d>37</ t d> <t d>0.5</ t d>
<t d>0.8</ t d> <t d>8.3</ t d>
</ t r>
</ t able>
</ body>
</ ht ml>

body {font -family: Arial, Helvet ica, sans-serif;}
t able { font -family: " Lucida Sans Unicode" , " Lucida Grande" , Sans-Serif;
font -size: 12px; margin: 45px; widt h: 480px;
t ext -align: left ; border-collapse: collapse; }
th { font -size: 13px; font -weight : normal; padding: 8px; background: #b9c9fe;
border-t op: 4px solid #aabcfe; border-bot t om: 1px solid #fff;
color: #039;
}
td { padding: 8px; background: #e8edff; border-bot t om: 1px solid #fff;

color: #669; border-t op: 1px solid t ransparent ;
}
t r:hover t d { background: #d0dafd; color: #339; }
Tablas CSS. border-spacing
g, caption-side
e, empty-cells.
Fíjat e en el código CS
SS que crea est e diseño C los cont enidos que hemos est u diado a lo
o de t abla. Con
largo del curso
c ya deb
bemos ser ca
apaces de co mprender t odas
o las regla
as CSS ut iliza
adas.
Ten en cuent a que nosot

n ros aqu
uí por mot ivvos didáct ico
os est amos aplicando e
est ilos directt ament e a
element os
o t able, t h, t d, et c. lo cu
ual supondría
a que son es
st ilos para t odas
o las t ab las. Para deffinir varios
est ilos different es parra t ablas basst ará definir clases o ids
s que apliqu blas y luego definir los
uemos a t ab
blaTipo1 t d { … } serían reglas que
est ilos para esos ids o clases. Porr ejemplo #t ablaTipo1 t d { … } ó .t ab
mit irían aplica
nos perm ar est ilos different es a t ablas
a et as a las qu e hayamos aplicado un id o clase
concre
concret a.
Con est e ejemplo com

mprobamos ot ra cosa: u n buen diseñ
ño no t iene por qué ser complicado a nivel de
código. En
n la t abla antt erior lo pod
demos comp robar, un bu
uen diseño p uede basarse simplemen
nt e en una
buena com
mbinación d e colores de
e t ext o, colorres de fondo
o y t ipos de le
et ra. El códig
go es bast an
nt e sencillo
y est o es bueno para acelerar
a la velocidad de carga de una
a página web
b y para evit a
ar problemas debido a
nt os navega
que dist in adores int erp
pret en el có
ódigo de forrma dist int a.
a Cuando est és t rabajando en la
creación de
d páginas web
w recuerd a est a máxim cillo puede ser bello y effect ivo. Lo co
ma: “ lo senc omplicado
t enderá a crearnos prroblemas” .
Lo que hemos
h indiccado aquí aplicado a t ablas es vá
álido t ambié
én para el rest o de di seño CSS:
composiciones de pág
ginas web, est
e ilos para bot
b ones, est ilos
i para form
mularios, et cc. pueden en
ncont rarse
et y result arn
en int erne nos út iles pa
ara nuest ros diseños, y se
erá preferible
e el código ssencillo al co mplicado.
EJERCICIO
O
Crea el có
ódigo HTM L de
d una t abla
a con un t ít u lo de t abla, cinco
c column
nas y 7 filas ((la primera ella,
e fila de
o son dat os propiamentt e dichos). Aplícale
encabezados que no A los siguient es est ilos, com
mprueba la
visualización obt enida
a y responde
e a las siguien
nt es cuest ion
nes:
/ * Curso CSS
C aprenderap rogramar.com * /
t able { collor: #333; font -family:
- Helvet icca, Arial, sans-sserif; widt h: 640
0px; border-colllapse: collapse
e;}
t d, t h { borrder: 1px solid t ransparent ; he
eight : 30px; }
t h { backgrround: #D3D3D
D3; font -weight : bold; }
t d { backgrround: #FAFAFA
A; t ext -align: ce
ent er; }
t r:nt h-chil d(even) t d { bacckground: #F1F
F1F1; }
t r:nt h-chil d(odd) t d { background: #FEFE
EFE; }
t r t d:hover { background:: #666; color: #FFF; }
om, 2006-2029
a) Describe cuál es el efect o que genera cada una de las especificaciones que hemos incluido en el
código CSS (Ejemplo: color: #333 da lugar a que se muest ren t odos los t ext os dent ro del element o t able
con color #333333, que es un color gris oscuro. Font -family: Helvet ica, Arial, sans-serif; da lugar a que
…).
b) Indica qué modificación habría que hacer en el código para que se muest ren bordes dobles con
grosor 2 píxeles.
c) Indica qué modificación habría que hacer en el código para que se muest ren bordes simples de color
naranja de grosor 3 píxeles.
Para comprobar si t us respuest as y código son correct os puedes consult ar en los foros

Diseño líquido (fluido) CSS
S frente a respo
onsive design.
DISEÑO LÍQUIDO FRENTE A RESPO

ONSIVE DESIGN
uge del acce

Con el au eso a int ern
net a t ravéss de t ablet s, smart phon
nes, smart TV
Vs, et c. ha surgido el
problema
a de que las páginas web
b deben mo st rarse en pant
p allas de muy diferen
nt e t amaño. Conseguir
que la m isma página
a web se ve
ea bien en disposit
d ivos muy dist int os es algo q
que no es sencillo
s de
resolver.
mera aproxim
Una prim mación o int ent o de ressolver est e problema
p ess el denomin
nado diseño
o líquido o
fluido. Se
e dice que una
u página web
w t iene diseño
d líquid
do cuando la
a anchura d e sus eleme
ent os est á
definida ut
u ilizando po
orcent ajes. Supongamos
S que t enemo
os una cabeccera cuyo an
ncho fijamos
s en el 100
%, una co ho fijamos en el 25 % y una part e prrincipal de ccont enidos cuyo ancho
olumna lat erral cuyo anch
fijamos en E result ado será que al visualizarse
e el 75%. El e en dist int os disposit ivvos la anchu
ura de los
element os orcent aje de la anchura disponible.
o será un po d Ve
eamos algun
nos ejemploss:
D
Dispositivo Dimension
nes Ancho que tomará la A
Ancho que to
omará la
p
pantalla en pixeles
p columna latera
al (25 %) p
parte princip
pal (75%)
Un
n TV Full HD 1.920 x 108
80 px 480 pxx 1440 px
p
Un ord
denador porrtátil 1280 x 800
0 px 320 pxx 960 px
p
Tablet Sa
amsung Gala
axy Tab 800 x 1280
0 px 200 pxx 600 px
p
iPhone 640 x 960 160 pxx 480 px

p
mos que estt ablecemos un ancho “ fijo”

Supongam f para n uest ra págin
na web de 9
900 px y qu
ue para el
cont ened or que confforma la co lumna lat era
al definimos
s #columnaL ht : 225px; } y para el
Lat eral {widh
cont ened or del espaccio principal definimos #espacioCent
# t ral {widt h: 675px;}.
6 Con
n est as regla
as decimos
que el disseño no es flluido porque
e no se adap cho disponib le de pant al la. En la TV Full HD de
pt arán al anc
nuest ro ejemplo
e el an
ncho disponi ble es de 1920 px, mientt ras que el ancho t ot al q
que ocuparem
mos con la
definición
n indicada ess de 900 pxx. Est o supon
ne que 1920
0 – 920 = 10
000px de la pant alla de
el t elevisor
quedará l ibre, con lo que la sensa
ación será qu
ue la página web se ve muy
m a y se desap rovecha la
pequeña
pant alla.
nt rario, si co nsideramos el iPhone de

Por el con el ejemplo, su
s ancho disp
ponible es de
e 640 px mie
ent ras que
nuest ra página
p web t iene 900 p x de ancho. Como la pá n cabe en la pant alla, aparecerá
ágina web no
cort ada y para poder ver las part es
e no visibless aparecerán unas barrass de scroll. La
a sensación será
s que la
página we
eb se ve muyy grande y co
ort ada.
Pasamos ahora al dise

eño fluido. Para
P ello deffiniríamos las
s anchuras en
e porcent aj es. Fíjat e qu
ue siempre
hablamoss de anchura
as porque se ent iende qu
ue las página
as web en ve muy largas y el usuario
ert ical son m
om, 2006-2029
Diseño líquido (fluido) CSS frente a responsive design.
ya est á acost umbrado a t ener que subir y bajar por ellas. En cambio, t ener que moverse lat eralment e
es algo que suele considerarse “ desagradable” . En el diseño fluido definiríamos los anchos de est a
manera: para la columna lat eral #columnaLat eral {widht : 25%; } y para el cont enedor del espacio
principal #espacioCent ral {widt h: 75%;}.
Parece una solución ideal. Ahora el t amaño de la página web se ajust ará a la pant alla y no se
desaprovechará ninguna part e de las pant allas grandes ni aparecerán barras de scroll lat eral en las
pant allas pequeñas. ¿Qué ocurre en la práct ica? En la práct ica est a solución no es ideal ni mucho
menos. Nos encont ramos que ocurre lo siguient e: en las pant allas grandes, un párrafo que en una
pant alla de un ordenador mediano se ve en 5 líneas se verá quizás en una sola línea ya que el ancho
disponible es muy grande. El efect o es una línea muy larga que result a desagradable de leer. Por el
cont rario, cuando un párrafo const a de una sola línea cort a, en una pant alla muy grande se verá en el
lat eral izquierdo mient ras que a su derecha queda un gran espacio en blanco. En general, el diseño
fluido dará lugar a una deformación de cont enidos que quedan muy a lo largo o demasiado cort os, y la
impresión general es mala.
En las pant allas pequeñas como las de un smart phone, el diseño fluido hará que la página web “ se
comprima” para ocupar el ancho disponible que es muy poco. Cuando la pant alla es realment e
pequeña, el efect o que se genera es de “ miniat urización” o que t odo se ve “ diminut o” , t an pequeño
que práct icament e no se puede leer. Por ello en la práct ica es más habit ual est ablecer est as anchuras
principales en pixeles ant es que en porcent ajes.
La solución a obt ener una correct a visualización en páginas web puede pasar por dist int as vías:
a) Ut ilizar lo que se denomina “ responsive design” que se podría t raducir como “ diseño sensible al
dispot ivo” aunque muchas veces en español se habla simplement e de “ diseño responsive” . Est a
t écnica t rat a de usar un único HTM L y CSS pero mediant e la det ección del disposit ivo en que se
va a visualizar la página, ofrecer un diseño adecuado para cada t ipo de disposit ivo (est o obliga a
escribir diferent es reglas según el t ipo de disposit ivo en que se vaya a visualizar la web).
b) Ut ilizar diferent es dominios para el acceso con disposit ivos pequeños o disposit ivos grandes.
Por ejemplo el dominio ht t p:/ / www.iberia.com/ est á dest inado a disposit ivos de pant allas
medianas o grandes mient ras que ht t p:/ / iberia.mobi/ est á dest inado a t ablet s, smart phones y
similares. Los diseños son dist int os: más simples para los disposit os pequeños. Puede ut ilizarse
la det ección de disposit ivo para redirigir del dominio principal al .mobi.
c) Definir ancho en pixeles, que como indicamos al hablar de medidas CSS podría considerarse una
medida híbrida ent re relat iva y absolut a y es la que suele ofrecer un mejor result ado
“ int ermedio” .
d) Ut ilizar ot ras t écnicas.
En general cuando hablamos de las diferent es t écnicas que se pueden emplear hay algunas
propiedades CSS que suelen result ar út iles y que son: max-widht , min-widt h, max-height y min-height .
Diseño líquido (fluido) CSS frente a responsive design.
PROPIEDAD M AX-W IDTH
Est a propiedad permit e definir la anchura máxima de un element o, indicada en una unidad de medida
válida con CSS (admit iéndose porcent ajes). Su valor por defect o es none, que equivale a que est a
propiedad no est é declarada. Se puede aplicar a cualquier element o except o element os inline (aunque
sí a element os inline t ipo imagen u objet os incrust ados), filas de t ablas o grupos de filas de t ablas.
Si se usa un porcent aje, se refiere al ancho del element o cont enedor.
En el diseño fluido, nos puede servir para evit ar que en las pant allas muy grandes la página web se
expanda demasiado lat eralment e. De est e modo podemos permit ir que se vea más grande, pero con un
límit e máximo. Ejemplo: #columnaLat eral {widt h: 25%; max-widht : 420px; } #espacioCent ral {widt h:
75%; max-widht : 1680px;}.
PROPIEDAD M IN-W IDTH
Est a propiedad permit e definir la anchura mínima de un element o, indicada en una unidad de medida
válida con CSS (admit iéndose porcent ajes). Su valor por defect o es none, que equivale a que est a
propiedad no est é declarada. Se puede aplicar a cualquier element o except o element os inline (aunque
sí a element os inline t ipo imagen u objet os incrust ados), filas de t ablas o grupos de filas de t ablas.
Si se usa un porcent aje, se refiere al ancho del element o cont enedor.
En el diseño fluido, nos puede servir para evit ar que en las pant allas muy pequeñas la página web se
miniat urize. De est e modo podemos permit ir que se vea más pequeña, pero con un límit e mínimo.
Ejemplo: #columnaLat eral {widht : 25%; max-widht : 420px; min-widht : 180px; } #espacioCent ral {widt h:
75%; max-widht : 1680px; min-widt h: 720px; }.
PROPIEDAD M AX-HEIGHT
Est a propiedad es análoga a max-widht , pero menos usada ya que como hemos indicado el sent ido
vert ical suele t omarse menos en consideración. Se puede aplicar a cualquier element o except o
element os inline (aunque sí a element os inline t ipo imagen u objet os incrust ados), columnas de t ablas
o grupos de columnas de t ablas. En caso de usar porcent ajes, se calculan respect o al valor height del
cont enedor. Si est e valor no est á est ablecido, aplicar est a regla puede no t ener efect o alguno.
PROPIEDAD M IN-HEIGHT
Est a propiedad es análoga a min-widht , pero menos usada ya que como hemos indicado el sent ido
vert ical suele t omarse menos en consideración. Se puede aplicar a cualquier element o except o
element os inline (aunque sí a element os inline t ipo imagen u objet os incrust ados), columnas de t ablas
o grupos de columnas de t ablas. En caso de usar porcent ajes, se calculan respect o al valor height del
cont enedor. Si est e valor no est á est ablecido, aplicar est a regla puede no t ener efect o alguno.

Propiedad cursor
c CSS. Efec
ctos sobre el puntero del rató
ón.
CURSOR CSS
C
CSS perm
mit e modifica
ar el símbolo
o que se mu est ra como punt ero cua
ando se sit úa
a el punt ero
o del rat ón
sobre una
a superficie mediant
m e la propiedad cursor.
c Aunq ue no siemp
pre se usa, esst a propieda
ad permit e
generar algunos efectt os visuales at
a ract ivos y hacer
h más am
migable la na
avegación.
El mot ivo
o por el que result a de mayor int er és est a prop
piedad es po
orque comb inada con t écnicas
é de
ación puede servir para generar efe
programa ones del usu ario como
ect os dinámi cos indicat ivvos de accio
“ element o que se pu
uede seleccio
onar o arrasst rar” o “ pro
oceso en eje mbiando la forma del
ecución” cam
punt ero del
d rat ón. Ta
ambién se pu
uede usar si n combinar con program
mación, pero
o las posibilid
dades que
t endremo ar est a propiiedad serán más limit ada
os para aplica as.
La propie
edad cursor es habit uall aplicarla en
e combinac
ción con ho ver para ca
ambiar el as
spect o del
punt ero cuando
c el ussuario se po siciona en det
d erminado s lugares de
e la página w eb, aunque
e se puede
aplicar a un ad de hacerl o en combin
u element o sin necesida nación con ho
over.
AD CURSOR
PROPIEDA
La forma más direct a para ent end

der est a prop
piedad es vie
endo una im
magen con lo s t ipos más habit uales
de punt erros que se pu
ueden most rar.
r
PROP
PIEDAD CSS cursor
c
edad Per mit e definir el aspect o d el punt ero que
q se muestt ra en pant alla.
Valor po
or defecto Autt o
Aplicable a Tod
dos los eleme
ent os
om, 2006-2029
Propiedad cursor CSS. Efectos sobre el puntero del ratón.
PROPIEDAD CSS cursor
aut o (el navegador det ermina el aspect o)
url (rut aDeLaImagenDeseada) [Se pueden especificar varias urls separadas por comas
por si no es posible cargar una se int ent a cargar la siguient e y un valor predefinido final
por si no es posible cargar ninguna url)
Una palabra clave predefinida indicadora de un t ipo general: aut o, default (punt ero
básico de defect o, usualment e una flecha), none (no muest ra punt ero)
Una palabra clave predefinida indicadora de un t ipo de st at us: cont ext -menu, help,
point er, progress, wait
Una palabra clave predefinida indicadora de un t ipo de selección: cell, crosshair, t ext ,
esta propiedad vert ical-t ext
Una palabra clave predefinida indicadora de un t ipo de arrast rar y solt ar: alias, copy,
move, no-drop, not -allowed
Una palabra clave predefinida indicadora de redimensionamient o o scrolling: all-scroll,

col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, ne-resize,
nw -resize, se-resize, sw -resize, ew -resize, ns-resize, nesw -resize, nw se-resize
Una palabra clave predefinida indicadora de zoom: zoom-in, zoom-out
inherit (se heredan las característ icas del element o padre).
Ejemplos .myBox {cursor: url(CU01048D_1.png), wait ;}

aprenderaprogramar.com .myBoxT2 { cursor: help;}
Prueba el result ado de usar la propiedad cursor CSS escribiendo el código que most ramos a
cont inuación y visualizándolo en t u navegador. Ten en cuent a que algunas palabras clave no son
reconocidas por algunos navegadores (cuant o más ant iguo sea el navegador menos palabras clave
reconocerá):
<ht ml> <head> <t it le>Port al web - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
* {margin:0; padding:0; font -family: sans-serif;}
div{ border-st yle:solid; border-widt h:1px;
height : 95px; widt h: 240px;
margin:10px; background-color:yellow;
font -size: 24px; t ext -align:cent er;}
</ st yle>
</ head>
<body>
<div st yle=" float :left ; border-st yle:none; border-widt h:0; background-color:whit e;" >
<div st yle=" cursor: url(ht t p:/ / cursors2.t ot allyfreecursors.com/ t humbnails/ mickey-mouse2.gif), w ait ;" >Url (wait si falla) </ div>
<div st yle=" cursor:none;" >none </ div>
<div st yle=" cursor:cont ext -menu;" >cont ext -menu (falla en varios navegadores) </ div>
<div st yle=" cursor:help;" >help </ div>
<div st yle=" cursor:point er;" >point er </ div>
<div st yle=" cursor:progress;" >progress </ div>
<div st yle=" cursor:wait ;" >wait </ div>
Propiedad cursor CSS. Efectos sobre el puntero del ratón.
<div st yle=" cursor:cell;" >cell </ div>

<div st yle=" cursor:crosshair;" >crosshair </ div>
<div st yle=" cursor:t ext ;" >t ext </ div>
<div st yle=" cursor:row-resize;" >row-resize </ div>
</ div>
<div st yle=" cursor:alias;" >alias </ div>
<div st yle=" cursor:copy;" >copy </ div>
<div st yle=" cursor:move;" >move </ div>
<div st yle=" cursor:no-drop;" >no-drop </ div>
<div st yle=" cursor:not -allowed;" >not -allowed </ div>
<div st yle=" cursor:all-scroll;" >all-scroll </ div>
<div st yle=" cursor:col-resize;" >col-resize </ div>
<div st yle=" cursor:s-resize;" >s-resize </ div>
<div st yle=" cursor:nw se-resize;" >nw se-resize </ div>
<div st yle=" cursor:zoom-in;" >zoom-in </ div>
<div st yle=" cursor:zoom-out ;" >zoom-out </ div>
</ div>
</ body>
</ ht ml>
EJERCICIO
a) Deben exisit ir dos cont enedores (div1, div2) sit uados en horizont al, cada uno con margin 25px en
t odas direcciones, sin relleno, ancho de 200 píxeles, alt ura de 300 píxeles y borde sólido de 5 píxeles de
anchura con color de borde violet a.
b) El div 1 debe cont ener un t ext o con varios links (et iquet a <a> de ht ml). Al pasar el cursor sobre
cualquiera de los links dent ro del div1 el cursor deberá ponerse en modo help (es decir, se verá un
pequeño int errogant e junt o al cursor).
c) El div 2 debe cont ener una imagen con anchura 300 píxeles y alt ura igual o superior a 200 píxeles. La
imagen debe a su vez ser un link a ot ro document o HTM L al que denominamos document o 2 y que
debe abrirse en una nueva pest aña cuando se pulse sobre la imagen. Al pasar el cursor sobre la imagen
el cursor deberá ponerse en modo zoom-in, es decir, most rar una lupa con un pequeño + en su int erior.
En el document o 2 debemos t ener la misma imagen pero con mayor t amaño, por ejemplo 600 píxeles
de anchura. Ant es de crear el código t endrás que preparar las imágenes: part ir de una imagen con un
t amaño más amplio, y con la ayuda de cualquier programa de edición de imágenes crear su gemela con
menores dimensiones.

Comentario
os condicionale
es CSS. Compat ibilidad de nav
vegadores.
COM ENTA
ARIOS COND
DICIONALES CSS
Con el paso de los año

os y la evolu
ución de los lenguajes
l y t ecnologías empleados
e e
en desarrollo
os web hay
un fact or que ha perrmanecido como un pro
oblema: las diferent
d es fo
ormas de intt erpret ar o most
m rar el
código de
e los dist int os
o navegado res. Una t éccnica creada por M icroso
oft basada e
en condicion
nales se ha
venido ussando para t rat
r ar de corrregir problem
mas específic
cos de ciert o s navegadorres.
Las perso nas que t rab

bajan en dessarrollos web
b est án acos
st umbrados a t ener que lidiar con es
st e t ipo de
problema
as. No t odo
os los naveg
gadores responden igu al. Algunos navegadore
es (al meno
os en sus
en o t rat an de cumplir en
versiones más moderrnas) cumple e t odo lo posible
p el estt ándar defin
nido por la
anización en
W3C, orga ncargada de definir
d el estt ándar CSS. Ot
O ros navega
adores cump
plen la mayo r part e del
est ándar pero no responden
r b
bien con allgunas prop
piedades o caract eríst iccas. Además algunos
navegado
ores incorporran caract erííst icas part iculares propia
as, que no se
e encuent ran
n dent ro del est ándar.
Cuando se
e est á realizando un dessarrollo web , es frecuentt e realizar p ruebas en diist int os nave
egadores y
en dist intt as versioness. No se pue
eden probar t odos los na
avegadores y t odas las vversiones po
orque sería
imposible
e, pero los de
esarrolladore
es web suele
en t ener un conjunt
c o de navegadores
n s y versiones
s para t est .
Uno de lo
os navegadorres que hist óricament
ó e ha
h venido da
ando más pro
oblemas es e
el Int ernet Explorer de
M icrosoftt , aunque ha
ay que decirr que en lass últ imas ve
ersiones se han
h realizad o mejoras y cada vez
t iende a cumplir
c mejo
or los est ánd ares.
Para perm
mit ir a los prrogramadore
es y diseñado nar los prob lemas o dife
ores solucion erencias espe
ecíficas de
Int ernet Explorer,
E M iccrosoft creó un mecanissmo de “ filt ro” mit e definir rreglas específicas para
r que perm
navegado
ores concret os.
o
En prime
er lugar vea
amos en qu
ué puede co
onsist ir un problema de
d dist int as int erpret ac
ción ent re
navegado
ores. Para ell o hemos esccrit o est e cód
digo HTM L y el CSS en un n el nombre adecuado
n archivo con
y hemos realizado
r un t est para co mprobar la visualización
v n en dos nave
egadores dist int os:
<ht ml>
<head>
<t it le>Portt al web - apren
nderaprogramar.com</ t it le> <met
< a charset ="" ut f-8" >
pe=" t ext/ css" h ref=" CU01055D
D_A.css" >
</ head>
<body>
<div id=" t xt
x Cabecera" ><h
h1>aprenderap
programar.com<
</ h1></ div>
</ body>
</ ht ml>
om, 2006-2029
Comentario
os condicionale
es CSS. Compat ibilidad de nav
vegadores.
/ * Curso CSS
ar.com* /
* {font -fam
mily: arial;}
#t xt Cabecera {widt h: 500
0px; margin: 0 aut
a o; padding: 10px; border: solid
s 2px; t ext -a
align: cent er;
t ext -shado
ow: 2px 2px 12p
px red, -6px -6p
px 12px blue ;}
Est a prueba en concr et o la hemo

os hecho con
n el navegado
or Firefox (versión act ua
al) y con un navegador
n
Int ernet Explorer
E de hace
h unos 12 años (est a es una vers
sión ant igua, pero aquí no queremo
os ent rar a
obre los navvegadores, simplement e queremos poner un ejjemplo de
discut ir sobre las verrsiones o so
n el mismo código
cómo con c se pu eden obt ene
er visualizaciiones dist intt as y ent end er que est o puede ser
un proble
ema para lo
os programa
adores y diseñadores web.
w Podríam
mos t ener p roblemas de
e dist int as
visualizaciones t ambié
én ent re navvegadores modernos).
m A comprobar el result ad
Al do de visualiz
zación nos
ncont rado co
hemos en on est as diferrencias princcipales:
a) Un navegadorr muest ra el efect o t ext -shadow mient ras que el ot ro no.

b) Un navegado
or alinea la caja
c en el cent
c ro de la pant alla miient ras que el ot ro lo alinea
a a la
izzquierda de l a pant alla.
c) Un navegado r muest ra u n mayor esp
pacio superio
or de relleno ext o dent ro de la caja
o sobre el t e
m
mient ras que el ot ro muest ra menos espacio
e de re
elleno.
Para anallizar un prob

blema como
o el de t ext -shadow
- o es preguntt arse: ¿sopo rt an est os
un paso lógico
navegado
ores la propie
edad t ext -sh
hadow? Es de
ecir, ¿est án preparados
p para int erpr et arla correc
ct ament e?
Da la imp
presión de que
q el segun
ndo navegad or no. De t odas
o formass, para comp
probarlo rea
alizamos la
búsqueda ow mozilla d eveloper” en
a “ t ext -shado n int ernet y comprobamo
c os lo siguien t e:
Aquí nos indica para l a propiedad t ext -shadow

w la compat i bilidad de lo
os navegadorres y nos dice que est a
propiedad
d es admit id
da en Chrom
me desde la
a versión 2.0.158.0, en Firefox dessde la versió
ón 3.5, en
om, 2006-2029
Comentarios condicionales CSS. Compatibilidad de navegadores.
Int ernet Explorer desde la versión 10, en Opera desde la versión 9.5 y en Safari desde la versión 1.1.
Est o nos confirma lo que sospechábamos: el navegador que no muest ra el efect o t ext -shadow no lo
hace porque no est á preparado para int erpret ar est a propiedad, debido a su ant iguedad.
Es convenient e realizar comprobaciones básicas de est e t ipo ant es de dar por hecho que “ la culpa es
del navegador” , ya que a veces la culpa no es del navegador, sino del programador o diseñador que ha
creado un código inadecuado.
Una vez conocemos el problema podemos elegir ent re dos opciones: corregirlo para que la visualización
sea correct a en el navegador donde hemos det ect ado el problema, o ignorarlo. Si lo ignoramos la
página web no se verá correct ament e en ese navegador, pero como hemos coment ado no se pueden
comprobar ni corregir los problemas de visualización en t odos los navegadores. Hay navegadores muy
ant iguos en los que no se suelen chequear ni corregir problemas de visualización porque se consideran
obsolet os y que hay muy poca gent e que pueda est ar usándolos todavía. No t iene sent ido aspirar a que
nuest ros desarrollos web se vean correct ament e en t odos los navegadores porque est o nos llevaría
semanas o meses de t rabajo y t endría poco int erés práct ico: lo normal es cent rarse en que la página se
vea bien en los principales navegadores en versiones relat ivament e modernas (hast a qué versión
comprobar es algo que cada desarrollador o equipo de desarrollo t iene que decidir).
VARIAS FORM AS DE SOLUCIONAR UN PROBLEM A
Con frecuencia exist en varias formas de solucionar un problema. Vamos a referirnos, a modo de
ejemplo, al problema de que la caja no se muest re cent rada en uno de los navegadores que hemos
probado. A modo de comprobación, realizamos la búsqueda “ margin css mozilla developer” en int ernet
y nos vamos a la página de document ación de M ozilla correspondient e. En la part e denominada
“ Browser compat ibilit y” aparece que para Int ernet Explorer el Basic support fue int roducido en la
versión 3.0 mient ras que para aut o value indica que la versión en que se int rodujo fue 6.0 (st rict mode).
Est o nos da una pist a sobre una forma de solucionar el problema: la indicación de st rict mode quiere
decir que Int ernet Explorer no realiza el cent rado con margin: 0 aut o; except o si en la cabecera del
document o HTM L se hace una declaración de que el document o est á definido en HTM L st rict . Para
corregir el problema escribiríamos est a línea como primera línea del document o HTM L:
<!DOCTYPE HTM L PUBLIC " -/ / W3C/ / DTD HTM L 4.01/ / EN" " ht t p:/ / www.w3.org/ TR/ ht ml4/ st rict .dt d" >
Una vez hecho est o comprobaríamos que la caja ya aparece cent rada. Quizás est a solución pueda
result arnos adecuada. O quizás no, porque no queramos realizar est e t ipo de declaración.
También es posible que no nos demos cuent a de que el problema se podría resolver de est a manera.
En caso de que no nos result e una solución adecuada o que se nos pase por alt o la posibilidad de usar
est a solución, normalment e dispondremos de varias alt ernat ivas para lograr un mismo objet ivo. Exist en
en int ernet muchas webs donde se habla de t écnicas CSS para resolver problemas o conseguir un
objet ivo de dist int as maneras. No t iene sent ido aspirar a conocerlo t odo ni a saber t odos los “ t rucos” o
alt ernat ivas posibles. Sí será convenient e que nos vayamos const ruyendo nuest ro pequeño repert orio
de t rucos o formas de solución y que nos acost umbremos a buscar en int ernet formas de solucionar
problemas.
FILTROS CSS
Se habla de “ filt ro CSS” en alusión a alguna inst rucción o mecanismo que permit a conocer qué
navegador, versión o t ipo de disposit ivo (t ablet , smart phone, et c.) es en el que se va a visualizar la
página web y aplicar unas reglas específicas para ese caso.
Lo ideal sería no t ener que usar filt ros, sino que unas solas reglas nos resolvieran t odos los problemas,
pero en la práct ica a veces no queda más remedio que recurrir a diversas est rat egias para lograr
mejorar la visualización en navegadores o disposit ivos que present an problemas de visualización y no
queremos dejar at rás. No obst ant e, t en present e una cosa: cuant os menos filt ros, t rucos o
especificidades ut ilices mejor, el código será más sencillo y por t ant o más fácil de mant ener y de
corregir.
Exist en diversos t ipos de filt ros y diversas t écnicas. Vamos a coment ar ahora una de ellas, que se ha
venido usando para resolver problemas de visualización específicos del navegador Int ernet Explorer de
M icrosoft , denominada t écnica de “ coment arios condicionales para Int ernet Explorer” .
La forma de aplicar est os filt ros se basa en indicar con un condicional unas reglas específicas a cargar y
aplicar exclusivament e para ese navegador (o conjunt o de navegadores). Las reglas se escriben dent ro
de las et iquet as <head> … </ head> del document o HTM L y est os ejemplos facilit an su comprensión:
Ejemplo Significado
 archivo indicado. Se puede especificar IE 7, IE 8, IE 9,
IE 10, IE 12, IE 15, IE 20, IE 30… es decir, cualquier
versión que queramos.
 aplicar las reglas definidas en el archivo indicado.
 aplicar las reglas definidas en el archivo indicado. gt e
= great er t han or equal t o
 superiores aplicar las reglas definidas en el archivo
indicado. gt = great er than
 concret ament e para esas versiones aplicar las reglas
definidas en el archivo indicado.
 concret ament e para esas versiones aplicar las reglas
definidas en el archivo indicado.
Not a: no deben exist ir espacios sobrant es dent ro de los t ags porque en ese caso puede no int erpret arse
el código.
Ahora veamos cómo sería la aplicación concret a para resolver el problema que hemos descrit o
ant eriorment e.En el código HTM L añadiríamos el fragment o condicional de la siguient e manera:
<ht ml>
<head>
<t it le>Port al web - aprenderaprogramar.com</ t it le> <met a charset =" ut f-8" >
<link rel=" st ylesheet " t ype=" t ext/ css" href=" CU01055D_A.css" >

</ head>
<body>
<div id=" t xt Cabecera" ><h1>aprenderaprogramar.com</ h1></ div>
</ body>
</ ht ml>
Fíjat e que aquí no hemos incluido la declaración de DOCTYPE que indicamos ant es. Vamos a suponer
que no queremos incluir est a declaración (o que no nos hemos dado cuent a de que podemos usar est o
para resolver el problema de cent rado de la caja).
Ahora en un archivo css independient e del principal, al que vamos a denominar ie7.css, incluiremos
est as reglas:

body {t ext -align:cent er;}
#t xt Cabecera { background-color: #FA8258; }
h1 { padding: 15px 5px 5px 5px;}
Ahora t enemos 3 archivos. El archivo ht ml del document o ht ml, el archivo CSS principal (en nuest ro
caso lo hemos llamado CU01055D_A.css) y el archivo CSS específico para los navegadores que cumplen
el condicional indicado (en nuest ro caso el condicional es que el navegador sea Int ernet Explorer7 y el
archivo lo hemos denominado ie7.css). Las t res reglas definidas en el archivo ie7.css se aplicarán sólo
cuando el navegador donde se vaya a most rar la página web sea el que hemos indicado en el
condicional. Las reglas que aplicamos son:
a) body {t ext -align:cent er;} , alineamos al cent ro los element os dent ro de body. Est a regla
posiblement e no la usaríamos en un desarrollo web real porque en general no nos va a
int eresar alinear t odos los element os dent ro de body al cent ro (si lo hacemos, t endríamos que
est ablecer alineaciones específicas para el rest o de element os cuando no quisiéramos que
est én cent rados). Pero para est e ejemplo concret o nos sirve.
b) #t xt Cabecera {background-color: #FA8258;} , a falt a del efect o t ext -shadow aplicamos como
sust it ut o un color de fondo. No logramos el mismo efect o que con t ext -shadow, pero
supondremos que es la alt ernat iva que elegimos ent re las varias posibles. Ot ra alt ernat iva
sencilla sería usar una imagen de fondo. Podríamos asemejar más el aspect o al que genera t ext -
shadow, pero no vamos a ent ret enernos en ello.
c) h1 { padding: 15px 5px 5px 5px;}, ampliamos el relleno para conseguir una visualización lo más
parecida a lo que nosot ros deseamos.
Ten en cuent a que hablamos de “ visualización parecida” , similar, et c. ya que no podemos o no

queremos det enernos a buscar “ la precisión absolut a” porque est o no t iene sent ido.
El result ado ahora obt enido lo comprobamos a cont inuación. Gracias al filt ro hemos cent rado la caja,
adecuado su relleno y aunque no hemos igualado el efect o de sobra al menos hemos puest o un color
de fondo:
M ÁS FILTROS CSS
Hemos coment ado una t écnica de filt rado concret a, pero hay ot ras t écnicas. Algunas de esas ot ras
t écnicas las veremos más adelant e dent ro del curso. Ten en cuent a que las t écnicas de filt rado van
evolucionando con el t iempo: algunas t écnicas dejan de ser út iles o válidas mient ras que surgen ot ras
nuevas. En est e curso no nos int eresa conocer las diferent es t écnicas de filt rado para los dist int os
navegadores, sino comprender la problemát ica exist ent e en t orno a las diferencias ent re navegadores y
el concept o de filt rado como t écnica que puede ayudar a solucionar problemas específicos.
EJERCICIO
Busca en alguna página web o blog de int ernet una t écnica de filt rado, aplícala y explica su ut ilidad.

Prefijos CSS
S específicos de
e navegadores.
PREFIJOS CSS DE NAV

VEGADORES
n prefijos de navegador o prefijos com

Se llaman merciales (ve
endor prefixes) a un preffijo que se ant epone a
una regla
a CSS dest in
nado a que dicha regla sea leída y aplicada exclusivamen
e nt e por un navegador
n
o Chrome) p ero no por el
concret o (por ejemplo e rest o de na
avegadores. El uso de pr efijos suele aplicarse
a a
des que se encuent ran en fase experriment al o qu
propiedad ue aún no se han convertt ido en un es
st ándar.
Al igual q ue los come

ent arios con dicionales q ue se han ve do específicament e para M icrosoft
enido usand
Int ernet Explorer,
E loss prefijos so
on un t ipo d e filt ro que permit e qu
ue una inst ru
ucción CSS se
s aplique
específica
ament e a un
n navegado r o familia de navegad
dores pero no
n a los de
emás. Sin em
mbargo, a
diferencia
a de los co
oment arios condicionale
c es, exist en prefijos
p esp ecíficos par a t odos los
s t ipos de
navegado
or. A cont inu
uación se ind
dican los pre
efijos más ha
abit uales y seguidament
s t e pasaremo s a ver un
ejemplo.
P
Prefijo Familia
a de navega dores a los que
q aplica
-w
w ebkit- C
Chrome, Safa
ari, Android, iOs
-
-moz- Fi refox
-o- O
Opera
-ms- M icrosoft In
nt ernet Explo
orer
Veamos un
u ejemplo de uso que es quizás lo
o que mejorr nos haga comprender
c para qué se
e usan los
prefijos. Escribe est e código HT
TM L y CSS (est ableciendo el nom
mbre de arcchivo adecu
uado) que
procedem ar a cont inuación:
mos a explica
om, 2006-2029
Prefijos CSS específicos de navegadores.
<ht ml>
<head>
<link rel=" st ylesheet " t ype=" t ext/ css" href=" CU01056D_A.css" >
</ head>
<body>
<div class=" fondoGradient " ><h1>aprenderaprogramar.com</ h1></ div>
</ body>
</ ht ml>

.fondoGradient {
t ext -align:cent er; w idt h: 500px; height : 9em;
line-height : 4.5em; margin: 0 aut o;
border: solid 3px;
background-color: #F4FA58; / * Navegadores que no acept an el gradient e de fondo* /
background-image: -w ebkit -gradient (linear, left t op, left bot t om, from(#F4FA58), t o(#FF0000)); / * Chrome, Safari versiones
más ant iguas * /
background-image: -w ebkit -linear-gradient (t op, #F4FA58, #FF0000); / * Chrome, Safari versiones relat ivament e modernas * /
background-image: -moz-linear-gradient (t op, #F4FA58, #FF0000); / * Firefox versiones relat ivament e modernas* /
background-image: -o-linear-gradient (t op, #F4FA58, #FF0000); / * Opera versiones relat ivament e modernas* /
background-image: linear-gradient (t o bot t om, #F4FA58, #FF0000); / * Chrome, Firefox, IE, Opera versiones act uales * /
}
Vamos a coment ar el código CSS que hemos ut ilizado y que a primera vist a podremos calificar como
“ poco elegant e” , ya que como vemos hay una aparent e repet ición de inst rucciones con dist int os
prefijos o variant es de sint axis. La repet ición de código nunca es deseable porque dificult a la
comprensión y mant enimient o de nuest ros desarrollos w eb. No obst ant e, t enemos que est ar
preparados para int erpret ar est e t ipo de sit uaciones cuando est emos analizando una página w eb.
También podemos usar código de est e t ipo cuando consideremos que es razonadament e necesario,
pero debemos evit ar su uso cont inuado y sin reflexión.
El código CSS define una clase donde el t ext o del element o se alinea al cent ro mediant e la propiedad
t ext -align, la anchura del element o se est ablece en 500 pixeles, y su anchura en 9 veces la alt ura de
let ra de aplicación. Para cent rar vert icalment e el t ext o se ha usado line-height . Se ha est ablecido un
borde de 3 pixeles y un color de fondo con código #F4FA58 que es un t ono de amarillo mediant e la
propiedad background-color.
A cont inuación se escribe una propiedad background-image en dist int as ocasiones. Recordar que la
propiedad background-image coloca una imagen encima del background-color. Por t ant o si la imagen
ocupa t odo el cont enedor, el color de fondo quedará ocult o. La primera línea que encont ramos es:
background-image: -w ebkit -gradient (linear, left t op, left bot t om, from(#F4FA58), t o(#FF0000)); Est a
línea aplica el prefijo -w ebkit - a una propiedad denominada gradient que crea una imagen de fondo
t ipo “ degradado de colores” a part ir de la definición de los colores que deben int ervenir y de ot ros
parámet ros. El prefijo w ebkit significa que est a línea est á dirigida a navegadores Chrome, Safari,
Android, iOs y que el rest o de navegadores ignorarán lo que aquí se indique. Sin embargo en la
siguient e línea volvemos a encont rar el prefijo w ebkit de est a manera:
background-image: -w ebkit -linear-gradient (t op, #F4FA58, #FF0000); ¿Por qué se repit e dos veces el
prefijo w ebkit ?
Como hemos dicho, los prefijos se usan normalment e para propiedades experiment ales, que est án en
fase de diseño o prueba. La sint axis para la propiedad con el prefijo -w ebkit - la definen los
desarrolladores de est os navegadores y a lo largo del t iempo es posible que cambien la forma en que
debe escribirse una regla experiment al. Ello da lugar a sit uaciones como est a: exist e una sint axis que se
venía usando en algunas versiones de est os navegadores (que es la definida en la primera línea). Luego
la sint axis fue cambiada y se empezó a usar ot ra diferent e (que es la definida en la segunda línea). Para
que la página se visualice como esperamos t ant o en navegadores Chrome más ant iguos como en
navegadores Chrome más modernos, se incluyen ambas formas de la sint axis. El navegador ignorará
aquella que no es adecuada y ut ilizará la que puede int erpret ar correct ament e.
A cont inuación nos encont ramos con líneas que son exclusivament e de aplicación a navegadores
Firefox (prefijo -moz-) y Opera (prefijo -o-).
Finalment e nos encont ramos con est a línea:
background-image: linear-gradient (t o bot t om, #F4FA58, #FF0000); Aquí podemos comprobar que no
aparece ningún prefijo. ¿Por qué? Porque a part ir de una det erminada versión est a propiedad ha
dejado de considerarse experiment al y se ha convert ido en una propiedad “ est ándar” (al menos para
algunos navegadores). Ahora para que los usuarios que usen navegadores en los que est a propiedad se
ha normalizado aplicamos est a línea.
Con est as repet iciones de la misma regla con diferent es prefijos o sint axis buscamos lograr que la
visualización sea correct a en:
- Las versiones de navegadores que int rodujeron est a propiedad como experiment al por primera
vez.
- Las versiones de navegadores que mant uvieron la propiedad como experiment al pero fueron
int roduciendo cambios en la sint axis.
- Las versiones de navegadores que dejaron de considerar a est a propiedad como experiment al y
la empezaron a emplear como una propiedad normalizada.
De est e modo t rat amos de cubrir el mayor rango de navegadores posibles para que el mayor número
de usuarios posible vean la página w eb como nosot ros esperamos. Ahora bien, ¿qué ocurre con
usuarios que empleen versiones de navegadores en los que est a propiedad no exist ía ni siquiera como
experiment al? Est os navegadores ignorarán la sint axis incluso aunque exist a un prefijo dirigido a ellos
porque no est á preparados para reconocer esas inst rucciones. Al ignorar background-image aplicarán la
propiedad background-color, que sí es reconocida por t odos los navegadores. El efect o no será el
mismo, pero es la alt ernat iva que se ha dado aquí.
En los navegadores que sí reconozcan el gradient e el result ado será similar a est e:
BUEN USO Y M AL USO DE PREFIJOS
A la hora de usar propiedades experiment ales y aplicar prefijos conviene plant earse cuáles son las
vent ajas y los inconvenient es exist ent es para cada caso part icular. Supongamos que el ejemplo ant erior
simplement e t rat aba de aplicar una imagen con gradient e de color al fondo de una caja en la página
w eb. ¿Qué vent ajas e inconvenient es present aría el uso de la propiedad linear-gradient ?
Vent ajas:
- Posiblement e el t iempo de carga de la página sea más rápido usando est a propiedad que
usando una imagen. Con est a propiedad el navegador simplement e t iene que renderizar
(dibujar) a part ir de una inst rucción, mient ras que con una imagen es necesario descargar el
archivo y cada descarga de archivo implica un pequeño consumo de t iempo.
Inconvenient es:
- Al ser una propiedad con poca t rayect oria hist órica las diferent es versiones de navegadores
requieren de dist int as sint axis, lo que obliga a la repet ición de varias líneas de código con el
mismo fin.
- Podemos t ener dudas de que la visualización vaya a ser buena en la mayor part e de disposit ivos
y navegadores, ya que algunos de ellos (en especial los más ant iguos) no reconocerán est a
propiedad.
¿Qué será mejor ent onces, aplicar o no aplicar est e t ipo de propiedades? En principio t e
recomendaríamos que siguieras est os crit erios:
- Si dispones de una alt ernat iva alt ament e est andarizada, simple, que permit e alcanzar el
objet ivo plant eado y que evit a la repet ición de código, úsala y prescinde de propiedades
experiment ales.
- Si consideras que t e aport a más vent ajas que inconvenient es y t e decides a usarla, t rat a de
cubrir el mayor rango posible de navegadores y versiones y est ablece una regla “ de
salvaguarda” , es decir, una regla que permit a que la página w eb se vea razonablement e bien si
la propiedad que est ás int ent ando aplicar no es admit ida por un navegador concret o. En
nuest ro ejemplo ant erior la regla de salvaguarda era background-color, alt ernat iva en caso de
que fallara la aplicación de background-image.
Respect o al uso de prefijos, úsalos sólo cuando sean realment e necesarios. Aquí hemos vist o cómo se
aplica el prefijo a una propiedad, pero t ambién se aplican en ocasiones a select ores o valores. Ant es de
aplicar prefijos infórmat e en páginas que den inform ación de calidad como M ozilla Developer Net w ork.
Ot ra cuest ión a valorar es si merece escribir las distint as sint axis para dar soport e a versiones ant eriores
de navegadores. Cuando la propiedad se ha convert ido en un est ándar, algunos programadores y
diseñadores opt an por escribir simplement e la sint axis est ándar junt o a la salvaguarda y se olvidan de la
repet ición de dist int as sint axis para versiones ant eriores de navegadores. Es decir, en el ejemplo
ant erior en lugar de las diversas líneas escribiríamos simplement e:
background-color: #F4FA58;
background-image: linear-gradient (t o bot t om, #F4FA58, #FF0000);
Es decir, se sint et iza en dos línea: la salvaguarda y la sint axis est andarizada. En algunos casos ni siquiera
será necesario la salvaguarda. Por ejemplo imagínat e que pret endes aplicar un borde redondeado y
usas una propiedad que ha sido experiment al hast a hace poco sin aplicar salvaguarda. Los navegadores
que reconozcan la regla most rarán el borde redondeado, mient ras que los que no la reconozcan lo
most rarán rect angular. Si est e no es un aspect o clave y no t e preocupa, puedes ut ilizar una sola línea y
dejar que se muest re de una forma u ot ra según el navegador que est é empleando el usuario.
Como ves exist en dist int as alt ernat ivas y recursos para resolver problemas o conseguir objet ivos, no
hay un crit erio único. Algunos equipos de t rabajo siguen prefiriendo usar imágenes ant es que
propiedades avanzadas porque piensan que así se garant izan la misma represent ación en t odos los
navegadores, mient ras que ot ros equipos opt an por el uso de nuevas propiedades considerando que
aport an más vent ajas que inconvenient es. Con el t iempo irás formándot e t us propios crit erios y formas
de act uar y razonar en lo relat ivo al uso de CSS. No pret endas hacer las cosas perfect as, simplement e
ocúpat e de hacer que las cosas funcionen bien aunque la codificación no sea la mejor posible.
M ÁS FILTROS CSS
Hemos coment ado ya dos t écnicas de filt rado, una basada en coment arios condicionales y ot ra en
prefijos, pero hay ot ras t écnicas. Algunas de esas otras t écnicas las veremos más adelant e dent ro del
curso.
EJERCICIO
Busca en alguna página w eb o blog de int ernet una t écnica de filt rado basada en prefijos para el
navegador que est és ut ilizando. Aplícala y explica su ut ilidad. Para comprobar si t u código y respuest as
son correct as puedes consult ar en los foros aprenderaprogramar.com.

Columnas con
c CSS: column
n-count, colum
mn-w idth, colum
mn-rule, etc.
COLUM NA
AS EN CSS
Aunque con las herramient as que

e ya conocem
mos somos capaces
c de crear column as, CSS ha in
nt roducido
ades que prret enden faccilit ar el dise
una serie de propieda eño de eleme
ent os w eb e
en columnas
s. Vamos a
est udiar la
as propiedad
des column-ccount , colum
mn-widt h, co lumns, colum
m-gap y colu
umn-rule.
Ten en cu
uent a que esst as propied ades no son
n soportadas
s por muchass de las verssiones de navegadores
que no so
on recient ess, e incluso en
e algunos de
d los recien
nt es t odavía se considerran experime
ent ales, lo
que oblig
ga al uso d e prefijos específicos
e d navegado
de or, aunque algunos navvegadores ya
y las han
int roducid
do como est ándar
á y no re
equieren de prefijo.
AD COLUM N-COUNT
PROPIEDA N
PROPIED
DAD CSS colu
um-count
Perm
mit e definir el
e número de columnas co n que se deb
be most rar el cont enido
edad
den t ro de un elem
ment o.
Valor po
or defecto aut o
Aplicable a Con
nt enedores co mo elemento
os block, t able
e, t able-cell, ett c.
Valores posibles parra Un número

n ent erro igual o supe
erior a 1
opiedad
esta pro erit (se hereda
e).
Ejemplos .myCont ainer {co

olumn-count : 3;}
aprende
eraprograma
ar.com .myCont ainerSP { column-coun
nt : 5;}
PROPIEDA
AD COLUM NS
N
Est a prop
piedad es un
n short and que permit e especificarr el número
o de column
nas bien en forma de
número de
d columnass (lo que serría equivalen
nt e a usar column-coun
c nt ), bien indiicando una unidad de
medida (l o que sería equivalent
e e a usar colum
mn-w idt h).
Ejemplo: myBox {colu mns: 3; }
om, 2006-2029
Columnas con CSS: column-count, column-width, column-rule, etc.
PROPIEDAD COLUM N-W IDTH
PROPIEDAD CSS colum-width
Permit e sugerir un ancho de columna deseado, aunque su aplicación no será

Función de la propiedad est rict a si exist e column-count , que induce un ancho basado en el número de
columnas especificado.
Valor por defecto aut o
Aplicable a Cont enedores como element os block, t able, t able-cell, et c.
aut o (el número de columnas derivará del est ablecido con column-count )
Una unidad de medida válida en CSS
esta propiedad
Ejemplos .myCont ainer {column-w idt h: 150px;}

aprenderaprogramar.com .myCont ainerSP { column-w idt h: 5em;}
En presencia de column-count , puede omit irse est a propiedad ya que column-count induce un ancho
de columna basado en el número de columnas indicado. Puede ent rar en conflict o con column-count si
los valores indicados son incompat ibles ent re sí. En ausencia de column-count , puede inducir un
número de columnas en base al ancho especificado. Si nos fijamos, column-count y column-w idt h
vienen siendo dos formas de expresar lo mismo.
PROPIEDAD COLUM N-GAP
Est a propiedad sirve para definir un espacio de separación ent re columnas. Ejemplo: column-gap: 20px;
En algunos navegadores es necesario el uso de prefijo específico de navegador.
PROPIEDAD COLUM N-RULE-W IDTH, COLUM -RULE-STYLE, COLUM -RULE-COLOR, COLUM N-GAP
Est as propiedades t ienen por finalidad est ablecer el ancho, st yle y color de la línea de separación ent re
columnas.
column-rule-w idt h funciona de forma análoga a border-w idt h (valor por defect o medium, y valore
posibles t hin, medium, t hick ó una unidad de medida válida CSS).
column-rule-st yle funciona de forma análoga a border-st yle.
column-rule-color funciona de forma análoga a border-color.
PROPIEDAD SHORTAND COLUM N-RULE
Est a propiedad permit e est ablecer los valores de column-rule w idt h, column-rule-st yle y column-rule-
color en una sola línea. Ejemplo: colum-rule: 3px solid blue;
EJEM PLO DE DISEÑO CON COLUM NAS
Escribe est e código y visualiza sus result ados. Con los cont enidos que hemos explicado a lo largo del
curso debes ser capaz de int erpret ar t odo el código que hemos incluido, por ejemplo por qué result a de
int erés aplicar la propiedad w ord-w rap, por qué usamos prefijos y por qué hemos dejado coment ada la
línea correspondient e a column-w idt h. También debes ser capaz de valorar las vent ajas y desvent ajas
que puede t ener usar est e t ipo de propiedades.
<ht ml>
<head>

* {font -family: verdana, sans-serif; margin:0; background-color:#FAEBD7;}
h1, h2 {t ext -align:cent er;}
.cont ainer2{
w ord-w rap: break-w ord; font -size: 12px;
w idt h: 450px; border: solid 5px red;
margin: 10px aut o 10px aut o; padding: 10px; line-height : 1.5em;
-moz-column-count : 3; -w ebkit -column-count : 3; column-count : 3;
/ * -moz-column-w idt h: 130px; -w ebkit -column-w idt h: 130px; colum-w idt h: 130px;* /
-moz-column-gap: 20px; -w ebkit -column-gap: 20px; colum-gap: 20px;
-moz-column-rule: 3px solid blue; -w ebkit -column-rule: 3px solid blue;
colum-rule: 3px solid blue;}
</ st yle> </ head>
<body>
<h1>Columnas con CSS</ h1>
<h2>aprenderaprogramar.com</ h2>
<div class=" cont ainer2" >

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Cursos de programación
en diferent es lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTM L, CSS, Javascript y mucho más. Cursos de programación
en diferent es lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTM L, CSS, Javascript y mucho más. Cursos de programación
en diferent es lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTM L, CSS, Javascript y mucho más.
CSS no es un lenguaje de programación propiament e dicho, aunque a veces se lo denomina lenguaje de programación
coloquialment e. CSS no es un lenguaje de programación propiament e dicho, aunque a veces se lo denomina lenguaje de
programación coloquialment e. CSS no es un lenguaje de programación propiament e dicho, aunque a veces se lo denomina
lenguaje de programación coloquialment e.
Cursos de programación en diferent es lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTM L, CSS, Javascript y mucho más.
Cursos de programación en diferent es lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTM L, CSS, Javascript y mucho más.
</ div>
</ body>
</ ht ml>
El result ado que se obt iene en un navegador que acept e est as propiedades será similar a est e:
EJERCICIO
Analiza el código que most ramos a cont inuación, aplícalo a un document o HTM L y visualiza los
result ados, y responde a las pregunt as.
.cols3 {
-w ebkit -column-count : 3; -w ebkit -column-gap: 20px; -w ebkit -column-rule: 1px solid #000;
-moz-column-count : 3; -moz-column-gap: 20px; -moz-column-rule: 1px solid #000;
column-count : 3; column-gap: 20px; column-rule: 1px solid #000;
}
.cols3 h1 { -w ebkit -column-span:all; -moz-column-span:all; column-span:all;

}
Explica paso a paso a qué da lugar cada inst rucción o fragment o de código (ejemplo: .cols3 indica que
se aplicarán los est ilos definidos a t odos los element os ht ml cuyo at ribut o class sea igual a cols3, -
w ebkit -column-count : 3; se escribe para lograr que …). ¿Qué ut ilidad t iene la propiedad column-span?

Efecto CSS de
d esquinas red
dondeadas con
n border-radius
s.
ESQUINAS REDONDEA
ADAS EN CSS
S
Las cajas CSS son rectt angulares y cuando apliicamos prop iedades com
mo un color o imagen de
e fondo, se
aplican sobre la caj a rect angul ar. Sin emb
bargo, para hacer los diseños w e
eb más at ra
act ivos los
diseñadorres usan esq ndeadas. Estt e efect o an t iguament e no era fácil de consegu
quinas redon uir y había
e fondo con t ransparencia y redonde
que recurrrir a ut ilizar imágenes de eadas u ot rass t écnicas.
Con la pro s ha hecho posible redo

opiedad borrder-radius se ondear las esquinas
e de llas cajas con
n facilidad.
Ten en cu
uent a que estt a propiedad
d no es sopo
ort ada por m uchas de lass versiones d
de navegadorres que no
son recie
ent es, e in cluso en algunos
a de los recientt es t odavía es posible
e que se consideren
c
experiment ales, lo qu
ue obliga al uso
u de prefijo
os específico
os de navega
ador, aunque
e la mayor pa
art e de los
navegado
ores act ualess ya las han in
nt roducido como
c est ánd ar y no requ ieren de pre
efijo.
FORM AS DE ESPECIFI CAR EL REDO

ONDEO
El redond
deo de una esquina
e se p uede especi ficar con un parámet ro “ R” que ind ica el radio del círculo
que se va
v a emplea
ar para gene
erar el redo
ondeo (cuan ande mayor efect o de redondeo
nt o más gra
conseguirremos).
Aunque el
e uso de u n fragment o de círculo bit ual, t amb ién podemo
o es quizás lo más hab os generar
esquinas a part ir de u n fragment o de elipse co
omo vemos en
e la siguien t e imagen.
Cuando u samos un frragment o de os de especi ficar dos parámet ros, un

e elipse hemo n valor horiz
zont al R1 y
un valor vert ical R2. Si R1 y R2 son iguales equivale a usar un sollo valor. Si R1 y R2 son
n dist int os
generamo
os dist int os efect
e os de “ achat
a amient o”
o .
PROPIEDA
AD BORDER--TOP-LEFT-R
RADIUS
om, 2006-2029
Efecto CSS de esquinas redondeadas con border-radius.
PROPIEDAD CSS border-top-left-radius
Permit e redondear la esquina superior izquierda de una caja CSS y definir la

Función de la propiedad forma en que se hace indicando parámet ros que hacen la esquina más o menos
redondeada.
Valor por defecto 0
Una unidad de medida válida CSS (indica radio para el círculo que genera el
redondeo de la esquina superior izquierda, except o si se usa un porcent aje)
Dos unidades de medida válidas CSS (la primera medida indica radio horizont al
esta propiedad
de la elipse a emplear y la segunda medida radio vert ical)
Ejemplos .myCont ainer {border-t op-left -radius: 40px;}

aprenderaprogramar.com .myCont ainerSP { border-t op-left -radius: 40px 20px;}
Si se especifican valores en forma de porcent ajes, se calculan para el radio horizont al en función del
valor w idt h de la caja, y para el radio vert ical en función del valor height de la caja. Si se especifica un
solo porcent aje se calcularán los dos radios: el horizont al en función del ancho y el vert ical en función
del alt o. Por t ant o el uso de porcent aje implica que se aplica el redondeo por elipse.
PROPIEDADES BORDER-TOP-RIGHT-RADIUS, BORDER-BOTTOM -LEFT-RADIUS Y BORDER-BOTTOM -

RIGHT-RADIUS
Est as propiedades funcionan de la misma forma que hemos vist o para border-left -t op-radius. Nos
permit en especificar el redondeo individual de cada una de las esquinas superior derecha, inferior
izquierda o inferior derecha.
PROPIEDAD BORDER-RADIUS (SHORTAND)
PROPIEDAD CSS border-radius
Permit e especificar el redondeo de t odas las esquinas de una caja CSS y definir
la forma en que se debe hacer.
Valor por defecto 0
Una unidad de medida válida CSS (indica radio para el círculo que genera el
redondeo de t odas las esquinas)
PROPIEDAD CSS border-radius
esta propiedad Dos unidades de medida válidas CSS (la primera medida indica radio superior
izquierdo y radio inferior derecho; la segunda medida indica radio superior
derecho e inferior izquierdo)
Tres unidades de medida válidas CSS (la primera medida indica radio superior
izquierdo, la segunda radio superior derecho e inferior izquierdo y la t ercera
radio inferior derecho)
Cuat ro unidades de medida válidas CSS (la primera medida indica radio superior
izquierdo, la segunda radio superior derecho, la t ercera radio inferior izquierdo
y la cuart a radio inferior derecho)
Una a cuat ro unidades de medida / Una a cuat ro unidades de medida (las

unidades a la izquierda de la barra son radio horizont al para el format o de
elipse y las unidades a la derecha de la barra son radio vert ical)
Ejemplos .myCont ainer {border-radius: 40px;}

aprenderaprogramar.com .myCont ainerSP { border-radius: 40px / 20px;}
Si se especifican valores en forma de porcent ajes, se calculan para el radio horizont al en función del
valor w idt h de la caja, y para el radio vert ical en función del valor height de la caja. Si se especifica un
solo porcent aje se calcularán los dos radios: el horizont al en función del ancho y el vert ical en función
del alt o. Por t ant o el uso de porcent aje implica que se aplica el redondeo por elipse.
EJEM PLOS DE USO DE BORDER-RADIUS
curso debes ser capaz de int erpret ar t odo el código que hemos incluido. También debes ser capaz de
valorar las vent ajas y desvent ajas que puede t ener usar est e t ipo de propiedades.
div{ border: 5px solid; height : 60px; widt h: 260px; margin:10px; background-color:yellow;
font -size: 20px; t ext -align:cent er; padding-t op: 20px; word-wrap:break-word; }
h2{margin: 15px 0 -15px 40px;}
</ st yle>
</ head>
<body>
<h2>CSS border-radius aprenderaprogramar.com</ h2>
<div st yle=" border-radius: 5px;" >border-radius: 5px;</ div>
<div st yle=" border-radius: 10px;" >border-radius: 10px; </ div>

<div st yle=" border: double #A52A2A 8px; border-radius: 13em/ 3em;" >border-radius: 13em/ 3em; </ div>
</ div>
<div st yle=" border-t op-left -radius: 40%;" >border-t op-left -radius: 40%; </ div>
<div st yle=" border-radius: 80px 20px;" >border-radius: 80px 20px; </ div>
<div st yle=" border-radius: 60px 20px 5px;" >border-radius: 60px 20px 5px; </ div>
<div st yle=" border-radius: 60px 20px 5px 90px;" >border-radius: 60px 20px 5px 90px; </ div>
<div st yle=" border-radius: 60px/ 20px;" >border-radius: 60px/ 20px; </ div>
<div st yle=" border: solid #A52A2A 5px; border-radius: 50%;" >border-radius: 50%; </ div>
</ div>
</ body>
</ ht ml>
EJERCICIO
En numerosas ocasiones queremos crear un diseño para una página w eb o aplicación parecido al que
nos encont ramos en ot ra página w eb. Supón que has encont rado el siguient e diseño. Crea el código
HTM L y CSS para lograr un result ado lo más parecido posible a lo que se ve en la siguient e imagen,
donde t enemos una t abla con bordes redondeados.
Orient ación:
Crea el código de la t abla en HTM L. Define una clase para la t abla (p.ej. class=" t abla-dest acada" ), define
el element o t head para poner ahí la fila y celdas de encabezado. Define el cont enido de la t abla dent ro
de t body. Define la últ ima fila como t foot .
Busca imágenes en int ernet ó para int roducirlas como símbolo de check o aspa en las casillas
correspondient es.
Vet e aplicando propiedades CSS por part es hast a lograr el efect o deseado.
Not a: no t ienes que conseguir exact ament e el mismo aspect o de la imagen, sólo lo más aproximado
posible.

Efecto CSS de
d sombras 3D
D con box-shado
ow .
EFECTO SOM BRA EN CSS
emos la prop
Ya conoce piedad t ext -tt ransform pa
ara aplicar sombras y ef ect os t ridim ensionales a t ext o, así
como la propiedad border-st
b yle que permit e generar algunos efectt os t ipo som
mbra pero en realidad
bast ant e limit ados. La
L propiedad
d box-shadow
w facilit a la int roducció
ón de sombrras y efect os
s 3D. Est e
efect o antt iguament e no era fácil de
d conseguirr y se solía re
ecurrir al uso
o de imágene
es u ot ras t éc
cnicas.
Con la p ropiedad bo
ox-shadow se
s ha hecho
o posible co
onseguir som
mbras y efe
ect os 3D en
n las cajas
cont ened oras CSS con
n facilidad. Ten
T en cuentt a que est a propiedad n o es soport a
ada por muc
chas de las
versiones de navegad ores que no son recient es,
e e incluso en algunos de los recien
nt es t odavía es posible
que se co
onsidere exp l que obliga al uso de prefijos esp
periment al, lo pecíficos de navegador, aunque la
mayor pa
art e de los navegadores
n s act uales ya nt roducido como est ánd
a las han in dar y no req
quieren de
prefijo.
PROPIEDA
AD BOX-SHA
ADOW
La sint axiss a emplear se

s basa en in
ndicar uno o más efect os
s de sombra separados p
por comas. Ca
ada efect o
de sombr a comprend e hast a 5 parámet ros:
select orDeE
Element o { n oEspecificad
do_none_o_inset _opcion
nal
dist ancia_h orizont al_re

equerida distt ancia_vert iccal_requerida
a
al
blurOpciona
spreadOpci onal
nal}
colorOpcion
Si no se especifica,
e la
a sombra se
erá ext erna (hacia fuera
a de la caja)). Si se escriibe la palabrra inset la
sombra se
erá int erna (hacia dent ro
o de la caja).
Blur crea un efect o de

e difuminado
o y brillo.
a, haciéndol a más grand

Spread crrea un efectt o de agran damient o d e la sombra de que la propia
p caja
cont ened ora. Si spre
ead es cero
o la sombr a t iene el mismo t am
maño que la
a caja, per o con un
desplazam
mient o.
Si se espe
ecifica un co
olor, la somb
bra t omará el ecificado. Si no se especcifica color, la sombra
e color espe
t omará ell valor que p or defect o o explícit ame
ent e t enga la propiedad color
c de apliccación.
om, 2006-2029
Efecto CSS de sombras 3D con box-shadow .
PROPIEDAD BOX-SHADOW
PROPIEDAD CSS box-shadow
Permit e crear sombras hacia fuera o hacia dent ro de una caja cont enedora. Se
pueden especificar varios efect os separando su especificación por comas.
none (elimina el efect o de sombra)
Una especificación sint áct ica con un desplazamient o horizont al (offset -x) y
vert ical (offset -y) en unidades de medida válidas (no se admit en %).
Valores posibles para Una especificación sint áct ica que además de los desplazamient os puede incluir
opcionalment e: el valor inset para indicar que la proyección de sombra debe ser
esta propiedad
hacia el int erior, un valor de efect o blur en una unidad de medida válida (no se
admit en porcent ajes), un valor de efect o spread en una unidad de medida
válida (no se admit en porcent ajes) y un valor de color.
Ejemplos .myCont ainer { box-shadow : -5px -5px; }

aprenderaprogramar.com .myCont ainerSP { box-shadow : inset 0 0 15px 0 maroon; }
Si el cont enedor t iene un borde con forma dist int a a la rect angular est ablecida con border-radius, la
sombra est ablecida con box-shadow adopt a la forma que t enga el borde.
Si los desplazamient os se est ablecen a cero, la sombra no se visualiza except o si se est ablecen valores
para el efect o blur o spread, en cuyo caso se crea una sombra uniforme en t orno a t oda la caja
cont enedora.
Los desplazamient os con valores posit ivos son hacia la derecha para el horizont al y hacia abajo para el
vert ical. Los desplazamient os con valores negat ivos son hacia la izquierda para el horizont al y hacia
arriba para el vert ical.
Supongamos que se especifican varias sombras: box-shadow : 0.5em -0.5em 0.4em red, 0.5em 0.5em
0.4em gold, -0.5em 0.5em 0.4em lime, -0.5em -0.5em 0.4em blue;
En est e caso, la sombra relacionada en primer lugar se sit úa encima del rest o de sombras (que pueden
quedar ocult as por est a, parcial o t ot alment e). En est e ejemplo la sombra roja est aría encima de la
sombra oro, est a encima de la sombra lima y est a encima de la sombra azul.
EJEM PLO DE USO DE BOX-SHADOW
curso debes ser capaz de int erpret ar t odo el código que hemos incluido. También debes ser capaz de
valorar las vent ajas y desvent ajas que puede t ener usar est e t ipo de propiedades.
<ht ml> <head>

div{ border: 3px solid; height : 45px; w idt h: 250px; margin:45px 25px; background-color:yellow ;
font -size: 16px; t ext -align:cent er; padding-t op: 10px; w ord-w rap:break-w ord; }
div:first -child {margin:10px 20px 0 20px;} h2{margin: 15px 0 -45px 70px;}
</ st yle> </ head>
<body>
<h2>CSS box-shadow aprenderaprogramar.com</ h2>
<div st yle=" float :left ; border-st yle:none; border-w idt h:0; background-color:w hit e;" >
<div st yle=" border-radius: 20px; box-shadow : -5px -5px;" >box-shadow : -5px -5px;</ div>
<div st yle=" border-radius: 20px; box-shadow : 8px 8px;" >box-shadow : 8px 8px;</ div>
<div st yle=" border-radius: 20px;box-shadow : 15px 15px;" >box-shadow : 15px 15px; </ div>
<div st yle=" border-radius: 20px; box-shadow : 15px 15px maroon;" >box-shadow : 15px 15px maroon; </ div>
<div st yle=" border-radius: 20px; box-shadow : 15px 15px 20px maroon;" >box-shadow : 15px 15px 20px maroon; (con blur) </ div>
</ div>
<div st yle=" float :left ; border-st yle:none; border-w idt h:0; background-color:w hit e;" >
<div st yle=" border-radius: 20px; box-shadow : -5px -5px 0px 10px;" >box-shadow : -5px -5px 0px 10px; (con spread)</ div>
<div st yle=" border-radius: 20px; box-shadow : 8px 8px 10px 0;" >box-shadow : 8px 8px 10px 0; (con blur)</ div>
<div st yle=" border-radius: 20px;box-shadow : 15px 15px 10px 5px;" >box-shadow : 15px 15px 10px 5px; (con blur y spread) </ div>
<div st yle=" border-radius: 20px;box-shadow : 0 0 15px 0 maroon;" >box-shadow : 0 0 15px 0 maroon; (sin desplazar con blur sin spread) </ div>
<div st yle=" border-radius: 20px;box-shadow : 0 0 15px 10px maroon;" >box-shadow : 0 0 15px 10px; (sin desplazar con blur y spread) </ div>
</ div>
</ body>
</ ht ml>
EJERCICIO RESUELTO
Invert ir t odas las sombras del ejemplo ant erior para que se proyect en hacia dent ro de las cajas
cont enedoras y no hacia fuera y comprobar los result ados comparándolos con los ant eriores.
SOLUCIÓN
Tenemos que añadir la especificación inset para las sombras. El código sería el siguient e:
<ht ml>
<head>
div{ border: 3px solid;

height : 50px; w idt h: 250px;
margin:35px 25px; background-color:yellow ;
font -size: 14px; t ext -align:cent er;
padding-t op: 16px; w ord-w rap:break-w ord;
}
div:first -child {margin:0 20px 0 20px;}
h2{margin: 15px 0 -45px 70px;}
</ st yle>
</ head>
<body>
<h2>CSS box-shadow aprenderaprogramar.com</ h2>
<div st yle=" float :left ; border-st yle:none; border-widt h:0; background-color:w hit e;" >
<div st yle=" border-radius: 20px; box-shadow : inset -5px -5px;" >box-shadow : inset -5px -5px;</ div>
<div st yle=" border-radius: 20px; box-shadow : inset 8px 8px;" >box-shadow : inset 8px 8px;</ div>
<div st yle=" border-radius: 20px;box-shadow : inset 15px 15px;" >box-shadow : inset 15px 15px; </ div>
<div st yle=" border-radius: 20px; box-shadow : inset 15px 15px maroon;" >box-shadow : inset 15px 15px maroon; </ div>
<div st yle=" border-radius: 20px; box-shadow : inset 15px 15px 20px maroon;" >box-shadow : inset 15px 15px 20px maroon;
</ div>
</ div>
<div st yle=" border-radius: 20px; box-shadow : inset -5px -5px 0px 10px;" >box-shadow : inset -5px -5px 0px 10px;</ div>
<div st yle=" border-radius: 20px; box-shadow : inset 8px 8px 10px 0;" >box-shadow: inset 8px 8px 10px 0;</ div>
<div st yle=" border-radius: 20px;box-shadow : inset 15px 15px 10px 5px;" >box-shadow : inset 15px 15px 10px 5px; </ div>
<div st yle=" border-radius: 20px;box-shadow : inset 0 0 15px 0 maroon;" >box-shadow : inset 0 0 15px 0 maroon; </ div>
<div st yle=" border-radius: 20px;box-shadow : inset 0 0 15px 10px maroon;" >box-shadow : inset 0 0 15px 10px maroon; </ div>
</ div>
</ body>
</ ht ml>
El result ado que se obt iene en un navegador que acept e est as propiedades será similar al most rado a
cont inuación.

Degradados
s CSS. Degradado lineal y deg
gradado radial.
DEGRADA
ADOS EN CSS
S
Un color que
q se va deegradando prrogresivamente hasta coonvertirse en otro es un eefecto muy usado
u para
fondos dee elementoss (o incluso como
c fondo web) ya que permite conseguir un efecto atractivo. Este
efecto an
ntiguamentee no era fáccil de conseeguir y se solía
s recurrirr al uso de imágenes de fondo.
Actualmente disponemos de mecanismos quee facilitan inccluir degradaados en páginnas web.
Los degraadados CSS son de doss tipos: degradados line eales (linearr-gradient) o degradado os radiales
(radial-graadient). En el
e primer casso la transforrmación de color
c va avannzando líneaa a línea, mie
entras que
en el segu undo caso laa transformaación de colo or se producce porque suucesivos círcculos concén
ntricos van
cambiand do de color. Aquí
A vemos la
l diferencia entre ambo os efectos.
Un degraadado lineall es una im

magen que genera
g CSS a través de
d la invocaación de un
na función
denominaada linear-grradient.
LÍNEA DE GRADIENTE
E
Un gradieente lineal se define a partir

p de unaa línea de grradiente. La imagen se ggenera creando líneas
cuyo color va cambian ndo, perpend uí vemos la líínea de gradiente para
diculares a laa línea de graadiente. Aqu
distintos degradados:
d
om, 2006-2029
Degradados CSS. Degradado lineal y degradado radial.
En el primer caso la línea de gradiente va de arriba hacia abajo, por lo que las líneas de color son
horizontales. En el segundo caso la línea de gradiente forma un ángulo de 45 grados y esto hace que las
líneas de color formen un ángulo respecto a la caja contenedora. En el tercer caso la línea de gradiente
es horizontal y esto hace que las líneas de color sean verticales.
Como vemos, nos puede resultar de interés trabajar indicando un grado de inclinación específico para
la línea de gradiente.
UNIDADES ANGULARES CSS
CSS permite la especificación de un ángulo o inclinación en unidades denominadas unidades angulares.

Las unidades admitidas son grados deg, grados grad, tantos por uno de circunferencia turn y radianes.
Como en CSS las designaciones de orden siguen la definición top, right, bottom, left, las unidades
angulares consideran que el valor 0 se corresponde con la vertical (es decir, no se sigue el mismo
criterio que en matemáticas donde 0 grados se corresponden con la horizontal). En la siguiente tabla
vemos las unidades angulares y su significado gráfico.
Visión gráfica Equivalencia Comentarios
Un valor positivo desplaza el ángulo en sentido horario.

90deg = 100grad =
Para linear-gradient 90deg equivale a to right (degradar
0.25turn ≈ 1.5708rad
desde la izquierda hacia la derecha).
180deg = 200grad = Un valor de 180deg para linear-gradient equivale a to

0.5turn ≈ 3.1416rad bottom (degradar desde arriba hacia abajo).
Un valor negativo desplaza el ángulo en sentido

-90deg = -100grad = -
antihorario. -90deg con linear-gradient equivale a to left
0.25turn ≈ -1.5708rad
(degradar desde la derecha hacia la izquierda)
Un valor 0deg equivale a la posición de partida. Con

0deg = 0grad = 0turn =
linear-gradient equivale a to top (degradar desde abajo
0rad
hacia arriba).
FUNCIÓN LINEAR-GRADIENT
Esta función nos permite generar una imagen con un degradado de colores con una dirección y colores
especificados. Tener en cuenta que linear-gradient no genera un color de fondo, sino una imagen sin
dimensiones especificadas, que se adaptará automáticamente para cubrir todo el espacio disponible.
Esta función no es soportada por muchas de las versiones de navegadores que no son recientes (o bien
la soportan con sintaxis específicas para cada navegador o versión), e incluso en algunos de los
recientes todavía es posible que se considere experimental. Esto obliga a que debamos pensar si
conviene hacer uso de prefijos específicos de navegador. Nosotros trabajaremos aquí sin estos prefijos
porque la mayor parte de los navegadores actuales ya la han introducido como estándar y no requieren
de prefijo.
La función se suele invocar normalmente como fondo cuando se usa la propiedad background-image o
cuando se usa la propiedad shortand background (aunque quizás a ti se te ocurran otros usos que
podrías también probar). Habitualmente la sintaxis será de este tipo:
selectorDeElemento { background: linear-gradient

anguloOespecificaciónDeDirección colorInicial colorFinal}
Ejemplo: style="background: linear-gradient (45deg, #008080, #FFEBCD);

La especificación de dirección se puede hacer con una unidad angular o usando alguno de los siguientes
valores:
a) to bottom: indica que se comienza con el color inicial arriba (top) y se progresa hasta el color
final abajo (bottom). Equivale a un ángulo de 180deg.
b) to top: indica que se comienza con el color inicial abajo (bottom) y se progresa hasta el color
final arriba (top). Equivale a un ángulo de 0deg.
c) to right: indica que se comienza con el color inicial a la izquierda (left) y se progresa hasta el
color final a la derecha (right). Equivale a un ángulo de 90deg.
d) to left: indica que se comienza con el color inicial a la derecha (right) y se progresa hasta el
color final a la izquierda (left). Equivale a un ángulo de -90deg ó 270deg.
Pero existen más posibilidades: se puede especificar una lista de colores separados por comas. Ejemplo:
style="background: linear-gradient( 90deg, red, blue, yellow); ". El número de colores puede ser el que
se desee. Con esta sintaxis cada color ocupa una fracción del espacio disponible. En el espacio anterior,
se comienza con el rojo que se va degradando hasta convertirse en azul, luego el azul se va degradando
hasta convertirse en rojo y cada color ocupa un tercio del espacio disponible por ser tres colores. Si
fueran 5 colores, cada color ocuparía una quinta parte del espacio disponible.
Otra posibilidad es especificar puntos de localización (stop points) de los colores, de forma que no se
distribuyan a partes iguales, sino como nosotros especifiquemos. La sintaxis es de tipo:
style="background: linear-gradient( 90deg, red, blue 20px, yellow); " signfica que se comienza en el
color rojo que se va degradando hasta convertirse en azul a una distancia de 20px desde el inicio. A
partir de esos 20px el azul se va transformando en amarillo hasta ser completamente amarillo al final
del degradado.
Otro ejemplo:
style="background: linear-gradient( 90deg, blue, red 30px, yellow 120px, green); " significa que se
comienza en el color azul que se degrada hasta convertirse en rojo a los 30px del inicio, desde ahí el
rojo se degrada hasta convertirse en amarillo a los 120px del inicio y a partir de ahí el amarillo se
degrada hasta convertirse en verde al final.
EJEM PLOS DE USO DE LINEAR-GRADIENT
Escribe este código y visualiza sus resultados. Con los contenidos que hemos explicado a lo largo del
curso debes ser capaz de interpretar todo el código que hemos incluido. También debes ser capaz de
valorar las ventajas y desventajas que puede tener usar esta función.
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{margin:0; padding:0; font-family: verdana, sans-serif;}
div{ border: 1px solid; float: left;
height: 140px; width: 140px;
margin:10px 15px;
font-size: 20px; font-weight:bold; text-align:center;
padding-top: 30px; word-wrap:break-word;
}
h2{margin: 55px 0 -30px 65px; font-size:22px; white-space:pre;
text-align:center; width: 400px;}
</style>
</head>
<body>
<h2>CSS linear-gradient
aprenderaprogramar.com</h2>
<div style=" width:600px; border-style:none; border-width:0; background-color:white;">
<div style=" background: linear-gradient( to bottom, #008080, #ffebcd); ">to bottom</div>
<div style=" background: linear-gradient( 45deg, #008080, #ffebcd); ">45deg</div>
<div style="background: linear-gradient( 75deg, #008080, #ffebcd); ">75deg</div>
<div style="background: linear-gradient( 90deg, red, blue, yellow); ">90deg, red, blue, yellow</div>
<div style="background: linear-gradient( 90deg, red, blue 10px, yellow); ">90deg, red, blue 10px, yellow</div>
<div style="background: linear-gradient( 90deg, blue, red 30px, yellow 120px, green); ">90deg, blue, red 30px, yellow 120px,
green</div>
</div>
</body>
</html>
El resultado que se obtiene en un navegador que acepte esta función será similar a este:
Degradados
s CSS. Degradado lineal y deg
gradado radial.
O
EJERCICIO
Crea un documento
d H
HTML dondee tengas un contenedor div centrado, con márggenes de 50 píxeles en
todas direecciones y dimensiones
d ancho 400 píxeles y altto 200 píxelees. Crea el eefecto que se ve en la
siguiente imagen denttro de dicho contenedorr usando la propiedad
p CSSS linear-graddient.
Para commprobar si tu código

o y respueestas son correctas puedes
p consultar en los foros
aprenderaaprogramar..com.
Próxima entrega:
e CU0
01061D
Acceso al curso comp

pleto en apre ón siguiente:
enderaprograamar.com -- > Cursos, o en la direcció
http://apreenderaprograamar.com/index.php?option=com_conte
ent&view=category&id=75&
&Itemid=203
om, 2006-2029
radial-gradiient CSS. borde
er-image CSS.
M ÁS EFEC
CTOS CSS
A lo largo
o del curso hemos ido viendo cóm
mo CSS ha ido
i int roducciendo progrresivament e cada vez
mayores posibilidade
es para gen
nerar efect os
o visuales at ract ivos que
q hace u
unos años result
r aban
complicad
dos de gene
erar. Ademá
ás de las pro
opiedades que
q mo t ext -shadow , box-
ya hem os vist o com
shadow , et
e c. CSS est á en const antt e evolución e incorpora cada vez má
ás posibilidad
des.
Ya comen u moment o que el objet ivo de est e curso

nt amos en su c era ap
prender la lóg
gica de CSS y t ener un
conocimie
ent o sólido de
d sus funda
ament os y n o ser un manual de refe
erencia dond
de se especifficara t oda
des de est a t ecnología. En est a en t rega vamoss a coment ar
la sint axiss y t odas las posibilidad a algunas
propiedad o que son int eresant es. Para cono
des o efect os omendamos consult es
ocer su sintt axis t e reco
alguna w eb d
de refere
encia CS
SS de ent re las que mos
indicam en
ht t p:/ / w w w .aprenderraprogramarr.com/ index.php?opt ion=
=com_cont ent & view =artt icle& id=727
7
& cat id=75
5:t ut orial-basico-program
mador-w eb-ccss-desde-ce
ero& It emid=203
Nosot ros usamos habit

h ualmentt e M ozilla Developer Net w ork como
c w eb de referencia para
especifica ge t ú la que t e parezca m ás adecuada
ación y sint axxis, pero elig a.
GRADIENT
RADIAL-G
Al igual que
q linear-grradient servíía para gene
erar un degrradado lineal, radial-grad
dient permitt e generar
degradad os circularess o elípt icos. Aquí vemos la diferencia
a ent re lineal y radial:
gunas posibil idades que t endríamos usando

Y aquí alg u CSS radial-gradie
r nt :
om, 2006-2029
radial-gradiient CSS. borde
er-image CSS.
Ten en cuent
c a que est os efectt os no son posibles en
n los naveg
gadores máss ant iguos y que los
navegado
ores act ualess pueden req
querir el uso
o de prefijos
s o t ener di st int as posib
bilidades o respuest
r as
según la versión y navegador que se ut il ice. Ten en
n cuent a qu
ue aunque cconviene co
onocer las
posibilidades de CSS debemos valorar
v las vent
v ajas y desvent
d ajas de t odo aq uello que usemos
u en
nuest ros desarrollos w eb. Como alt ernat iva más ar, t enemos el uso de ba
m est ánda ackground-im
mage para
most rar la
as imágenes de degradad
do radial. Estt o t iene sus vent
v ajas y su
us inconvenie
ent es.
BORDER- IM AGE CSS
Los borde
es en CSS se cont rolan p rincipalmentt e mediant e la propiedad border (y en menor medida
m con
dad out line). La propied
la propied dad border-i mage se ide
eó para t rat ar ar el uso de imágenes
a de facilit a
para consst it uir bordess con diseño
os personalizzados, de mo
odo que cada
a desarrollo w eb pudiera
a t ener los
bordes qu
ue deseara a t ravés de im
mágenes que
e definen un fragment o del
d borde y sse repit en o colocan
c de
una mane
era det ermin
nada especifi cada median
nt e código.
om, 2006-2029
radial-gradient CSS. border-image CSS.
Ten en cuent a que est os efect os no son posibles en los navegadores más ant iguos y que los
navegadores act uales pueden requerir el uso de prefijos o t ener dist int as posibilidades o respuest as
según la versión y navegador que se ut ilice. Ten en cuent a que aunque conviene conocer las
posibilidades de CSS debemos valorar las vent ajas y desvent ajas de t odo aquello que usemos en
nuest ros desarrollos w eb. Como alt ernat iva más est ándar, t enemos el uso de background-image para
generar los bordes. Est o t iene sus vent ajas y sus inconvenient es.
RECORDATORIO
CSS est á incorporando cont inuament e posibilidades y novedades. M uchas de ellas t rat an de permit ir a
los desarrolladores w eb t rabajar sin usar carga de imágenes localizadas en archivos para crear los
efect os deseados. No obst ant e, t en en cuent a que las imágenes procedent es de archivos no est án
sujet as a int erpret ación por part e del navegador, mient ras que los efect os generados mediant e código
sí, lo que puede dar lugar a que la visualización en dist int os navegadores no sea coincident e o requiera
de “ parches” . Por eso los efect os CSS no son ut ilizados por muchos desarrolladores, que prefieren ser
más conservadores y seguir ut ilizando imágenes t radicionales. Por ot ro lado, ot ros desarrolladores
ut ilizan t odos los efect os CSS posibles en sust it ución de las imágenes t radicionales. Nosot ros t e
recomendamos que razones para cada ocasión qué es lo más convenient e, t eniendo en cuent a fact ores
como velocidad de carga de la página y compat ibilidad ent re navegadores ent re ot ros aspect os.
EJERCICIO
Busca en int ernet (en un blog, página w eb, et c.) una imagen para crear un borde personalizado con
border-image. Crea un document o HTM L con un div de 400 píxeles de ancho y 200 píxeles de alt o en
cuyo int erior muest re un degradado radial y aplícale el borde personalizado. Ten en cuent a las
peculiaridades de t u navegador.

Efectos CSS con transform
m: rotate, scale,, skew, translatte.
M ÁS EFEC
CTOS CSS
La propiedad CSS t ran

nsform perm
mit e generar efect os gráfiicos que ant es no era po
osible genera
ar con CSS,
como efect o de rot acción, escalad o complet o, escalado ho
orizont al, esccalado vert iccal, sesgado horizont al
o vert ical y t raslación horizont al o vert ical de element
e os.
AD TRANSFO
PROPIEDA ORM
Est a prop e no ser recconocida porr los navegadores ant igu

piedad puede uos o requerir del uso de
d prefijos
específico
os para algun
nos navegado
ores act uales.
PROPIE
EDAD CSS tra
ansform
edad Perm
mit e rot ar, escalar, sesgar o t rasladar ele
ement os.
Valor po
or defecto non e
Aplicable a Elem
ment os t ransfformables (t ip o block o equ
uivalent e).
non e (indica que no hay t ransfformación)
rot at
a e (udAng) (d
donde udAng es
e una unidad
d angular válid
da en CSS)
scal e (valorX) ó scale (valorX, valorY)

v ó scal eX(valorX) ó sscaleY(valorY)) (donde la
espe
ecificación X fuerza
f el esca
alado en hori zont al y la esspecificación Y lo fuerza
en vert
v ical, siend o ambas núm
meros ent eros o decimales)
Valores posibles parra skew
wX (udAng) ó skew Y(udAn d) (donde udA
Ang es una u nidad angularr válida en
esta pro
opiedad CSS. Se est ablece d element o en horizont al o en vert ical))
e un sesgado del
t ran
nslat e (valor X) ó t ransllat e (valorX,, valorY) ó t ranslat eX(v
valorX) ó
t ran
nslat eY(valorY specificación X fuerza la t ra
Y) (donde la es aslación en ho
orizont al y
la especificación
e Y lo fuerza en vert ical, siendo amba
as unidades de
d medida
válid
das admit iénd
dose porcent ajes)
a
erit (se hereda

e).
Ejemplos .myCont ainer { skkew X(-30deg);}

aprende
eraprograma
ar.com .myCont ainerSP { scale(0.5);}
Est a prop iedad permiit e generar efect

e os muy vist osos cua
ando se apro
ovecha para ccombinarla con
c hover,
por ejem plo: #cont en
nt Box1:hover { t ransform
m: skew X(-2
20deg);} da lugar a que el efect o se
e produzca
cuando el
e usuario pa
ase el rat ón
n por encim a del eleme do, y mient rras est o no ocurre el
ent o afect ad
element o se muest ra como est é definido
d para
a una sit uaci ón normal. Est
E e t ipo de e
efect os ant eriorment
e e
no se pod
dían generar con CSS y era necesario
o hacerlo me
ediant e imágenes previam
ment e prepa
aradas con
un progra
ama de diseñ
ño gráfico, co
on Javascriptt u ot ras t écn
nicas.
om, 2006-2029
Efectos CSS con transform: rotate, scale, skew, translate.
Escribe el siguient e código HTM L y comprueba los result ados de est a propiedad (t en en cuent a que es
posible que necesit es añadir prefijos, depende del navegador que est és usando):
<ht ml>
<head>
div{ border: 5px solid; w idt h: 260px; margin:10px; background-color:yellow ; font -size: 20px; t ext -align:cent er;
padding-t op: 20px; w ord-w rap:break-w ord; }
h2{margin: 15px 0 -15px 40px;} img {padding:10px; }
#cont ent Box1 {border-radius: 40px; margin-left :40px;}
#cont ent Box1:hover { t ransform: skew X(-20deg);}
}
</ st yle> </ head>
<body>

<h2>CSS t ransform: rot at e</ h2>
<div st yle=" border-radius: 40px;" >aprenderaprogramar.com<img src=" ht t p:/ / i.imgur.com/ afC0L.jpg" ></ a></ div>
</ div>
<div st yle=" border-radius: 40px; margin-t op: 50px; t ransform: rot at e(45deg);" >aprenderaprogramar.com<img
src=" ht t p:/ / i.imgur.com/ afC0L.jpg" ></ a></ div>
</ div>
<p st yle=" clear: bot h; " ></ p>

<h2 st yle=" margin-t op:80px;" >CSS t ransform: scale</ h2>
</ div>
<div st yle=" border-radius: 40px; margin-t op: 50px; t ransform: scale(0.5);" >aprenderaprogramar.com<img
</ div>

<h2>CSS t ransform: skew X</ h2>
</ div>
<div st yle=" border-radius: 40px; margin-left : 40px; t ransform: skew X(-30deg);" >aprenderaprogramar.com<img
</ div>

<h2>CSS t ransform: skew Y</ h2>
</ div>
<div st yle=" border-radius: 40px; margin-left : 40px; t ransform: skewY(-20deg);" >aprenderaprogramar.com<img
</ div>

<h2>CSS t ransform: t ranslat e</ h2>
</ div>
<div st yle=" border-radius: 40px; margin-left : 40px; t ransform: t ranslat e(70px, 70px);" >aprenderaprogramar.com<img
</ div>

<h2>CSS t ransform con hover</ h2>
<div id=" cont ent Box1" >aprenderaprogramar.com<img src=" ht t p:/ / i.imgur.com/ afC0L.jpg" ></ a></ div>
</ div>
</ body>
</ ht ml>
EJERCICIO
Est udia el siguient e código CSS y responde a las cuest iones plant eadas:
#skew { t ransform:skew (35deg); }

#scale { t ransform:scale(1,0.5); }
#rot at e { t ransform:rot at e(45deg); }
#t ranslat e { t ransform:t ranslat e(10px, 20px); }
#rot at e-skew -scale-t ranslat e { t ransform:skew (30deg) scale(1.1,1.1) rot at e(40deg) t ranslat e(10px, 20px); }
a) Crea un document o HTM L donde se vean los est ilos que t enemos en el código aplicados a dist int os
element os.
b) Explica el significado de cada una de las part es del código (por ejemplo #skew indica el est ilo que se
aplicará a los element os con at ribut o id=” skew ” . Transform:skew (35deg) indica que …)

Animacione
es CSS con transition. Ejemplo
os.
M ÁS EFEC
CTOS CSS
Combinan
ndo la propi edad t ransfo
orm con hovver podemos
s crear efectt os dinámico
os sobre una
a w eb. Sin
embargo, la animació n que se pue
ede consegu
uir con est e efect
e o es basst ant e limit ada. CSS ha in
nt roducido
nuevas t écnicas
é que permit
p en ela
aborar anima
aciones más sofist icadass que pueden
n colaborar a no t ener
que recurrrir a t ecnolo
ogías como Ja
avascript ó Flash.
F
CONCEPT
TO DE TRANS
SICIÓN CSS
Una t ranssición CSS ess un efect o de

d cambio p rogresivo de
esde un est ado inicial ha
ast a un est ad
do final de
E el est ado inicial el ele
un element o HTM L. En ement o t ien e unas prop
piedades y en el est ado final t iene
una o var ias propieda n cambiado. El navegado
ades que han a de generar los pasos in t ermedios
or se encarga
que supon
nen cambiarr de un est ad
do a ot ro, de la forma qu e especifiqu emos a t ravé
és del código
o.
Una t ranssición CSS em

mpieza cuan uce una sit u ación de “ d isparo” del ccambio. El disparo
ndo se produ d del
cambio pu
uede ser gen
nerado de diist int as mane
eras, pero la que vamos a ver en los
a forma más básica y la q
ejemplos que pondre a cuando el usuario pon e el rat ón
emos a cont inuación es que el cam bio empieza
encima de
el element o HTM L afect ado
a por la t ransición,
r es decir, que usamos
u la pseudoclase :h
hover para
definir la t ransición qu
ue empieza cuando
c el ussuario pone el
e punt ero de
el mouse en cima del element o.
Una t ranssición empie

eza y t ermin
na y no se repit
r e indefin
nidament e (a
( no ser qu
ue el usuario
o vuelva a
poner el rat ón encim
ma del elem ent o ot ra vez), aunque veremos más
m adelant e que CSS ofrece
o más
posibilidades para gen
nerar animacciones.
M ediant e t ransicione
es CSS pode
emos genera
ar efect os dinámicos
d qu ment e sólo se podían
ue ant eriorm
generar r ecurriendo a ot ros lengu
uajes o t ecn ologías. Con
nst it uyen un recurso int e
eresant e, perro a la vez
peligroso,, en el sent id
do de que se puede caer en la t ent ación de crear páginas w eb
b con gran ca
ant idad de
efect os y movimient os
o pero que result
r masiado sobr ecargadas y poco út iles p
en dem para los usua
arios.
PROPIEDA
AD TRANSITION-PROPER
RTY

d prefijos
específico
os para algun
nos navegad ores act uale
es. Consult a en
e M ozilla Developer
D Ne
et w ork para conocer si
debes apl icar prefijos.
mit e cambiar las propied

CSS perm dades de un element o HTM
H L media
ant e una t ransición con efect o de
animación
n progresiva. El primer parámet
p ro a definir
d es qu
ué propiedad
d es la que se
e va a cambia
ar durant e
la animación. Por ejem
mplo, podem
mos cambiar la alt ura ó la e un elementt o. También se pueden
a anchura de
cambiar varias
v edades simu lt áneament e,
propie plo la alt ura, la anchura y el color o la imagen
e por ejemp
de fondo,, t amaño de
e t ext o, et c. Para defini r qué propie
edad o prop
piedades van
n a ser inclu
uidas en la
n se usa la prropiedad t ransit ion-prop
animación pert y.
om, 2006-2029
Animaciones CSS con transition. Ejemplos.
PROPIEDAD CSS transition-property
Función de la propiedad Permit e definir qué element os van a ser afect ados por una t ransición.
Valor por defecto all
all (indica que se verán afect adas por la t ransición t odas las propiedades que se
pueda)
Valores posibles para none (indica que no se aplicará la t ransición a ninguna propiedad)
esta propiedad nombreDeLaPropiedad (indicando un nombre de propiedad se especifica la

propiedad que se va a ver afect ada; si son varias, separarlas con comas.)
Ejemplos .myCont ainer { t ransit ion-propert y: color, t ransform; }

aprenderaprogramar.com .myCont ainerSP { t ransit ion-propert y: font -size; }
PROPIEDAD TRANSITION-DURATION
Est a propiedad puede no ser reconocida por los navegadores ant iguos o requerir del uso de prefijos
específicos para algunos navegadores act uales. Consult a en M ozilla Developer Net w ork para conocer si
debes aplicar prefijos. t ransit ion-durat ion sirve para especificar cuál t iene que ser la duración de la
t ransición en segundos (s) o en milisegundos (ms). Su valor por defect o es 0 (est o equivale a que no
habrá t ransición). En caso de que haya varias propiedades afect adas, los t iempos se especifican
separados por comas y se asocian a cada propiedad en el mismo orden en que los define la propiedad
t ransit ion-propert y. Ejemplo: t ransit ion-propert y: color, t ransform; t ransit ion-durat ion: 10s, 4s;
En est e caso la t ransición para la propiedad color durará 10 segundos, será más lent a. La t ransición para
la propiedad t ransform durará 4 segundos, será más rápida.
Ot ro ejemplo con valores expresados en milisegundos: t ransit ion-durat ion: 120ms, 750ms;
PROPIEDAD TRANSITION-DELAY
debes aplicar prefijos.
Est a propiedad sirve para especificar cuál t iene que ser el ret ardo con el que empiece la t ransición en
segundos (s) o en milisegundos (ms), a part ir del moment o en que se produzca la sit uación “ de
disparo” . Su valor por defect o es 0 (est o equivale a que la t ransición comenzará inmediat ament e
cuando se produzca la sit uación de disparo). En caso de que haya varias propiedades afect adas, los
t iempos se especifican separados por comas y se asocian a cada propiedad en el mismo orden en que
los define la propiedad t ransit ion-propert y. Ejemplo:
t ransit ion-propert y: color, t ransform; t ransit ion-delay: 2s, 0s;
En est e caso la t ransición para la propiedad empezará con un ret ardo de 2 segundos, no se hará
pat ent e inmediat ament e. El ret ardo para la propiedad t ransform será de cero segundos, lo que significa
que se empezarán a apreciar los efect os de la t ransición inmediat ament e una vez se produzca la
sit uación de disparo.
Ot ro ejemplo con valores expresados en m ilisegundos: t ransit ion-delay: 120ms, 750ms;
PROPIEDAD TRANSITION-TIM ING-FUNCTION
PROPIEDAD CSS transition-timing-function
Permit e definir la velocidad a la que t ranscurre la t ransición respet ando la

Función de la propiedad duración est ablecida. A efect os práct icos, permit e que el usuario vea la
animación como progresiva a velocidad const ant e o con ciert a aceleración.
Valor por defecto ease
ease : comienzo rápido, luego velocidad const ant e y final lent o.
ease-in: al revés que ease.
ease-out : similar a ease con final a velocidad const ant e.
ease-in-out : comienzo lent o y progresión a velocidad const ant e.
linear: progresión a velocidad const ant e.
step-start : salt o de la sit uación inicial a la final al comienzo.

step-end : salt o de la sit uación inicial a la final al final.
esta propiedad
steps (numeroDePasos, end) [El parámet ro numeroDePasos est ablece el
número de pasos int ermedios ent re la sit uación inicial y la final, lo que equivale
a que la t ransición se vea como “ pequeños salt os” .]
cubic-bezier(valor0a1, valor0a1, valor0a1, valor0a1) [Est a forma de definición

permit e especificar la curva t emporal de forma mat emát ica para definir formas
de cambio personalizadas]
Ejemplos .myCont ainer { t ransit ion-t iming-funct ion:ease;}

aprenderaprogramar.com .myCont ainerSP { t ransit ion-t iming-funct ion:st eps(6, end);}
EJEM PLO DE APLICACIÓN
Escribe el siguient e código y comprueba los result ados (t en en cuent a que para algunos navegadores
puede ser necesario que indiques prefijos). El efect o a apreciar es cómo un div con un t ext o e imagen va
rot ando y cambiando de color hast a volver a su posición inical pero con el color cambiado.
<ht ml>
<head>
.bloquePub{ border: 5px solid; w idt h: 260px;

margin:60px 0 0 90px; background-color:yellow ;
font -size: 20px; t ext -align:cent er;
padding-t op: 20px; w ord-w rap:break-w ord;
t ransit ion-propert y: color, t ransform;
t ransit ion-durat ion: 6s, 4s;
t ransit ion-t im ing-funct ion: ease;
t ransit ion-delay: 2s, 0s;
}
.bloquePub:hover {color: red; t ransform:rot at e(360deg);}
h2{margin: 15px 0 0 140px;}

img {padding:10px; }
}
</ st yle>
</ head>
<body>
<h2>CSS t ransit ion</ h2>
<div id=" mainCont " st yle=" border-st yle:none; border-w idt h:0; background-color:w hit e;" >
<div class=" bloquePub" st yle=" border-radius: 40px;" >aprenderaprogramar.com<img src=" ht t p:/ / i.imgur.com/ afC0L.jpg"
alt =" Not epad++" ></ a></ div>
</ div>
</ body>
</ ht ml>
El mismo efect o se puede conseguir usando la propiedad short and t ransit ion como veremos a
cont inuación.
PROPIEDAD SHORTAND TRANSITION
Las funciones relacionadas con t ransiciones t ransit ion-propert y, t ransit ion-durat ion, t ransit ion-delay y
t ransit ion-t iming-funct ion se pueden agrupar en una sola propiedad short and denominada t ransit ion.
La sint axis a emplear es de est e t ipo:
select orDeElement o { valorTransit ionPropert y valorTransit ionDurat ion
valorTransit ionDelay valorTransit ionTimingFunct ion}
Para aplicar est a propiedad en el ejemplo vist o ant eriorment e reemplazaríamos las cuat ro propiedades
relacionadas con t ransit ion por est a línea:
t ransit ion: color 6s ease 2s, t ransform 4s ease 0s;
El efect o lo vemos descrit o en est a secuencia de imágenes:
LO ELEGANTE Y LO EXCESIVO
Con las propiedades que est amos viendo que permit en efect os dinámicos usando CSS muchos
diseñadores y programadores son capaces de generar efect os elegant es y at ract ivos para páginas w eb.
Sin embargo, muchos ot ros llenan sus páginas w eb de complejos efect os visuales que son muy
espect aculares, pero luego result an desagradables para el usuario debido a que en la página t odo se
est á moviendo y dando vuelt as, lo que puede llegar incluso a generar mareos. Por t ant o, concluimos
con una recomendación. Si usas est os efect os, hazlo con prudencia y moderación.
EJERCICIO
#t ransEj1 div { t ransit ion:all 2s ease-in-out ; perspect ive: 800px; perspect ive-origin: 50% 100px; }
#t ransEj1:hover #rot at eX { t ransform:rot at eX(180deg);}
#t ransEj1:hover #rot at eY { t ransform:rot at eY(180deg);}
#t ransEj1:hover #rot at eZ { t ransform:rot at eZ(180deg);}
a) Crea un document o HTM L donde se vean los est ilos que t enemos en el código aplicados a dist int os
element os.
b) Explica el significado de cada una de las part es del código (por #t ransEj1 div indica los est ilos que se
aplicarán a div dent ro de element os con id=” t ransEj1” . t ransit ion: all indica que …, 2s indica que … ,
ease-in-out indica que…, et c.)

Animacione
es CSS. Regla @keyframes.
@ Eje
emplos.
ANIM ATIO
ON CSS
Ya hemoss vist o que usando

u las propiedades
p t ransform y t ransit ion con
c hover p
podemos cre
ear efect os
dinámicoss sobre una w eb. Sin em
mbargo, la an
nimación estt á limit ada a que se pro
oduzca al po sicionar el
usuario el
e rat ón sobrre un eleme
ent o o usar ot ros recur sos. CSS ha int roducido
o nuevas t éc
cnicas que
permit en elaborar an
nimaciones más sofist iccadas que pueden
p colaborar a no t ener que recurrir a
t ecnología
as como Java
ascript ó Flassh.
TO DE ANIM ACIÓN
CONCEPT A CSS
El concep
pt o de anima
ación es un concept
c o qu e t iene ciertt a similit ud con
c el conce
ept o de t rans
sición CSS,
plio y ofrece más posibil idades. Una animación es
pero que es más amp e un efect o dinámico q ue cambia
las propi edades de un elemen t o en el t i empo y qu
ue puede t ener
e varios est ados in t ermedios
especifica nimación req uiere al men
ados. Una an nos de dos es
st ados: el esst ado inicial ((from) y el es
st ado final
(t o). No o bst ant e, pue
ede t ener ot ros
r est ados int
i ermedios adicionales.
A cont inu ación vemoss las diferenccias ent re t ra

ansición y an
nimación:
Transición A
Animación
Cambio de
e est ado inicia
al a ot ro
Cambio de
d est ado inici al a final final, pasan
ndo por varios
s est ados
Uso básico
o cuando ussuario posicion
na mouse int ermedios diferent es si se desea y
enci ma de element o de ejecucción espont án ea si se
desea
Ejecución espontánea
e f
fácil de
No Sí
codificar
Repetición
n espontánea durante
No Sí
cierto tiem
mpo fácil de co
odificar
Repetición
n continua fác
cil de
No Sí
codificar
Ejecución hacia delante

e y hacia
No Sí
detrás fáciil de codificarr
Puede requerir uso de prefijos

p en
Sí Sí
ciertos nav
vegadores
om, 2006-2029
Animaciones CSS. Regla @keyframes. Ejemplos.
@KEYFRAM ES
Para definir una animación empezaremos definiendo las propiedades que va a t ener el element o en
cada uno de los est ados de la animación mediant e el uso de la regla CSS @keyframes.
Para ello se usa la siguient e sint axis:
@keyframes nombreDeLaAnimacion{
from {propiedad1: valor1; propiedad2: valor2; … propiedadN: valorN; }
valor%1 { propiedad1: valor; propiedad2: valor; … propiedadN: valor; }
valor%2 { propiedad1: valor; propiedad: valor2; … propiedad: valorN; }
valor%N { propiedad1: valor; propiedad: valor2; … propiedad: valorN; }
to {propiedad1: valor1; propiedad2: valor2; … propiedadN: valorN; }
Las propiedades definidas en from { … } definen el est ado inicial o sit uación de part ida. Las propiedades
definidas en t o { … } definen el est ado final o sit uación de t erminación. Est os dos est ados son de
declaración obligat oria.
Ent re los est ados from y t o pueden exist ir un número indet erminado de est ados int ermedios que
represent an la sit uación en moment os int ermedios durant e la ejecución de la animación. La animación
va pasando así por los est ados definidos hast a llegar al est ado final.
El ejemplo más básico puede ser t ener sólo un est ado inicial y un est ado final. Sería est e caso:
@keyframes animacion{
from { margin-left : 10%; }
t o { margin-left : 60%; color:red }
}
En est e ejemplo est amos definiendo que el element o HTM L al que se le aplique la animación que t iene
por nombre “ animacion” pasará de t ener un margin-left del 10%, es decir, est ar al lado izquierdo, a
t ener un margin-left del 60%, es decir, est ar al lado derecho de su cont enedor. Además en el lado
izquierdo t endrá su color por defect o mient ras que en lado derecho t omará color rojo. Aquí hemos
definidio básicament e un movimient o de izquierda a derecha.
Ahora ot ra definición con un punt o clave int ermedio:
50% { margin-left :35%; margin-t op:10%; }
t o { margin-left : 60%; }
}
Aquí hemos indicado que cuando la t ransición est é al 50% de su ejecución el element o debe est ar a
medio camino ent re la izquierda y la derecha (ent re el 10% y el 60% el punt o medio result a el 35%) y
además que en ese moment o debe t ener un desplazamient o hacia abajo debido al margin-t op. Hemos
definido un movimient o de izquierda a derecha que va bajando hast a alcanzar su posición más baja en
el cent ro y luego sube hast a llegar a su posición en el lado derecho.
Ahora ot ra definición con más punt os clave:
25% { margin-left :22.5%; margin-t op:10%; }
50% { margin-left :35%; margin-t op:0%;}
}
Con est a definición el element o part irá de arriba a la izquierda, se irá desplazando hacia la derecha y
bajará, luego subirá, luego volverá a bajar y t erminará arriba a la derecha. Hemos definido un
movimient o de “ sube y baja” de arriba a derecha.
Para ent ender gráficament e lo que suponen est as definiciones podemos ver est e esquema:
Nosot ros hemos usado como ejemplo que un element o se va moviendo, pero t en en cuent a que
animación no t iene por qué implicar movimient o. Animación implica cambio de propiedades, con lo
cual un element o HTM L puede est ar quiet o y present ar una animación debido a que va cambiando su
color, su t amaño de fuent e, su fondo, et c. y no es obligat orio que exist a movimient o. De hecho, un
efect o bast ant e habit ual es hacer brillar un t ext o, hacer que su color o efect o de gradient e de fondo
vaya cambiando, et c.
La regla @keyframes puede no ser reconocida por los navegadores ant iguos o requerir del uso de
prefijos específicos para algunos navegadores act uales. Consult a en M ozilla Developer Net w ork para
conocer si debes aplicar prefijos.
Una vez hemos definido los keyframes pasaremos a la definición de los parámet ros que definen la
animación mediant e las propiedades animat ion-name, animat ion-durat ion, animat ion-delay,
animat ion-fill-mode, animat ion-it erat ion-count , animat ion-direct ion y animat ion-t iming-funct ion.
EJERCICIO
@keyframes anime{
0%{ color: #f00; font -size: 10px; t op: 10px;}
25%{color: #A52A2A; font -size: 90px; left : 100px;}
50%{ t op: 56px; color: #000; font -size: 90px; }
100%{color: #A52A2A; font -size: 90px; left : 0; }
}
a) ¿Cuál es el nombre de la animación? ¿Cuánt os punt os clave define?
b) ¿Qué ocurrirá (cuál será el cambio de propiedades) durant e la animación?
c) ¿Es equivalent e usar 0% en lugar de from? ¿Y 100% en lugar de t o?

Animacione
es CSS. animation-name, dura
ation, etc. Ejem
mplos.
ANIM ATIO
ON CSS
M ediant e la regla CS
SS @keyfram
mes podemo s definir un a animación
n con un no mbre y los diferent es
est ados por
p los que pasará el ele
ement o HTM
M L que va a ser animad
do durant e e
el t iempo qu
ue dure la
animación
n. Conocida est a regla, vamos a ve
er cómo apllicarla a un element o o grupo de element
e os
mediant e el uso de un select or t ipo id o cllass y la ap licación de las propieda
ades relacion
nadas con
animat ion
n CSS.
AD ANIM ATIION-NAM E
PROPIEDA
M ediant e est a propie

edad indicam
mos el nombrre de animac
ción definida
a en una regla @keyfram
mes que va
a ser apli cada a un element
e o seleccionado mediant
m e un SS. El valor por defect o para est a
n select or CS
propiedad
d es none (implica qu e no se ap una animaciión). Si se desean apli car varias
plicará ningu
animacion
nes, se especcificarán sus nombres separadas por comas.
Ejemplo: .pubM ov{ animat

a ion-n ame: animacion1musk; } est a regla
a indica que
e a los elem
ment os con
class = “ pubM
p ov” se les aplicará la animación
n de nombre
e animacion1
1musk que h
habrá sido definida
d en
una regla @keyframes.
mplo: .pubM ov{ animat ion-name:

Ot ro ejem i animacion1m
musk, animaccion7kim; } e
est a regla ind
dica que a
los eleme
ent os con class
c = “ pub
bM ov” se le
e aplicarán dos animacciones: la q ue lleva po
or nombre
animacion p nombre animacion7kim. Ambas deberán ha
n1musk y la que lleva por aber sido de
efinidas en
reglas @kkeyframes.

d prefijos
específico
os para algun
nos navegad ores act uale
es. Consult a en
e M ozilla Developer
D et w ork para conocer si
Ne
debes apl icar prefijos.
PROPIEDA
AD ANIM ATIION-DURATIION
M ediant e est a propiiedad indica

amos el t iem gundos (s) o milisegun dos (ms) q ue llevará
mpo en seg
complet ar un ciclo de
e la animació
ón. La anima
ación habrá sido definida
a en una reg
gla @keyfram
mes y va a
ser aplica
ada a un ele
ement o sele
eccionado mediant
m por defect o para est a
e un select or CSS. El valor p
propiedad
d es 0s (impl ica que no se aplicará niinguna anim ación ya que n es nula). Si se desean
e la duración
arias animacciones, se esspecificarán sus duracio
aplicar va ones separad
das por com
mas, siendo cada
c valor
ndient e a la animación cuyo nombrre figura en el mismo orden
correspon o en la propiedad animat
a ion-
name.
om, 2006-2029
Animaciones CSS. animation-name, duration, etc. Ejemplos.
Ejemplo: .pubM ov{ animat ion-name: animacion1musk; animat ion-durat ion: 5s;} est a regla indica que
a los element os con class = “ pubM ov” se les aplicará la animación de nombre animacion1musk que
habrá sido definida en una regla @keyframes y que est a animación deberá complet arse en 5 segundos.
Ot ro ejemplo: .pubM ov{ animat ion-name: animacion1musk, animacion7kim; animat ion-durat ion: 5s,
250ms;} est a regla indica que la primera animación deberá complet arse en 5 segundos y la segunda en
250 milisegundos.
PROPIEDAD ANIM ATION-ITERATION-COUNT
M ediant e est a propiedad indicamos el número de veces que debe repet irse la animación. La animación
habrá sido definida en una regla @keyframes y va a ser aplicada a un element o seleccionado mediant e
un select or CSS. El valor por defect o para est a propiedad es 1 (implica que la animación se ejecut ará
una sola vez y se det endrá). Sus valores posibles son cualquier número igual o superior a cero,
admit iéndose decimales (por ejemplo se admit e, 1, 2, 3, 3.1, 3.2, 3.5, 10, 20, et c.) ó infinit e. Si se usa la
palabra clave infinit e la animación se repet irá indefinidament e sin parar.
Si se desean aplicar varias animaciones, se especificarán sus repet iciones separadas por comas, siendo
cada valor correspondient e a la animación cuyo nombre figura en el mismo orden en la propiedad
animat ion-name.
Ejemplo: .pubM ov{ animat ion-name: animacion1musk; animat ion-durat ion: 5s; animat ion-it erat ion-
count :infinit e;} est a regla indica que a los element os con class = “ pubM ov” se les aplicará la animación
de nombre animacion1musk que habrá sido definida en una regla @keyframes y que est a animación
deberá complet arse en 5 segundos y que una vez complet ada volverá a repet irse y así cont inuament e.
Ot ro ejemplo: .pubM ov{ animat ion-name: animacion1musk, animacion7kim; animat ion-durat ion: 5s,
250ms; animat ion-it erat ion-count :infinit e, 7;} est a regla indica que la primera animación se repet irá
cont inuament e mient ras que la segunda se ejecut ará 7 veces y se det endrá.
PROPIEDAD ANIM ATION-DIRECTION
M ediant e est a propiedad indicamos cómo debe ejecut arse una animación: hacia delant e (del principio
al final), hacia at rás (del final al principio), una vez hacia delant e y ot ra hacia det rás, et c. La animación
habrá sido definida en una regla @keyframes y va a ser aplicada a un element o seleccionado mediant e
un select or CSS. El valor por defect o para est a propiedad es normal (implica que la animación se
ejecut ará hacia delant e). Sus valores posibles son cualquiera de est as palabras clave:
• normal: la animación se ejecut ará hacia delant e. Si se repit e, cuando vuelve a empezar part e de
la sit uación inicial.
• reverse: la animación se ejecut ará hacia det rás. Si se repit e, cuando vuelve a empezar part e de
la sit uación inicial.
• alternate: la animación se ejecut ará una vez en un sent ido y ot ra vez en ot ro, comenzando
hacia delant e, luego hacia det rás y así sucesivament e el número de repet iciones especificado.
• alternate-reverse: la animación se ejecut ará una vez en un sent ido y ot ra vez en ot ro,
comenzando hacia det rás, luego hacia delant e y así sucesivament e el número de repet iciones
especificado.
Si se desean aplicar varias animaciones, se especificarán sus direcciones separadas por comas, siendo
cada valor correspondient e a la animación cuyo nombre figura en el mismo orden en la propiedad
animat ion-name.
específicos o no ser reconocida por algunos navegadores act uales. Consult a en M ozilla Developer
Net w ork para conocer si debes aplicar prefijos o si la propiedad será reconocida por un navegador
concret o.
PROPIEDAD ANIM ATION-DELAY
Análoga a la propiedad t ransit ion-delay. Indica el t iempo en segundos (s) o milisegundos (ms) que debe
ret rasarse el inicio de la animación respect o a lo que sería el moment o normal para el comienzo.
Ejemplo: animat ion-delay: 3s;
PROPIEDAD ANIM ATION-TIM ING-FUNCTION
La animación habrá sido definida en una regla @keyframes y va a ser aplicada a un element o
seleccionado mediant e un select or CSS. El valor por defect o para est a propiedad es ease (implica que la
animación se ejecut ará con un comienzo rápido, luego velocidad const ant e y final lent o.).
Si se desean aplicar varias animaciones, se especificarán sus t iming-funct ions separadas por comas,
siendo cada valor correspondient e a la animación cuyo nombre figura en el mismo orden en la
propiedad animat ion-name.
PROPIEDAD CSS animation-timing-function
Permit e definir la velocidad a la que t ranscurre la animación respet ando la

Función de la propiedad duración est ablecida. A efect os práct icos, permit e que el usuario vea la
animación como progresiva a velocidad const ant e o con ciert a aceleración.
Valor por defecto ease
ease : comienzo rápido, luego velocidad const ant e y final lent o.
ease-in: al revés que ease.
ease-out : similar a ease con final a velocidad const ant e.
ease-in-out : comienzo lent o y progresión a velocidad const ant e.
linear: progresión a velocidad const ant e.
step-start : salt o de la sit uación inicial a la final al comienzo.

step-end: salt o de la sit uación inicial a la final al final.
esta propiedad
steps (numeroDePasos, end) [El parámet ro numeroDePasos est ablece el
número de pasos int ermedios ent re la sit uación inicial y la final, lo que equivale
a que la animación se vea como “ pequeños salt os” .]
cubic-bezier(valor0a1, valor0a1, valor0a1, valor0a1) [Est a forma de definición

permit e especificar la curva t emporal de forma mat emát ica para definir formas
de cambio personalizadas]
Ejemplos .myCont ainer { animat ion-t iming-funct ion:ease;}

aprenderaprogramar.com .myCont ainerSP { animat ion-t iming-funct ion:st eps(6, end);}
PROPIEDAD ANIM ATION-PLAY-STATE
Est a propiedad permit e det ener una animación que se est á ejecut ando (ponerla en pausa). Su valor por
defect o es running y sus dos valores posibles son:
• running: la animación est á en ejecución

• paused: la animación est á en pausa
Ejemplo: .pubM ov:hover{ animat ion-play-st at e:paused; } con est a regla damos lugar a que la animación
se det enga si el usuario pone el punt ero del rat ón sobre el element o animado.
PROPIEDAD ANIM ATION-FILL-M ODE
Est a propiedad permit e det ener definir cómo debe comenzar y cómo debe quedar un element o que
t iene una animación. Su valor por defect o es none (implica que el element o comenzará y quedará en el
est ado que t enía ant es de que comenzara la animación) y sus valores posibles son:
• none: el element o comenzará y quedará en el est ado previo a la animación.

• forw ards: el element o quedará en el est ado final de la animación.
• backw ards: el element o se pondrá en el est ado indicado para el comienzo de la animación
inmediat ament e y esperará en ese est ado hast a que se cumpla el t iempo indicado en
animat ion-delay. Una vez se cumpla ese t iempo la animación cont inuará la ejecución desde ese
est ado inicial.
• both: combinación de las dos opciones ant eriores.
Ejemplo: .pubM ov:hover{ animat ion-fill-mode: forw ards; } con est a regla damos lugar a que cuando la
animación se det enga quede en el últ imo est ado definido (el correspondient e a t o ó 100% dent ro de la
regla @keyframes).
PROPIEDAD SHORTAND ANIM ATION
Est a propiedad permit e definir las propiedades animat ion-name, animat ion-durat ion, animat ion-t iming-
funct ion, animat ion-delay, animat ion-it erat ion-count , animat ion-direct ion y animat ion-fill-mode en una
sola regla CSS.
Ejemplo: .pubM ov{ animat ion: animacion 5s 2 alternat e linear forw ards; } equivale al conjunt o de
reglas:
animat ion-name:animacion; animat ion-durat ion: 5s; animat ion-it erat ion-count :2; animat ion-
direct ion:alt ernat e; animat ion-t iming-funct ion:linear; animat ion-fill-mode: forw ards;
EJEM PLOS DE APLICACIÓN
Escribe est e código y comprueba los result ados en t u navegador. Recuerda que hay navegadores que
no soport an est as propiedades. Consult a en M ozilla Developer Net w ork el soport e que ofrecen los
navegadores y sus versiones.
<ht ml>
<head>
from { margin-left : 10%; color: red;}
50% { margin-left :35%; margin-t op:0%;}
}
#bloquePub{ t ext -align:cent er; posit ion:relat ive; w idt h:250px;

padding: 15px; font -family:arial; font -size:22px;
font -w eight :bold; background-color: yellow ; }
img {padding: 10px;}
.pubM ov{ animat ion-name:animacion; animat ion-durat ion: 5s;
animat ion-it erat ion-count :2; animat ion-direct ion:alt ernat e;
animat ion-t iming-funct ion:linear; animat ion-fill-mode: forw ards; }
.pubM ov:hover{ animat ion-play-st at e:paused; }

</ st yle>
</ head>
<body>
<div class=" pubM ov" id=" bloquePub" st yle=" border-radius: 40px;" >aprenderaprogramar.com
<img src=" ht t p:/ / i.imgur.com/ afC0L.jpg" alt =" Not epad++" ></ a>
</ div>
</ body>
</ ht ml>
El result ado a obt ener debe ser similar al que se indica como “ Cinco punt os clave” en est a figura:
El element o con un t ext o y una imagen debe part ir de la zona izquierda de la pant alla, ir
progresivament e hacia la derecha bajando primero hast a la posición 25%, luego subiendo hast a 50%,
luego bajando de nuevo hast a 75% y luego subiendo hast a 100%. A cont inuación, debe cont inuar
invirt iendo el movimient o, es decir, realizar lo que hizo ant eriorment e pero al revés hast a volver a la
posición inicial.
Prueba a cambiar el número de punt os clave y ot ros parámet ros y observa las diferencias. Si no logras
visualizar la animación es probable que se deba a un problema de compat ibilidad del navegador o
necesidad de uso de prefijos. Consult a en los foros aprenderaprogramar.com si no logras resolverlo.
EJERCICIO
Busca en int ernet (página w eb o blog) una animación CSS y ejecút ala en t u navegador. Escribe por
separado el código HTM L y el código CSS. Describe paso a paso qué es lo que indica cada fragment o de
código CSS. ¿Es necesario usar prefijos de navegador para lograr su ejecución en ot ros navegadores?

Final curso tutorial progra
amación w eb CS
SS desde cero.
FINAL DEL
L CURSO TUT
TORIAL
Con est a ent rega lleggamos al finaal del curso “ Tut orial bá
ásico del pro
ogramador w eb: CSS desde cero” .
Esperamo os que haya sido un cursso út il y ame eno para t od as las perso nas que lo h
hayan seguid
do. Y como
en t odo fiinal, cabe hacer algunas consideracioones especiales.
- uipo humano
Gracias al equ o de aprend eraprograma ar.com que ha h hecho po osible su pub
blicación, y
en especial a Javier Roa, Jorge M aest ro, M anuel Tello, Walt er Sagást egu
ui, Enrique González
G y
M ario Rodrígu
uez.
- Gracias a t od as las person

nas que de una
u u ot ra fo
orma han pa
art icipado en
nviando prop
puest as de
m
mejora, com ent arios, avvisos de errrat as, et c. y a los alum
mnos que h han seguidoo el curso
co
olaborando a t ravés de loos foros.
- A t odos los que

q no han part
p icipado pero
p han segguido el cursso de forma grat uit a a t ravés
r de la
w eb, desde aprenderapr
a rogramar.com
m les agrad eceríamos nos
n hicieran llegar una opinión o
p ropuest a ded mejora sobre el mismo, bien b a t ra
avés de co orreo electt rónico a
ont act o@ap renderaprog
co gramar.com , bien a t ravés
r de loss foros. Tod
das las opin niones son
b ienvenidas y nos sirven para
p mejorarr.
- A quienes hayyan seguido el curso de formaf grat uitt a y piensen que los con t enidos son de calidad
y que merece e dar un peqqueño apoyo o económico o para que se e puedan seeguir ofrecienndo más y
m
mejores cont enidos
e en esst e sit io w eb
b, les est aremmos muy agradecidos si realizan una a pequeña
ap
port ación ecconómica en forma de do onación pulsando sobre el enlace qu e aparece en n la página
p rincipal de aprenderaproogramar.com m.
Quienes t engan int er és en proseg

guir formánd
dose en el área de programación y programació
ón w eb les
animamo s a que visit en la sección “ Cursos d e aprenderaprogramar.com” en la URL
ht t p:/ / w ww
w.aprenderap
programar.co m/ index.php?
?opt ion=com_
_cont ent & view
w=art icle& id=
=57& It emid=8
86
Quienes est én int eresado

os en cursos t ut orizados on-line pueden visit ar
ht t p:/ / w ww
w.aprenderap
programar.co m/ index.php?
?opt ion=com_
_cont ent & view
w=art icle& id=
=64& It emid=8
87
os que nos ha
A t odos lo an leído y no
os siguen, gra
acias. ¡Nos vemos
v en el próximo!
p
El equ
uipo de apre
enderaprogrramar.com
om, 2006-2029

0091 Css Desde Cero PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

0091 Css Desde Cero PDF

Cargado por

Copyright:

Formatos disponibles

TUTORIAL BÁSICO DEL PROGRAM ADOR W EB:

CSS DESDE CERO.

Dirección, modalidades y certificados

Para más información: cont act o@aprenderaprogramar.com

2.1. De la est ruct ura

M ás inform ación: cont act o@aprenderap

6.1. Color de fondo. Propiedad background-color CSS.

7. UNIDADES DE M EDIDA. PROPIEDADES W IDTH Y HEIGHT.

8. BORDES CSS. PROPIEDADES RELACIONADAS.

9. M ARGEN (M ARGIN) Y RELLENO (PADDING). PROPIEDADES RELACIONADAS.

11. FUENTES Y TEXTO.

M ás información: cont act o@aprenderaprogramar.com

12. ENLACES CSS.

13. LISTAS CSS.

14. TABLAS CSS.

15. COM PATIBILIDAD Y PREFIJOS DE NAVEGADOR: CHROM E, FIREFOX, INTERNET EXPLORER,

16. EFECTOS CSS DE ÚLTIM A GENERACIÓN. USO DE SPRITES. ANIM ACIONES.

M ás información: cont act o@aprenderaprogramar.com

16.6. Angulos CSS: unidades deg, grad, t urn, rad.

17. M ÁS SOBRE CSS.

17.1. Ot ros aspect os de CSS.

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:

M ás información: cont act o@aprenderaprogramar.com

CSS no es un lenguaje de programación propiament e dicho, aunque a veces se lo denomina lenguaje de

Conocer algún lenguaje de programación sería un aspect o posit ivo.

Próxima entrega: CU01003D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:

DEFINICIÓN O CONCEPTO DE LENGUAJE CSS

<t it le>Ejemplo aplicación CSS - aprenderaprogramar.com</ t it le>

<p>Text o de ejemplo para visualizar result ados </ p>

Próxima entrega: CU01004D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:

PARA QU É SIRVE CSS

CSS es u n lenguaje que sirve para

A veces o irás hablar de

n lenguaje q ue apareció para hacer más fáciles y con mejo r aspect o lo

Próxima entrega: CU01005D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:

EFECTOS CSS. UBICAR

Est a pregunt a no es de uest a. Vamo s a ver con un

<!DOCTY YPE HTM L PUBLIC " -/ / W3C/ / DTD

Con Javasscript podem

<!DOCTY YPE HTM L PUBLIC " -/ / W3C/ / DTD

Para est o podemos cit ar varios mot ivos:

b) M otivos de independencia de tecnologías: HTM L es una cosa y Javascript es ot ra, aunque en la

Próxima entrega: CU01006D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:

Ya hemoss dicho que CSS nos perrmit e separa

pt o de aplicación w eb (programa que

M uchas de ue personas que no t ien

mla, Drupal, OpenCM S, Plone, WordPrress,

dos para la ccreación de sist

CLASIFICACIÓN EJEM PLOS DESCRIPCIÓN

Pensados para mant ener un sist ema de

Tiendas y Pensadas para crear t iendas elect rónicas y

Ext Calendar, phpScheduleit , WebCalendar, Permit en crear calendarios, galerías de

M ILLONES DE DESCARGAS, M ILLONES DE W EBS DISTINTAS

Lo primero es lo primero, así que em pecemos con los fundament os de CSS.

Próxima entrega: CU01007D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguient e:

Para ver cómo

Crea un d ocument o HTM

<!DOCTYPE HTM L PUBLIC