Modulo 2 - CSS

Módulo
Introducción a HTML, CSS y

JavaScript
Autor del documento:
Centro de Apoyo Tecnológico a Emprendedores
Datos de contacto:
E-Mail: bilib@bilib.es
Página Web: www.bilib.es
Teléfono: 967 555 311
Licencia del documento:
Copyright © 2017, Centro de Apoyo Tecnológico a Emprendedores

Publicado bajo licencia Creative Commons By - Sa
Usted es libre de:
• Copiar, distribuir y comunicar públicamente la obra.

• Hacer obras derivadas
• Bajo las condiciones siguientes:
Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor
o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que
hace de su obra).
Compartir bajo la misma licencia. Si transforma o modifica esta obra para crear una obra
derivada, sólo puede distribuir la obra resultante bajo la misma licencia, una similar o una
compatible.
Al reutilizar o distribuir la obra, tiene que dejar bien claro los términos de la licencia de esta
obra.
Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los
derechos de autor.
Nada en esta licencia menoscaba o restringe los derechos morales del autor.
Los logos y marcas anunciados o referidos en este documento son propiedad de sus
respectivos dueños, todos o algunos derechos reservados dependiendo de su Licencia.
2 Introducción a CSS 6
Índice
Índice ............................................................................................................................... 2
1. Introducción del módulo ........................................................................................ 5
1.1 Objetivos del módulo ........................................................................................ 5
2. CSS y HTML.............................................................................................................. 5
3. Estilos y estructura .................................................................................................. 7
3.1 Elementos block ................................................................................................ 7
3.2 Modelos de caja ................................................................................................ 8
4. Conceptos básicos sobre estilos ........................................................................... 10
4.1 Sintaxis CSS ...................................................................................................... 10
4.2 Selectores ........................................................................................................ 11
4.2.1 Selector universal ..................................................................................... 11
4.2.2 Selector de tipo o etiqueta ....................................................................... 12
4.2.3 Selector descendente ............................................................................... 14
4.2.4 Selector de clase ....................................................................................... 17
4.2.5 Selectores de ID ........................................................................................ 22
4.2.6 Combinación de selectores básicos.......................................................... 24
4.3 Estilos en línea ................................................................................................. 24
4.4 Estilos embebidos ............................................................................................ 25
4.5 Archivos externos ............................................................................................ 26
4.6 Referencias ...................................................................................................... 28
4.7 Nuevos selectores ........................................................................................... 36
5. Propiedades CSS.................................................................................................... 37
5.1 Nuevos estilos CSS3 ......................................................................................... 38
5.1.1 Border-radius ............................................................................................ 39
5.1.2 Border-shadow ......................................................................................... 40
5.1.3 Text-shadow ............................................................................................. 42
5.1.4 @font-face ................................................................................................ 42
5.1.5 Gradiente lineal ........................................................................................ 44
5.1.6 Transform y transition .............................................................................. 44
6. Buenas prácticas con CSS ...................................................................................... 47
6.1 Inicializar estilos .............................................................................................. 47
6.2 Comprobar el diseño en varios navegadores .................................................. 52
6.2.1 Principales navegadores ........................................................................... 52
6.2.2 Probar el diseño en todos los navegadores ............................................. 53
6.2.3 Integrar Internet Explorer en Firefox ....................................................... 54
6.2.4 Diferentes versiones de Internet Explorer ............................................... 54
6.3 Hojas de estilos ................................................................................................ 55
6.3.1 Llaves ........................................................................................................ 55
6.3.2 Tabulaciones ............................................................................................. 56
6.3.3 Propiedades .............................................................................................. 58
6.3.4 Selectores ................................................................................................. 59
6.3.5 Organización ............................................................................................. 60
6.3.6 Comentarios ............................................................................................. 61
6.4 Rendimiento .................................................................................................... 62
7. Glosario de términos del módulo ......................................................................... 65
8. Bibliografía ............................................................................................................ 66
9. Casos prácticos...................................................................................................... 66
9.1 Caso práctico 1 ................................................................................................ 66
9.2 Caso práctico 2 ................................................................................................ 69
10. Cuestionario de autoevaluación ......................................................................... 70
1. Introducción del módulo
CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los
elementos del documento, como tamaño, color, fondo, bordes, etc…
1.1 Objetivos del módulo
En este capítulo, vamos a estudiar conceptos básicos de CSS y las nuevas técnicas de
CSS3 ya disponibles para presentación y estructuración.
También aprenderemos cómo utilizar los nuevos selectores y pseudo clases que hacen
más fácil la selección e identificación de elementos HTML.
Vamos a revisar estilos CSS y explicar algunas técnicas básicas para definir la estructura
de un documento. Si usted ya se encuentra familiarizado con estos conceptos, siéntase
libre de obviar las partes que ya conoce.
2. CSS y HTML
Como aclaramos anteriormente, la nueva especificación de HTML (HTML5) no describe
solo los nuevos elementos HTML o el lenguaje mismo. La web demanda diseño y
funcionalidad, no solo organización estructural o definición de secciones. En este
nuevo paradigma, HTML se presenta junto con CSS y Javascript como un único
instrumento integrado.
La función de cada tecnología ya ha sido explicada en capítulos previos, así como los
nuevos elementos HTML responsables de la estructura del documento. Ahora es
momento de analizar CSS, su relevancia dentro de esta unión estratégica y su influencia
sobre la presentación de documentos HTML.
Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de la especificación y
nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar
las limitaciones y reducir la complejidad de HTML. Al comienzo, atributos dentro de las
etiquetas HTML proveían estilos esenciales para cada elemento, pero a medida que el
lenguaje evolucionó, la escritura de códigos se volvió más compleja y HTML por sí
mismo no pudo más satisfacer las demandas de diseñadores. En consecuencia, CSS
pronto fue adoptado como la forma de separar la estructura de la presentación. Desde
entonces, CSS ha crecido y ganado importancia, pero siempre desarrollado en paralelo,
enfocado en las necesidades de los diseñadores y apartado del proceso de evolución
de HTML.
La versión 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso.
La especificación de HTML5 fue desarrollada considerando CSS a cargo del diseño.
Debido a esta consideración, la integración entre HTML y CSS es ahora vital para el
desarrollo web y esta es la razón por la que cada vez que mencionamos HTML5 también
estamos haciendo referencia a CSS3, aunque oficialmente se trate de dos tecnologías
completamente separadas.
En este momento las nuevas características incorporadas en CSS3 están siendo
implementadas e incluidas junto al resto de la especificación en navegadores
compatibles con HTML5.
3. Estilos y estructura
A pesar de que cada navegador garantiza estilos por defecto para cada uno de los
elementos HTML, estos estilos no necesariamente satisfacen los requerimientos de
cada diseñador. Normalmente se encuentran muy distanciados de lo que queremos
para nuestros sitios webs. Diseñadores y desarrolladores a menudo deben aplicar sus
propios estilos para obtener la organización y el efecto visual que realmente desean.
3.1 Elementos block
Con respecto a la estructura, básicamente cada navegador ordena los elementos por
defecto de acuerdo a su tipo: block (bloque) o inline (en línea). Esta clasificación está
asociada con la forma en que los elementos son mostrados en pantalla.
• Elementos block son posicionados uno sobre otro hacia abajo en la página.
• Elementos inline son posicionados lado a lado, uno al lado del otro en la misma
línea, sin ningún salto de línea a menos que ya no haya más espacio horizontal
para ubicarlos.
Casi todos los elementos estructurales en nuestros documentos serán tratados por los
navegadores como elementos block por defecto. Esto significa que cada elemento
HTML que representa una parte de la organización visual (por ejemplo, <section>,
<nav>, <header>, <footer>, <div>) será posicionado debajo del anterior.
En el Capítulo 1 creamos un documento HTML con la intención de reproducir un sitio
web tradicional. El diseño incluyó barras horizontales y dos columnas en el medio.
Debido a la forma en que los navegadores muestran estos elementos por defecto, el
resultado en la pantalla está muy lejos de nuestras expectativas. Tan pronto como ese
archivo HTML es abierto en el navegador, la posición errónea en la pantalla de las dos
columnas definidas por los elementos <section> y <aside> es claramente visible. Una
columna está debajo de la otra en lugar de estar a su lado, como correspondería.
Cada bloque (block) es mostrado por defecto tan ancho como sea posible, tan
alto como la información que contiene y uno sobre otro, como se muestra en la
Ilustración 1.
Ilustración 1 - Representación visual de una página web mostrada con estilos por defecto
3.2 Modelos de caja
Para aprender cómo podemos crear nuestra propia organización de los elementos en
pantalla, debemos primero entender cómo los navegadores procesan el código HTML.
Los navegadores consideran cada elemento HTML como una caja. Una página web es
en realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son
establecidas por estilos provistos por los navegadores o por los diseñadores usando
CSS.
CSS tiene un set predeterminado de propiedades destinados a sobrescribir los estilos

provistos por navegadores y obtener la organización deseada. Estas propiedades no
son específicas, tienen que ser combinadas para formar reglas que luego serán usadas
para agrupar cajas y obtener la correcta disposición en pantalla. La combinación de
estas reglas es normalmente llamada modelo o sistema de disposición. Todas estas
reglas aplicadas juntas constituyen lo que se llama un modelo de caja.
Existe solo un modelo de caja que es considerado estándar estos días, y muchos otros
que aún se encuentran en estado experimental. El modelo válido y ampliamente
adoptado es el llamado Modelo de Caja Tradicional, el cual ha sido usado desde la
primera versión de CSS.
Aunque este modelo ha probado ser efectivo, algunos modelos experimentales

intentan superar sus deficiencias, pero la falta de consenso sobre el reemplazo más
adecuado aún mantiene a este viejo modelo en vigencia y la mayoría de los sitios webs
programados en HTML5 lo continúan utilizando.
4. Conceptos básicos sobre estilos

Antes de comenzar a insertar reglas CSS en nuestro archivo de estilos y aplicar un
modelo de caja, debemos revisar los conceptos básicos sobre estilos CSS que van a ser
utilizados en el resto del libro.
Aplicar estilos a los elementos HTML cambia la forma en que estos son presentados en
pantalla. Como explicamos anteriormente, los navegadores proveen estilos por
defecto que en la mayoría de los casos no son suficientes para satisfacer las
necesidades de los diseñadores. Para cambiar esto, podemos sobrescribir estos estilos
con los nuestros usando diferentes técnicas.
4.1 Sintaxis CSS
Al definir un estilo se utilizan reglas de texto simples para describir el aspecto de los
elementos de la página. Una regla CSS se caracteriza por dos elementos principales: un
selector de tipo para especificar a qué etiquetas del documento se aplica el estilo y una
declaración de estilo, que se define entre paréntesis, para especificar qué estilo aplicar
a las etiquetas seleccionadas. A su vez, la declaración está compuesta por una o más
propiedades, seguidas por el carácter ":" (dos puntos), uno o más valores asociados a
cada propiedad, entre comillas y separados por comas si hay múltiples valores, y todos
seguidos por un punto y coma. La sintaxis es la siguiente:
La siguiente sintaxis define, por ejemplo, el estilo que se aplicará a un hipervínculo

(etiqueta <A>), es decir fuente Verdana de 18 píxeles de tamaño, en negrita y en
color amarillo:
A {
font-family: Verdana;
font-size: 18px;
font-style: bold;
color: yellow
}
4.2 Selectores
4.2.1 Selector universal

Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo
elimina el margen y el relleno de todos los elementos HTML (por ahora no es
importante fijarse en la parte de la declaración de la regla CSS):
* {
margin: 0;
padding: 0;
}
El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se

utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los
elementos de una página.
No obstante, sí que se suele combinar con otros selectores y además, forma parte de
algunos hacks muy utilizados, como se verá más adelante.
4.2.2 Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor
del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p {
...
}
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta
HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren
seleccionar.
El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una
página HTML:
h1 {
color: red;
}
h2 {
color: blue;
}
p {
color: black;
}
Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar
los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los
mismos estilos:
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
}
h3 {
color: #8A8E27;
}
En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con
un selector múltiple. Para ello, se incluyen todos los selectores separados por una
coma (,) y el resultado es que la siguiente regla CSS es equivalente a las tres reglas
anteriores:
h1, h2, h3 {
color: #8A8E27;
}
En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios
elementos en una única regla CSS y posteriormente definir las propiedades específicas
de esos mismos elementos. El siguiente ejemplo establece en primer lugar las
propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación,
establece el tamaño de letra de cada uno de ellos:
h1, h2, h3 {
color: #8A8E27;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
4.2.3 Selector descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento
es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de
cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la página
que se encuentren dentro de un elemento <p>:
p span { color: red; }
Si el código HTML de la página es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
El selector p span selecciona tanto texto1 como texto2. El motivo es que, en el selector
descendente, un elemento no tiene que ser descendiente directo del otro. La única
condición es que un elemento debe estar dentro de otro elemento, sin importar el
nivel de profundidad en el que se encuentre.
Al resto de elementos <span> de la página que no están dentro de un elemento <p>,

no se les aplica la regla CSS anterior.
Los selectores descendentes permiten aumentar la precisión del selector de tipo o

etiqueta. Así, utilizando el selector descendente es posible aplicar diferentes estilos a
los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de
color azul todo el texto de los <span> contenidos dentro de un <h1>:
p span { color: red; }

h1 span { color: blue; }
Con las reglas CSS anteriores:
Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de

color rojo.
Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de

color azul.
El resto de elementos <span> de la página, se muestran con el color por defecto
aplicado por el navegador.
La sintaxis formal del selector descendente se muestra a continuación:
selector1 selector2 selector3 ... selectorN
Los selectores descendentes siempre están formados por dos o más selectores
separados entre sí por espacios en blanco. El último selector indica el elemento sobre
el que se aplican los estilos y todos los selectores anteriores indican el lugar en el que
se debe encontrar ese elemento.
En el siguiente ejemplo, el selector descendente se compone de cuatro selectores:
p a span em { text-decoration: underline; }
Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se
encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro
de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.
No debe confundirse el selector descendente con la combinación de selectores:
/* El estilo se aplica a todos los elementos "p", "a", "span"

y "em" */
p, a, span, em { text-decoration: underline; }
/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
Se puede restringir el alcance del selector descendente combinándolo con el selector

universal. El siguiente ejemplo, muestra los dos enlaces de color rojo:
p a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color

rojo:
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
La razón es que el selector p * a se interpreta como todos los elementos de tipo <a>
que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro
de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente
bajo un elemento <p>, no se cumple la condición del selector p * a.
4.2.4 Selector de clase

Si se considera el siguiente código HTML de ejemplo:
<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal (*) no
se puede utilizar porque selecciona todos los elementos de la página. El selector de
tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos.
Por último, el selector descendente (body p) tampoco se puede utilizar porque todos
los párrafos se encuentran en el mismo sitio.
Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página
consiste en utilizar el atributo class de HTML sobre ese elemento para indicar
directamente la regla CSS que se le debe aplicar:
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos
los estilos que se van a aplicar al elemento. Para que el navegador no confunda este
selector con los otros tipos de selectores, se prefija el valor del atributo class con un
punto (.) tal y como muestra el siguiente ejemplo:
.destacado { color: red; }
El selector .destacado se interpreta como "cualquier elemento de la página cuyo

atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple
esa condición.
Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con
los selectores de ID que se verán a continuación. La principal característica de este
selector es que en una misma página HTML varios elementos diferentes pueden utilizar
el mismo valor en el atributo class:
<body>
<p>Nunc sed lacus et <a href="#" class="destacado">est
adipiscing</a> accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu
ad</em> litora...</p>
</body>
Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya
que permiten disponer de una precisión total al seleccionar los elementos. Además,
estos selectores permiten reutilizar los mismos estilos para varios elementos
diferentes.
A continuación, se muestra otro ejemplo de selectores de clase:
.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
<span class="error">...</span>
<div class="aviso">...</div>
El elemento <span> tiene un atributo class="error", por lo que se le aplican las reglas
CSS indicadas por el selector .error. Por su parte, el elemento <div> tiene un atributo
class="aviso", por lo que su estilo es el que definen las reglas CSS del selector .aviso.
En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de

nuevo el ejemplo anterior:
<body>
<p>Nunc sed lacus et <a href="#" class="destacado">est
adipiscing</a> accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu
ad</em> litora...</p>
</body>
¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual a
destacado? Combinando el selector de tipo y el selector de clase, se obtiene un selector
mucho más específico:
p.destacado { color: red }
El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que

dispongan de un atributo class con valor destacado". De la misma forma, el selector
a.destacado solamente selecciona los enlaces cuyo atributo class sea igual a destacado.
De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por

lo que todos los diseñadores obvian el símbolo * al escribir un selector de clase normal.
No debe confundirse el selector de clase con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo class="aviso"

*/
p.aviso { ... }
/* Todos los elementos con atributo class="aviso" que estén
dentro
de cualquier elemento de tipo "p" */
p .aviso { ... }
/* Todos los elementos "p" de la página y todos los elementos
con atributo class="aviso" de la página */
p, .aviso { ... }
Por último, es posible aplicar los estilos de varias clases CSS sobre un mismo elemento.
La sintaxis es similar, pero los diferentes valores del atributo class se separan con
espacios en blanco. En el siguiente ejemplo:
<p class="especial destacado error">Párrafo de texto...</p>
Al párrafo anterior se le aplican los estilos definidos en las reglas .especial, .destacado
y .error, por lo que en el siguiente ejemplo, el texto del párrafo se vería de color rojo,
en negrita y con un tamaño de letra de 15 píxel:
.error { color: red; }

.destacado { font-size: 15px; }
.especial { font-weight: bold; }
Si un elemento dispone de un atributo class con más de un valor, es posible utilizar un

selector más avanzado:
.error { color: red; }

.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es que
se ha utilizado un selector de clase múltiple .error.destacado, que se interpreta como
"aquellos elementos de la página que dispongan de un atributo class con al menos los
valores error y destacado".
4.2.5 Selectores de ID
En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página. Aunque
puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe
otro selector más eficiente en este caso.
El selector de ID permite seleccionar un elemento de la página a través del valor de su

atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque
el valor del atributo id no se puede repetir en dos elementos diferentes de una misma
página.
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo

que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del
nombre de la regla CSS:
#destacado { color: red; }

<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo

(cuyo atributo id es igual a destacado).
La principal diferencia entre este tipo de selector y el selector de clase tiene que ver
con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id
debe ser único, de forma que dos elementos diferentes no pueden tener el mismo
valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma
que muchos elementos HTML diferentes pueden compartir el mismo valor para su
atributo class.
De esta forma, la recomendación general es la de utilizar el selector de ID cuando se
quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector
de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página
HTML.
Al igual que los selectores de clase, en este caso también se puede restringir el alcance
del selector mediante la combinación con otros selectores. El siguiente ejemplo aplica
la regla CSS solamente al elemento de tipo <p> que tenga un atributo id igual al
indicado:
p#aviso { color: blue; }
A primera vista, restringir el alcance de un selector de ID puede parecer absurdo. En

realidad, un selector de tipo p#aviso sólo tiene sentido cuando el archivo CSS se aplica
sobre muchas páginas HTML diferentes.
En este caso, algunas páginas pueden disponer de elementos con un atributo id igual
a aviso y que no sean párrafos, por lo que la regla anterior no se aplica sobre esos
elementos.
No debe confundirse el selector de ID con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo id="aviso" */

p#aviso { ... }
/* Todos los elementos con atributo id="aviso" que estén
dentro de cualquier elemento de tipo "p" */
p #aviso { ... }
/* Todos los elementos "p" de la página y todos los elementos
con atributo id="aviso" de la página */
p, #aviso { ... }
4.2.6 Combinación de selectores básicos
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance
de las reglas CSS. A continuación se muestran algunos ejemplos habituales de
combinación de selectores.
.aviso .especial { ... }
El anterior selector solamente selecciona aquellos elementos con un class="especial"

que se encuentren dentro de cualquier elemento con un class="aviso".
Si se modifica el anterior selector:
div.aviso span.especial { ... }
Ahora, el selector solamente selecciona aquellos elementos de tipo <span> con un

atributo class="especial" que estén dentro de cualquier elemento de tipo <div> que
tenga un atributo class="aviso".
La combinación de selectores puede llegar a ser todo lo compleja que sea necesario:
ul#menuPrincipal li.destacado a#inicio { ... }
El anterior selector hace referencia al enlace con un atributo id igual a inicio que se
encuentra dentro de un elemento de tipo <li> con un atributo class igual a destacado,
que forma parte de una lista <ul> con un atributo id igual a menuPrincipal.
4.3 Estilos en línea
Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es
la de asignar los estilos dentro de las etiquetas por medio del atributo style.
El siguiente código muestra un documento HTML simple que contiene el elemento <p>
modificado por el atributo style con el valor font-size: 20px. Este estilo cambia el
tamaño por defecto del texto dentro del elemento <p> a un nuevo tamaño de 20
pixeles.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este es el título del documento</title>
</head>
<body>
<p style=”font-size: 20px”>Mi texto</p>
</body>
</html>
Usar la técnica demostrada anteriormente es una buena manera de probar estilos y

obtener una vista rápida de sus efectos, pero no es recomendado para aplicar estilos a
todo el documento. La razón es simple: cuando usamos esta técnica, debemos escribir
y repetir cada estilo en cada uno de los elementos que queremos modificar,
incrementando el tamaño del documento a proporciones inaceptables y haciéndolo
imposible de mantener y actualizar.
Solo imagine lo que ocurriría si decide que en lugar de 20 pixeles el tamaño de cada
uno de los elementos <p> debería ser de 24 pixeles. Tendría que modificar cada estilo
en cada etiqueta <p> en el documento completo.
4.4 Estilos embebidos
Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar
referencias para afectar los elementos HTML correspondientes:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<style>
p { font-size: 20px }
</style>
</head>
<body>
<p>Mi texto</p>
</body>
</html>
El elemento <style> permite a los desarrolladores agrupar estilos CSS dentro del
documento. En versiones previas de HTML era necesario especificar qué tipo de estilos
serían insertados. En HTML5 los estilos por defecto son CSS, por lo tanto, no
necesitamos agregar ningún atributo en la etiqueta de apertura <style>.
El código resaltado tiene la misma función que la línea de código del punto anterior,
pero en este caso no tuvimos que escribir el estilo dentro de cada etiqueta <p> porque
todos los elementos <p> ya fueron afectados.
Con este método, reducimos nuestro código y asignamos los estilos que queremos a
elementos específicos utilizando referencias.
4.5 Archivos externos
Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código
más consistente y actualizable, pero nos requiere hacer una copia de cada grupo de
estilos en todos los documentos de nuestro sitio web. La solución es mover todos los
estilos a un archivo externo y luego utilizar el elemento <link> para insertar este
archivo dentro de cada documento que los necesite. Este método nos permite cambiar
los estilos por completo simplemente incluyendo un archivo diferente. También nos
permite modificar o adaptar nuestros documentos a cada circunstancia o dispositivo.
En el Capítulo 1, estudiamos la etiqueta <link> y cómo utilizarla para insertar archivos

con estilos CSS en nuestros documentos. Utilizando la línea <link rel=”stylesheet”
href=”misestilos.css”> le decimos al navegador que cargue el archivo misestilos.css
porque contiene todos los estilos necesitados para presentar el documento en
pantalla.
Esta práctica fue ampliamente adoptada por diseñadores que ya están trabajando con
HTML5. La etiqueta <link> referenciando el archivo CSS será insertada en cada uno de
los documentos que requieren de esos estilos:
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p>Mi texto</p>
</body>
</html>
4.6 Referencias
Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro
de cada documento que lo necesite es muy conveniente, sin embargo, no podremos
hacerlo sin buenos mecanismos que nos ayuden a establecer una específica relación
entre estos estilos y los elementos del documento que van a ser afectados.
Cuando hablábamos sobre cómo incluir estilos en el documento, mostramos una de

las técnicas utilizadas a menudo en CSS para referenciar elementos HTML. En el punto
2.3.2, el estilo para cambiar el tamaño de la letra referenciaba cada elemento <p>
usando la palabra clave p. De esta manera el estilo insertado entre las etiquetas <style>
referenciaba cada etiqueta <p> del documento y asignaba ese estilo particular a cada
una de ellas.
Existen varios métodos para seleccionar cuáles elementos HTML serán afectados por
las reglas CSS:
• Referencia por la palabra clave del elemento

• Referencia por el atributo id
• Referencia por el atributo class
• Referencias con pseudo-clases
Más tarde veremos que CSS3 es bastante flexible a este respecto e incorpora nuevas y
más específicas técnicas para referenciar elementos, pero por ahora aplicaremos solo
estas tres.
Referenciando con palabra clave
Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada
elemento de la misma clase en el documento. Por ejemplo, la siguiente regla cambiará
los estilos de todos los elementos <p>:
p { font-size: 20px }
Esta es la técnica presentada previamente en el apartado 2.3.2. Utilizando la palabra

clave p al frente de la regla le estamos diciendo al navegador que esta regla debe ser
aplicada a cada elemento <p> encontrado en el documento HTML. Todos los textos
envueltos en etiquetas <p> tendrán el tamaño de 20 pixeles.
Por supuesto, lo mismo funcionará para cualquier otro elemento HTML. Si

especificamos la palabra clave span en lugar de p, por ejemplo, cada texto entre
etiquetas <span> tendrá un tamaño de 20 pixeles.
¿Pero qué ocurre si solo necesitamos referenciar una etiqueta específica? ¿Debemos
usar nuevamente el atributo style dentro de esta etiqueta? La respuesta es no. Como
aprendimos anteriormente, el método de Estilos en Línea (usando el atributo style
dentro de etiquetas HTML) es una técnica en desuso y debería ser evitada.
Para seleccionar un elemento HTML específico desde las reglas de nuestro archivo CSS,
podemos usar dos atributos diferentes: id y class.
Referenciando con el atributo id
El atributo id es como un nombre que identifica al elemento. Esto significa que el valor
de este atributo no puede ser duplicado. Este nombre debe ser único en todo el
documento.
Para referenciar un elemento en particular usando el atributo id desde nuestro archivo

CSS la regla debe ser declarada con el símbolo # al frente del valor que usamos para
identificar el elemento:
#texto1 { font-size: 20px }
La regla en el Listado 2-6 será aplicada al elemento HTML identificado con el atributo
id=”texto1”. Ahora nuestro código HTML lucirá de esta manera:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<p id=”texto1”>Mi texto</p>
</body>
</html>
Referenciando con el atributo class
La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es

mejor utilizar class. Este atributo es más flexible y puede ser asignado a cada elemento
HTML en el documento que comparte un diseño similar:
.texto1 { font-size: 20px }
Para trabajar con el atributo class, debemos declarar la regla CSS con un punto antes
del nombre. La ventaja de este método es que insertar el atributo class con el valor
texto1 será suficiente para asignar estos estilos a cualquier elemento que queramos:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<p class=”texto1”>Mi texto</p>
<p class=”texto1”>Mi texto</p>
<p>Mi texto</p>
</body>
</html>
Los elementos <p> en las primeras dos líneas dentro del cuerpo del código tienen el
atributo class con el valor texto1. Como dijimos previamente, la misma regla puede ser
aplicada a diferentes elementos en el mismo documento. Por lo tanto, estos dos
primeros elementos comparten la misma regla y ambos serán afectados por el estilo
CSS. El último elemento <p> conserva los estilos por defecto otorgados por el
navegador.
La razón por la que debemos utilizar un punto delante del nombre de la regla es que
es posible construir referencias más complejas. Por ejemplo, se puede utilizar el mismo
valor para el atributo class en diferentes elementos pero asignar diferentes estilos para
cada tipo:
p.texto1 { font-size: 20px }
En este código creamos una regla que referencia la clase llamada texto1 pero solo para
los elementos de tipo <p>. Si cualquier otro elemento tiene el mismo valor en su
atributo class no será modificado por esta regla en particular.
Referenciando con cualquier atributo
Aunque los métodos de referencia estudiados anteriormente cubren un variado
espectro de situaciones, a veces no son suficientes para encontrar el elemento exacto.
La última versión de CSS ha incorporado nuevas formas de referenciar elementos
HTML. Uno de ellas es el Selector de Atributo. Ahora podemos referenciar un elemento
no solo por los atributos id y class sino también a través de cualquier otro atributo:
p[name] { font-size: 20px }
Esta cambia solo elementos <p> que tienen un atributo llamado name. Para imitar lo
que hicimos previamente con los atributos id y class, podemos también especificar el
valor del atributo:
p[name=”mitexto”] { font-size: 20px }
CSS3 permite combinar “=” con otros para hacer una selección más específica:
p[name^=”mi”] { font-size: 20px }

p[name$=”mi”] { font-size: 20px }
p[name*=”mi”] { font-size: 20px }
Estos selectores contienen expresiones regulares, y producen los siguientes

resultados:
• La regla con el selector ^= será asignada a todo elemento <p> que contiene un
atributo name con un valor comenzado en “mi”.
• La regla con el selector $= será asignada a todo elemento <p> que contiene un
atributo name con un valor finalizado en “mi”.
• La regla con el selector *= será asignada a todo elemento <p> que contiene un
atributo name con un valor que incluye el texto “mi”.
En estos ejemplos usamos el elemento <p>, el atributo name, y una cadena de texto al
azar como “mi”, pero la misma técnica puede ser utilizada con cualquier atributo y
valor que necesitemos. Solo tiene que escribir los corchetes e insertar entre ellos el
nombre del atributo y el valor que necesita para referenciar el elemento HTML
correcto.
Referenciando con pseudo clases
CSS3 también incorpora nuevas pseudo clases que hacen la selección aún más
específica.
Miremos el siguiente código HTML. Contiene tres elementos <p> que, considerando la
estructura HTML, son hermanos entre sí e hijos del mismo elemento <div>.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<div id="wrapper">
<p class="mitexto1">Mi texto1</p>
</div>
</body>
</html>
Usando pseudo clases podemos aprovechar esta organización y referenciar un
elemento específico sin importar cuánto conocemos sobre sus atributos y el valor de
los mismos:
p:nth-child(2){
background: #999999;
}
La pseudo clase es agregada usando dos puntos después de la referencia y antes del su
nombre. En la regla CSS anterior nos referenciamos solo al segundo hijo <p>.
Esta regla puede incluir otras referencias. Por ejemplo, podríamos escribirla como
.miclase:nth-child(2) para referenciar todo elemento que es hijo de otro elemento y
tiene el valor de su atributo class igual a miclase.
La pseudo clase puede ser aplicada a cualquier tipo de referencia estudiada

previamente.
En concreto, la pseudo clase nth-child() nos permite encontrar un hijo específico. Como
ya explicamos, el código HTML anterior tiene tres elementos <p> que son hermanos.
Esto significa que todos ellos tienen el mismo padre que es el elemento <div>. Lo que
esta pseudo clase está realmente indicando es algo como: “el hijo en la posición…” por
lo que el número entre paréntesis será el número de la posición del hijo, o índice.
La palabra clave odd para la pseudo clase nth-child() afecta los elementos <p> que son
hijos de otro elemento y tienen un índice impar. La palabra clave even, por otro lado,
afecta a aquellos que tienen un índice par.
Existen otras importantes pseudo clases relacionadas con esta última, como son:
• first-child referencia solo el primer hijo
• last-child referencia solo el último hijo
• only-child afecta un elemento siempre y cuando sea el único hijo disponible.
Estas pseudo clases en particular no requieren palabras clave o parámetros, y son
implementadas como en el siguiente ejemplo:
p:last-child{ }
Otra importante pseudo clase llamada not() es utilizada realizar una negación:
:not(p){
margin: 0px;
}
Esta regla asignará un margen de 0 pixeles a cada elemento del documento excepto
los elementos <p>. A diferencia del selector universal utilizado previamente, la pseudo
clase not() nos permite declarar una excepción. Los estilos en la regla creada con esta
pseudo clase serán asignados a todo elemento excepto aquellos incluidos en la
referencia entre paréntesis. En lugar de la palabra clave de un elemento podemos usar
cualquier otra referencia que deseemos. En el próximo listado, por ejemplo, todos los
elementos serán afectados excepto aquellos con el valor mitexto2 en el atributo class:
:not(.mitexto2){
margin: 0px;
}
Cuando aplicamos la última regla al código HTML del Listado 2-14 el navegador asigna
los estilos por defecto al elemento <p> identificado con el atributo class y el valor
mitexto2 y provee un margen de 0 pixeles al resto.
En la siguiente tabla podemos ver todas las pseudo-clases de Enlace y Dinámicos
Carácter especial Transcripción HTML Comentario
:link Enlace el valor del atributo href no está en el
histórico
:visited Enlace Visitado el valor del atributo href está en el histórico
:target Enlace Objetivo un enlace objetivo
:active Activo se ha hecho click sobre el elemento
:hover Sobre el cursor se encuentra sobre el elemento
:focus Foco el elemento captura el foco del documento
En la siguiente tabla podemos ver todas las pseudo-clases Estructurales y Otras:
Carácter especial Transcripción HTML Comentario

:root Raíz es el elemento principal de un documento
:empty Vacío no tiene nodos hijos
:only-child Hijo Único no tiene nodos hermanos
:only-of-type Solo del Tipo tiene un selector único entre sus hermanos
:first-child Primer Hijo es el primer nodo hijo de otro elemento
:nth-of-type(n) Nth del Tipo es el nth elemento con ese selector
:last-child Último Hijo es el último nodo hijo de un elemento
:first-of-type Primero del Tipo es el primer elemento de su tipo de selector
en el elemento primario
:last-of-type Último del Tipo es el último elemento de su tipo de selector
en el elemento primario
:lang Lenguaje tiene un código de lenguaje
específicamente definido
:not Negación no está usando un selector específico
4.7 Nuevos selectores
Hay algunos selectores más que fueron agregados o que ahora son considerados parte
de CSS3 y pueden ser útiles para nuestros diseños. Estos selectores usan los símbolos
>, + y ~ para especificar la relación entre elementos.
El selector > está indicando que el elemento a ser afectado por la regla es el elemento
de la derecha cuando tiene al de la izquierda como su padre. El siguiente ejemplo
modifica los elementos <p> que son hijos de un elemento <div>. En este caso, fuimos
bien específicos y referenciamos solamente el elemento <p> con el valor mitexto2 en
su atributo class.
div > p.mitexto2{

color: #990000;
}
El próximo ejemplo construye un selector utilizando el símbolo +. Este selector

referencia al elemento de la derecha cuando es inmediatamente precedido por el de
la izquierda. Ambos elementos deben compartir el mismo padre:
p.mitexto2 + p{
color: #990000;
}
El último selector que estudiaremos es el construido con el símbolo ~. Este selector es

similar al anterior pero el elemento afectado no necesita estar precediendo de
inmediato al elemento de la izquierda. Además, más de un elemento puede ser
afectado:
p.mitexto2 ~ p{
color: #990000;
}
5. Propiedades CSS
La lista de propiedades CSS es muy extensa. Puedes encontrar la lista completa y sus
valores admitidos en los siguientes enlaces:
• Propiedades de fuentes
• Propiedades de color y fondo
• Propiedades de texto
• Propiedades de cuadros
• Propiedades de clasificación
• Unidades
5.1 Nuevos estilos CSS3
Con CSS3, las hojas de estilo han recibido una actualización importante, incluyendo
nuevas características tanto para aplicar aspecto avanzado en los elementos de una
página, como para ayudarnos a realizar una maquetación más precisa. De esta forma
podremos hacer webs más elaboradas y más dinámicas, con mayor separación entre
estilos y contenidos. Dará soporte a muchas necesidades de las webs actuales, sin
tener que recurrir a trucos de diseñadores o lenguajes de programación.
Los nuevos estilos de CSS3 más importantes son los siguientes.
5.1.1 Border-radius
Por muchos años diseñadores han sufrido intentando lograr el efecto de esquinas
redondeadas en las cajas de sus páginas web. El proceso era casi siempre frustrante y
extenuante. Todos lo padecieron alguna vez. Esquinas redondeadas eran esa clase de
cosas que nos hacían pensar: “debería ser fácil hacerlo”. Sin embargo, nunca lo fue.
Esta es la razón por la que, entre todas las nuevas posibilidades e increíbles
propiedades incorporadas en CSS3, la que exploraremos en primera instancia es
border- radius.
.borde-redondeado {
border-radius: 20px;
}
Con este código, se redondearán los bordes de todo elemento cuya clase se borde-
redondeado, con un diámetro de 20px en todas las esquinas.
Si quisiéramos que cada esquina tuviera un radio de redondeo, podemos separar la

propiedad en 2 o 4 valores, igual que hemos visto anteriormente con el margin o
padding, por ejemplo.
5.1.2 Border-shadow
Otro muy buen efecto que había sido extremadamente complicado de lograr hasta
este momento es sombras. Durante mucho tiempo, los diseñadores han combinado
imágenes, elementos y algunas propiedades CSS para generar sombras. Gracias a CSS3
y a la nueva propiedad box-shadow podremos aplicar sombras a nuestras cajas con
solo una simple línea de código:
.sombra {
box-shadow: rgb(150,150,150) 5px 5px;
}
La propiedad box-shadow necesita al menos tres valores.
El primero es el color, que podemos expresarlo con la función rgb() y números

decimales, o con números hexadecimales.
Los siguientes dos valores, expresados en pixeles, establecen el desplazamiento de la
sombra. Este desplazamiento puede ser positivo o negativo. Los valores indican,
respectivamente, la distancia horizontal y vertical desde la sombra al elemento.
Valores negativos posicionarán la sombra a la izquierda y arriba del elemento, mientras
que valores positivos crearán la sombra a la derecha y debajo del elemento. Valores
de 0 o nulos posicionarán la sombra exactamente detrás del elemento, permitiendo la
posibilidad de crear un efecto difuminado a todo su alrededor.
La sombra que obtuvimos hasta el momento es sólida, sin gradientes o transparencias

(no realmente como una sombra suele aparecer). Existen algunos parámetros más y
cambios que podemos implementar para mejorar la apariencia de la sombra.
Un cuarto valor que se puede agregar a la propiedad ya estudiada es la distancia de

difuminado. Con este efecto ahora la sombra parecerá real. Por ejemplo:
box-shadow: rgb(150,150,150) 5px 5px 10px;
El último valor posible para box-shadow no es un número sino más bien una palabra
clave: inset. Esta palabra clave convierte a la sombra externa en una sombra interna,
lo cual provee un efecto de profundidad al elemento afectado.
box-shadow: rgb(150,150,150) 5px 5px 10px inset;
5.1.3 Text-shadow
La propiedad box-shadow fue diseñada especialmente para ser aplicada en cajas. Si

intenta aplicar este efecto a un elemento <span>, por ejemplo, la caja invisible ocupada
por este elemento en la pantalla tendrá una sombra, pero no el contenido del
elemento. Para crear sombras para figuras irregulares como textos, existe una
propiedad especial llamada text-shadow:
text-shadow: rgb(0,0,150) 3px 3px 5px;
Los valores para text-shadow son similares a los usados para box-shadow. Podemos
declarar el color de la sombra, la distancia horizontal y vertical de la sombra con
respecto al objeto y el radio de difuminado.
5.1.4 @font-face
Obtener un texto con sombra es realmente un muy buen truco de diseño, imposible
de lograr con métodos previos, pero más que cambiar el texto en sí mismo solo provee
un efecto tridimensional. Una sombra, en este caso, es como pintar un viejo coche, al
final será el mismo coche. En este caso, será el mismo tipo de letra.
El problema con las fuentes o tipos de letra es tan viejo como la web. Usuarios
regulares de la web a menudo tienen un número limitado de fuentes instaladas en sus
ordenadores, usualmente estas fuentes son diferentes de un usuario a otro, y la
mayoría de las veces muchos usuarios tendrán fuentes que otros no. Por años, los sitios
webs solo pudieron utilizar un limitado grupo de fuentes confiables (un grupo básico
que prácticamente todos los usuarios tienen instalados) y así presentar la información
en pantalla.
La propiedad @font-face permite a los diseñadores proveer un archivo conteniendo

una fuente específica para mostrar sus textos en la página. Ahora podemos incluir
cualquier fuente que necesitemos con solo proveer el archivo adecuado:
#titulo {
font: bold 36px MiNuevaFuente, verdana, sans-serif;
}
@font-face {
font-family: 'MiNuevaFuente';
src: url('font.ttf');
}
La propiedad @font-face necesita al menos dos estilos para declarar la fuente y cargar
el archivo. El estilo construido con la propiedad font-family especifica el nombre que
queremos otorgar a esta fuente en particular, y la propiedad src indica la URL del
archivo con el código correspondiente a esa fuente.
Una vez que la fuente es cargada, podemos comenzar a usarla en cualquier elemento
del documento simplemente escribiendo su nombre (MiNuevaFuente). En el estilo font
especificamos que el título será mostrado con la nueva fuente o las alternativas
verdana y sans-serif en caso de que la fuente incorporada no sea cargada
apropiadamente.
5.1.5 Gradiente lineal

Los gradientes son uno de los efectos más atractivos entre aquellos incorporados en
CSS3. Este efecto era prácticamente imposible de implementar usando técnicas
anteriores pero ahora es realmente fácil de hacer usando CSS. Una propiedad
background con algunos pocos parámetros es suficiente para convertir su documento
en una página web con aspecto profesional:
background: linear-gradient(orange, pink);
5.1.6 Transform y transition

Los elementos HTML, cuando son creados, son como bloques sólidos e inamovibles.
Pueden ser movidos usando código Javascript o aprovechando librerías populares
como jQuery (www.jquery.com), por ejemplo, pero no existía un procedimiento
estándar para este propósito hasta que CSS3 presentó las propiedades transform y
transition.
Ahora ya no tenemos que pensar en cómo hacerlo. En su lugar, solo tenemos que
conocer cómo ajustar unos pocos parámetros y nuestro sitio web puede ser tan flexible
y dinámico como lo imaginamos.
La propiedad transform puede operar cuatro transformaciones básicas en un

elemento: scale (escalar), rotate (rotar), skew (inclinar) y translate (trasladar o mover).
Veamos cómo funcionan:
Transform: scale
#principal {
transform: scale(2, -2);
}
La función scale puede recibir hasta dos parámetros: el valor X para la escala horizontal
y el valor Y para la escala vertical. Si solo un valor es provisto el mismo valor es aplicado
a ambos parámetros.
Números enteros y decimales pueden ser declarados para la escala. Esta escala es
calculada por medio de una matriz. Los valores entre 0 y 1 reducirán el elemento, un
valor de 1 mantendrá las proporciones originales y valores mayores que 1 aumentarán
las dimensiones del elemento de manera incremental.
Transform: rotate
La función rotate rota el elemento en la dirección de las agujas de un reloj. El valor

debe ser especificado en grados usando la unidad “deg”:
#principal {
transform: rotate(30deg);
}
Transform: skew
Esta función cambia la simetría del elemento en grados y en ambas dimensiones.
#principal {
transform: skew(20deg, 10deg);
}
La función skew puede usar hasta dos parámetros, pero a diferencia de otras
funciones, cada parámetro de esta función solo afecta a una dimensión (los
parámetros actúan de forma independiente). Si solo declaramos el primer parámetro,
solo la dimensión horizontal de la caja será modificada. Si usamos los dos parámetros,
podemos alterar ambas dimensiones del objeto. Como alternativa podemos utilizar
funciones diferentes para cada una de ellas: skewX y skewY.
Transform: translate
Similar a las viejas propiedades top y left, la función translate mueve o desplaza el
elemento en la pantalla a una nueva posición.
#principal {
transform: translate(100px);
}
La función translate considera la pantalla como una grilla de pixeles, con la posición
original del elemento usada como un punto de referencia. La esquina superior
izquierda del elemento es la posición 0,0, por lo que valores negativos moverán al
objeto hacia la izquierda o hacia arriba de la posición original, y valores positivos lo
harán hacia la derecha o hacia abajo.
Transiciones
La propiedad transition fue incluida para suavizar los cambios, creando mágicamente
el resto de los pasos que se encuentran implícitos en el movimiento. Solo agregando
esta propiedad forzamos al navegador a tomar cartas en el asunto, crear para nosotros
todos esos pasos invisibles, y generar una transición suave desde un estado al otro.
#principal {
transition: transform 1s ease-in-out 0.5s;
}
#principal:hover{
transform: rotate(5deg);
}
Como puede ver en el este ejemplo, la propiedad transition puede tomar hasta cuatro
parámetros separados por un espacio. El primer valor es la propiedad que será
considerada para hacer la transición (en nuestro ejemplo elegimos transform). Esto es
necesario debido a que varias propiedades pueden cambiar al mismo tiempo y
probablemente necesitemos crear los pasos del proceso de transición solo para una de
ellas.
El segundo parámetro especifica el tiempo que la transición se tomará para ir de la

posición inicial a la final.
El tercer parámetro puede ser cualquiera de las siguientes palabras clave: ease, linear,
ease-in, ease-out o ease-in-out. Estas palabras clave determinan cómo se realizará el
proceso de transición basado en una curva Bézier. Cada una de ellas representa
diferentes tipos de curva Bézier, y la mejor forma de saber cómo trabajan es viéndolas
funcionar en pantalla. El último parámetro para la propiedad transition es el retardo.
Este indica cuánto tiempo tardará la transición en comenzar.
Para producir una transición para todas las propiedades que están cambiando en un
objeto, la palabra clave all debe ser especificada. También podemos declarar varias
propiedades a la vez listándolas separadas por coma.
6. Buenas prácticas con CSS

6.1 Inicializar estilos
Cuando los navegadores muestran una página web, además de aplicar las hojas de
estilo de los diseñadores, siempre aplican otras dos hojas de estilos: la del navegador
y la del usuario.
La hoja de estilos del navegador se utiliza para establecer el estilo inicial por defecto a
todos los elementos HTML: tamaños de letra, decoración del texto, márgenes, etc. Esta
hoja de estilos siempre se aplica a todas las páginas web, por lo que cuando una página
no incluye ninguna hoja de estilos propia, el aspecto con el que se muestra en el
navegador se debe a esta hoja de estilos del navegador.
Por su parte, la hoja de estilos del usuario es la que puede aplicar el usuario mediante
su navegador. Aunque la inmensa mayoría de usuarios no utiliza esta característica, en
teoría es posible que los usuarios establezcan el tipo de letra, color y tamaño de los
textos y cualquier otra propiedad CSS de los elementos de la página que muestra el
navegador.
El orden en el que se aplican las hojas de estilo es el siguiente:
Por tanto, las reglas que menos prioridad tienen son las del CSS de los navegadores, ya
que son las primeras que se aplican. A continuación, se aplican las reglas definidas por
los usuarios y por último se aplican las reglas CSS definidas por el diseñador, que por
tanto son las que más prioridad tienen.
CSS define la palabra reservada !important para controlar la prioridad de las

declaraciones de las diferentes hojas de estilos. Las reglas CSS que incluyen la palabra
!important tienen prioridad sobre el resto de las reglas CSS, independientemente del
orden en el que se incluyan o definan las reglas.
En caso de igualdad, las reglas !important de los usuarios son más importantes que las
reglas !important del diseñador. Gracias a esta característica, si un usuario sufre
deficiencias visuales, puede crear una hoja de estilos CSS con reglas de tipo !important
con la seguridad de que el navegador siempre aplicará esas reglas por encima de
cualquier otra regla definida por los diseñadores.
El principal problema de las hojas de estilo de los navegadores es que los valores que
aplican por defecto son diferentes en cada navegador. Aunque todos los navegadores
coinciden en algunos valores importantes (tipo de letra serif, color de letra negro, etc.)
presentan diferencias en valores tan importantes como los márgenes verticales
(margin-bottom y margin-top) de los títulos de sección (<h1>, ... <h6>), la tabulación
izquierda de los elementos de las listas (margin-left o padding-left según el navegador)
y el tamaño de línea del texto (line-height).
A continuación, se muestra el código HTML de una página de ejemplo y seguidamente,

una imagen que muestra cómo la visualizan los navegadores Internet Explorer y
Firefox:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Reset</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Consectetuer adipiscing elit</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut consectetuer
adipiscing elit</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<table summary="Lorem Ipsum">
<caption>Lorem Ipsum</caption>
<tr>
<th>Celda 1-1</th>
<th>Celda 1-2</th>
</tr>
<tr>
<td>Celda 2-1</td>
<td>Celda 2-2</td>
</tr>
</table>
</body>
</html>
Como todas las hojas de estilo de los navegadores son diferentes, cuando un diseñador
prueba sus estilos sobre diferentes navegadores, es común encontrarse con
diferencias visuales apreciables. La solución a este problema es muy sencilla y consiste
en borrar o resetear los estilos que aplican por defecto los navegadores.
Una de las formas más sencillas de neutralizar algunos de los estilos de los navegadores
consiste en eliminar el margen y relleno a todos los elementos de la página para
establecerlos posteriormente de forma individual:
* {
margin: 0;
padding: 0;
}
Aunque la regla CSS anterior se ha utilizado desde hace muchos años, se trata de una
solución muy rudimentaria y limitada. La solución completa consiste en crear una hoja
de estilos CSS que neutralice todos los estilos que aplican por defecto los navegadores
y que pueden afectar al aspecto visual de las páginas. Este tipo de hojas de estilos se
suelen llamar "reset CSS".
6.2 Comprobar el diseño en varios navegadores
6.2.1 Principales navegadores

Una de las prácticas imprescindibles de los diseñadores web profesionales consiste en
probar su trabajo en varios navegadores diferentes. De esta forma, el diseñador puede
descubrir los errores de su trabajo y también los errores causados por los propios
navegadores.
El número de navegadores y versiones diferentes que se deben probar depende de

cada diseñador. En el caso ideal, el diseñador conoce estadísticas de uso de los
navegadores que utilizan los usuarios para acceder al sitio o aplicación web que está
diseñando. Una buena práctica consiste en probar los diseños en aquellos navegadores
y versiones que sumen un 90% de cuota de mercado.
Cuando no se dispone de estadísticas de uso o el diseño es para un sitio web

completamente nuevo, se debe probar el diseño en los navegadores más utilizados por
los usuarios en general. Aunque no existe ninguna estadística completamente fiable y
los resultados varían mucho de un país a otro, en general los siguientes navegadores y
versiones suman más del 90% de cuota de mercado: Internet Explorer 6, Internet
Explorer 7, Firefox 2, Firefox 3, Safari 3, Opera 9 y Google Chrome 1.
En primer lugar, los diseñadores web profesionales disponen de todos los navegadores
principales instalados en sus equipos de trabajo. Por lo tanto, si no lo has hecho ya,
descarga e instala los siguientes navegadores:
Firefox: disponible para sistemas operativos Windows, Mac, Linux y en más de 45
idiomas.
Opera: disponible para sistemas operativos Windows, Mac, Linux y en múltiples

idiomas.
Safari: disponible solamente para sistemas operativos Windows y Mac.
Google Chrome: disponible en más de 40 idiomas y para Windows, Mac, Linux.
Respecto al navegador Internet Explorer, la mayoría de diseñadores trabajan en

entornos Windows en los que ya está instalado por defecto. Si tienes la fortuna de
trabajar con un sistema operativo tipo Linux, puedes instalar varias versiones de
Internet Explorer mediante la aplicación IEs4Linux. También es posible instalar varias
versiones de Internet Explorer en los sistemas operativos Mac OS X gracias a la
aplicación ies4osx.
6.2.2 Probar el diseño en todos los navegadores

En algunas ocasiones no es suficiente con probar los diseños sólo en los navegadores
más utilizados, ya que el cliente quiere que su sitio o aplicación web se vea
correctamente en muchos otros navegadores. Por otra parte, no es práctico que los
diseñadores prueben sus trabajos en decenas de navegadores y versiones para cada
sistema operativo.
Afortunadamente, existe una aplicación web gratuita que permite solucionar este
problema. La aplicación Browsershots prueba la página indicada en varias versiones
diferentes de cada navegador, crea una imagen de cómo se ve la página en cada uno
de ellos y nos muestra esa imagen.
Aunque el proceso es lento y mucho menos flexible que probar la página en nuestros
propios navegadores, el resultado permite al diseñador comprobar si su trabajo se ve
correctamente en multitud de navegadores y sistemas operativos. En la actualidad,
Browsershots comprueba el aspecto de las páginas en 4 sistemas operativos y 72
navegadores diferentes.
6.2.3 Integrar Internet Explorer en Firefox

Algunos diseñadores prueban continuamente sus diseños en los navegadores Internet
Explorer y Firefox y después los comprueban en el resto de navegadores para corregir
los últimos errores. Si este es tu caso, puedes mejorar tu productividad gracias a una
extensión de Firefox.
IE Tab es una extensión que se instala en el navegador Firefox y hace que Internet
Explorer se integre en Firefox. Una vez instalada, esta extensión permite ver las páginas
con Internet Explorer dentro de Firefox.
Aunque resulta sorprendente, IE Tab hace que las páginas en Firefox se puedan ver
mediante Internet Explorer, de forma que los diseñadores no tienen que cambiar
constantemente de navegador y por tanto aumenta considerablemente su
productividad.
6.2.4 Diferentes versiones de Internet Explorer

El principal problema de los diseñadores web que quieren probar su trabajo en
diferentes navegadores y versiones es la imposibilidad de instalar varias versiones del
navegador Internet Explorer en el mismo sistema operativo.
Aunque la empresa Microsoft, creadora de Internet Explorer, sigue sin resolver este
problema, se han publicado soluciones no oficiales para disponer de varias versiones
de Internet Explorer en el mismo sistema operativo.
La primera solución propuesta fue el Browser Archive, un repositorio de navegadores
desde el que se pueden descargar versiones antiguas de decenas de navegadores
diferentes, entre ellos Internet Explorer. Lamentablemente hace mucho tiempo que
no se añaden nuevas versiones, por lo que la última versión disponible de Internet
Explorer es la 6.
Más recientemente se ha presentado IETester, una aplicación descargable

gratuitamente y que permite disponer de Internet Explorer 5.5, 6, 7 y 8 en un mismo
sistema operativo. De esta forma, IETester es una de las herramientas imprescindibles
de los diseñadores web profesionales.
6.3 Hojas de estilos
Las hojas de estilos reales de los sitios web profesionales suelen contener cientos de
reglas y ocupan miles de líneas. Por este motivo, es imprescindible seguir unas buenas
prácticas al crear las hojas de estilos para mejorar la producitivdad y reducir los
posibles errores. A continuación, se muestran algunas de las recomendaciones más
útiles para crear hojas de estilos profesionales.
6.3.1 Llaves
Uno de los elementos básicos que los diseñadores web deben acordar es el tipo de
llaves que se utilizan para encerrar la declaración de cada regla CSS. Aunque se utilizan
muchos modelos diferentes, a continuación se muestran los más populares.
Llave de apertura en la misma línea del selector y llave de cierre en una nueva línea
para separar unas reglas de otras:
selector {
propiedad1: valor1;
propiedad2: valor2;
}
Una variante del modelo anterior consiste en mostrar cada llave en su propia línea,
para separar aún más el selector de su declaración. Este modelo lo utilizan
normalmente los programadores web:
selector
{
propiedad1: valor1;
propiedad2: valor2;
}
Por último, existe un modelo compacto que no crea nuevas líneas para las llaves.
Aunque es mucho más compacto, normalmente es más difícil de leer:
selector {
propiedad1: valor1;
propiedad2: valor2; }
6.3.2 Tabulaciones
Tabular el código facilita significativamente su lectura, por lo que tabular las
propiedades CSS es una de las mejores prácticas de los diseñadores web profesionales.
Como conocen la mayoría de programadores, no es recomendable insertar
tabuladores en el código, sino que se deben emplear 2 o 4 espacios en blanco.
/* Propiedades sin tabular */

selector {
propiedad1: valor1;
propiedad2: valor2;
}
/* Propiedades tabuladas con 2 espacios */
selector {
propiedad1: valor1;
propiedad2: valor2;
}
Extendiendo la práctica de tabular las propiedades, algunos diseñadores recomiendan

tabular también las reglas CSS relacionadas. El siguiente ejemplo muestra tres reglas
CSS relacionadas entre sí:
ul {
margin: 1em 0;
padding: 0;
}
ul li {
list-style-type: square;
}
ul li ul {
font-style: italic;
list-style-type: disc;
La recomendación consiste en tabular las reglas CSS que están relacionadas porque sus
selectores están anidados. Por tanto, la regla cuyo selector es ul li debería estar
tabulada respecto de la regla ul y de la misma forma la regla cuyo selector es ul li ul
debería estar tabulada respecto de ul li:
ul {
margin: 1em 0;
padding: 0;
}
ul li {
list-style-type: square;
}
ul li ul {
font-style: italic;
list-style-type: disc;
}
6.3.3 Propiedades
Cuando se establece la misma propiedad en varios selectores diferentes pero
relacionados, se recomienda escribir las reglas CSS en una única línea, para facilitar su
lectura:
#contenedor #principal h1 { font-size: 2em; }

#contenedor #principal h2 { font-size: 1.8em; }
#contenedor #principal h3 { font-size: 1.6em; }
Respecto al orden en el que se indican las propiedades en la declaración, algunos

diseñadores recomiendan agruparlas por su funcionalidad:
selector {
position: absolute; /* propiedades de posicionamiento */
right: 0;
bottom: 10px;
width: 300px; /* propiedades de tamaño */

height: 250px;
color: #000; /* propiedades tipográficas */
font-size: 2em;
Otros diseñadores recomiendan ordenar alfabéticamente las propipedades para

facilitar su búsqueda y evitar duplicidades:
selector {
bottom: 10px;
color: #000;
font-size: 2em;
height: 250px;
position: absolute;
right: 0;
width: 300px;
}
6.3.4 Selectores
Los selectores deben ser descriptivos para facilitar la lectura de la hoja de estilos, por
lo que hay que poner especial cuidado en elegir el nombre de los atributos id y class.
Además, aunque aumenta el tamaño total de la hoja de estilos, se recomienda utilizar
selectores lo más específicos posible para facilitar el mantenimiento de la hoja de
estilos:
p.especial { ... } /* poco específico */

#contenedor #principal p.especial { ... } /* muy específico */
Por otra parte, cuando una regla CSS tiene varios selectores largos, es mejor colocar
cada selector en su propia línea:
#contenedor h1,
#contenedor #principal h2,
#contenedor #lateral blockquote {
color: #000;
font-family: arial, sans-serif;
}
6.3.5 Organización
Cuando una hoja de estilos tiene cientos de reglas, es recomendable organizarla en
secciones para facilitar su mantenimiento. Aunque existen muchas posibles
organizaciones, en general se utilizan las siguientes secciones:
• Estilos básicos (estilos de <body>, tipo de letra por defecto, márgenes de <ul>,
<ol> y <li>, estilos de los enlaces, etc.)
• Estilos de la estructura o layout (anchura, altura y posición de la cabecera, pie
de página, zonas de contenidos, menús de navegación, etc.)
• Estilos del menú de navegación
• Estilos de cada una de las zonas (elementos de la cabecera, titulares y texto de
la zona de contenidos, enlaces, listas e imágenes de las zonas laterales, etc.)
Si la hoja de estilos tiene muchas secciones, algunos diseñadores incluyen un índice o

tabla de contenidos al principio del todo. En la hoja de estilos del sitio web mozilla.org
utilizan la siguiente tabla de contenidos:
/* TOC:
Random HTML Styles
Forms
General Structure
Navigation
Quotations
Comments and Other Asides
Emphasis
Computers - General
Code
Examples and Figures
Q and A (FAQ)
Tables
Headers
Meta
Specific to Products Pages
*/
Otra recomendación relacionada con la organización de las hojas de estilos es la de

utilizar siempre los mismos nombres para los mismos elementos. Si observas las hojas
de estilos de los diseñadores profesionales, verás que siempre llaman #cabecera o
#header o #hd a la cabecera de la página, #contenidos o #principal a la zona principal
de contenidos y así sucesivamente.
Algunos de los atributos id más utilizados en los diseños web son: cabecera, cuerpo,
pie, contenidos, principal, secundario, lateral, buscador, contacto, logo.
6.3.6 Comentarios
Separar las secciones de la hoja de estilos y otros bloques importantes es mucho más
fácil cuando se incluyen comentarios. Por este motivo se han definido decenas de tipos
diferentes de comentarios separadores.
El modelo básico sólo añade un comentario destacado para el inicio de cada sección
importante:
/* ---------------------------------------*/
/* ---------->>> CONTENEDOR <<<-----------*/
/* ---------------------------------------*/
Otros diseñadores emplean diferentes comentarios para indicar el comienzo de las

secciones y el de las partes importantes dentro de una sección:
/* ---------------------------------------------------------
CABECERA
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Logotipo
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Buscador
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
6.4 Rendimiento
Antes de su explicación detallada, se muestra a continuación la lista de estrategias

útiles para mejorar el rendimiento de la parte de CSS de las páginas web:
Utilizar sprites CSS para reducir el número de imágenes de adorno a una única imagen.
No utilizar expresiones (expression()) en las hojas de estilos. El navegador Internet

Explorer revalúa continuamente el valor de las expresiones y puede penalizar el
rendimiento de la página.
No utilizar los filtros de Internet Explorer, ya que algunos filtros como

AlphaImageLoader bloquean la carga de la página hasta que no se descarga la imagen
utilizada por el filtro.
Enlazar hojas de estilos externas en vez de incluir los estilos en la propia página.
Enlazar las hojas de estilos mediante <link> en vez de @import (en Internet Explorer
las reglas @import tienen el mismo efecto que enlazar los archivos CSS al final de la
página).
Reducir el número de archivos CSS de la página.
Combinar si es posible todos los archivos CSS individuales en un único archivo CSS.
Reducir el tamaño de las hojas de estilos comprimiendo los archivos con las
herramientas disponibles (CSS Tidy, YUI Compressor).
Comprimir los archivos CSS en el servidor web antes de enviarlos al usuario.
Según los estudios realizados por Yahoo! y publicados en el artículo Performance

Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests, del
tiempo total que el usuario espera hasta que la página solicitada se carga
completamente, el 20% del tiempo corresponde a la parte del servidor (normalmente
generar la página HTML de forma dinámica utilizado información de una base de datos)
y el 80% restante corresponde a la parte del cliente (normalmente descargar hojas de
estilos CSS, archivos JavaScript e imágenes).
De esta forma, es mucho más fácil mejorar el tiempo de respuesta de la página

mejorando el rendimiento de la parte del cliente. Como uno de los principales
elementos de la parte del cliente está formado por las hojas de estilos CSS, a
continuación, se indican algunas de las técnicas para mejorar su rendimiento.
En primer lugar, en los estudios realizados por Yahoo! se demuestra que

aproximadamente el 20% de las páginas vistas de un sitio web no disponen de sus
elementos guardados en la cache del navegador del usuario. Esto supone que en el
20% de las páginas vistas, los navegadores de los usuarios se descargan todos sus
elementos: imágenes, archivos JavaScript y hojas de estilos CSS.
La conclusión de lo anterior es que resulta mucho mejor reducir el número de archivos

diferentes y no reducir el tamaño de cada archivo individual. El objetivo es reducir el
número de peticiones HTTP que la página realiza al servidor para descargar todos los
contenidos.
Los navegadores limitan el número de peticiones HTTP simultáneas que se pueden

realizar a un mismo servidor. Aunque el número máximo de peticiones varía de un
navegador a otro, el límite se encuentra entre 2 y 8. Por tanto, si el límite del navegador
son 2 peticiones HTTP simultáneas, cuando el navegador realice 2 peticiones, la
descarga de la página se bloquea hasta que alguna de las peticiones concluya.
Como demuestran los estudios realizados por Yahoo!, la descarga de las páginas web
se realiza a saltos, descargando cada vez 2, 4 o 6 elementos de la página. Por este
motivo es fundamental reducir el número de elementos de la página, entre ellos el
número de hojas de estilos CSS, para reducir el número de peticiones HTTP necesarias.
La recomendación de reducir el número de hojas de estilos CSS entra en conflicto con

la recomendación de modularizar el diseño CSS del sitio web separando de forma lógica
todos sus estilos en varios archivos individuales.
La solución consiste en combinar todos los archivos CSS individuales en un único

archivo CSS. Aunque la hoja de estilos resultante tiene un tamaño muy grande, el
número de peticiones HTTP requeridas para la parte de CSS se reduce al mínimo
posible.
El siguiente paso consiste en reducir el tamaño de esa única hoja de estilos grande.
Como los archivos CSS normales incluyen muchos espacios en blanco, nuevas líneas,
comentarios y propiedades no optimizadas, es muy sencillo reducir su tamaño de
forma considerable eliminando todos los elementos sobrantes.
Yahoo! ha desarrollado una herramienta llamada YUI compressor que permite reducir
de forma segura el tamaño de los archivos JavaScript y CSS. Su uso no es muy cómodo
para los diseñadores web, ya que requiere el uso de Java y la línea de comandos.
Otra herramienta similar a la anterior es CSSTidy, que permite reducir el tamaño de los
archivos CSS eliminando los elementos sobrantes (comentarios, espacios en blanco,
nuevas líneas) y optimizando las reglas CSS (sustituir propiedades individuales por
propiedades shorthand, utilizar la notación abreviada de números y colores, etc.) CSS
Tidy es una herramienta gratuita disponible para todos los sitemas operativos, se
puede utilizar mediante la línea de comandos y también se puede integrar con el
lenguaje de programación PHP.
Además de las herramientas descargables, existen aplicaciones online que permiten

reducir fácilmente el tamaño del código CSS indicado. Una de las aplicaciones más
conocidas es Clean CSS, que utiliza internamente CSS Tidy.
7. Glosario de términos del módulo

border-radius: Esta propiedad genera esquinas redondeadas para la caja formada por
el elemento.
box-shadow: Esta propiedad crea sombras para la caja formada por el elemento.
text-shadow: Esta propiedad es similar a box-shadow pero específica para textos.
@font-face: Esta regla nos permite cargar y usar cualquier fuente que necesitemos.
linear-gradient: Esta función puede ser aplicada a las propiedades background o

background-image para generar un gradiente lineal.
radial-gradient: Esta función puede ser aplicada a las propiedades background o

background-image para generar un gradiente radial.
transform: Esta propiedad modifica la forma de un elemento.
transition: Esta propiedad puede ser aplicada para crear una transición entre dos
estados de un elemento
8. Bibliografía
http://librosweb.es/libro/css/
https://www.manualdecss.com
http://aprende-web.net/css/
https://www.w3schools.com/css/
http://www.htmlhelp.com/es/reference/css/properties.html
9. Casos prácticos
9.1 Caso práctico 1
A partir del código HTML y CSS que se muestra, añadir los selectores CSS que faltan
para aplicar los estilos deseados. Cada regla CSS incluye un comentario en el que se
explica los elementos a los que debe aplicarse:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejercicio de selectores</title>
<style type="text/css">
/* Todos los elementos de la pagina */
{ font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los parrafos de la pagina */

{ color: #555; }
/* Todos los párrafos contenidos en #primero */

{ color: #336699; }
/* Todos los enlaces la pagina */

{ color: #CC3300; }
/* Los elementos "em" contenidos en #primero */

{ background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la

pagina */
{ background: #FFCC99; border: 1px solid #FF9900; padding:
.1em; }
/* Elementos "span" contenidos en .normal */
{ font-weight: bold; }
</style>
</head>
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer
adipiscing elit</a>. Praesent blandit nibh at felis. Sed nec
diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non
facilisis molestie, <em>lorem sem aliquam nulla</em>, id
lacinia velit mi vestibulum enim.</p>
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat.
<span><a href="#">Donec porttitor</a>, magna eu varius
luctus,</span> metus massa tristique massa, in imperdiet est
velit vel magna. Phasellus erat. Duis risus. <a
href="#">Maecenas dictum</a>, nibh vitae pellentesque auctor,
tellus velit consectetuer tellus, tempor pretium felis tellus
at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et
magnis</em> dis parturient montes, nascetur ridiculus mus.
Proin aliquam convallis ante. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis
egestas. Nunc aliquet. Sed eu metus. Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin
volutpat, <em class="especial">enim id iaculis congue</em>,
orci justo ultrices tortor, <a href="#">quis lacinia eros
libero in eros</a>. Sed malesuada dui vel quam. Integer at
eros.</p>
</div>
</body>
</html>
9.2 Caso práctico 2
A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias
para lograr una página web que tenga el siguiente funcionamiento:
• En su estado normal, un enlace se muestra de color rojo y sin subrayado

(propiedad text-decoration).
• Cuando el usuario sitúa el cursor del ratón sobre un enlace, se invierten los
colores (el texto del enlace se muestra con color blanco sobre un fondo rojo) y
se muestra el subrayado.
• Cuando un enlace está activo, se muestra de color naranja.
• Cuando un enlace ha sido visitado, se muestra de color verde oscuro.
• Cuando un enlace tiene el foco del teclado, se muestra de color azul y se
muestra el subrayado.
Consejo: el orden de escritura de las reglas influye en el resultado final, ya que un

enlace puede estar en varios estados al mismo tiempo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
</head>
<body>
<h1>Universidad de Alicante</h1>
<ul>
<li><a href="">Presentación</a></li>
<li><a href="">Estudios</a></li>
<li><a href="">Alumnos</a></li>
<li><a href="">Deportes</a></li>
<li><a href="">Servicios</a></li>
</ul>
</body>
</html>
10. Cuestionario de autoevaluación

1. ¿Para qué se utiliza CSS?
a) Para dar estilo a las páginas web
b) Para maquetar páginas web
c) Para conectar con una base de datos en una página web
2. ¿Cómo referenciamos con la palabra clave en CSS?

a) Con el símbolo #
b) Con un punto
c) Poniendo únicamente la palabra clave, sin símbolo
3. ¿Cómo referenciamos con el atributo id en CSS?

b) Con un punto
c) Poniendo únicamente el id, sin símbolo
4. ¿Cómo referenciamos con el atributo class en CSS?
b) Con un punto
c) Poniendo únicamente la clase, sin símbolo
5. ¿Cómo seleccionamos el elemento de la derecha en CSS?

a) Con el símbolo >
b) Con el símbolo +
c) Con el símbolo ~
6. ¿Cómo seleccionamos un elemento hijo en CSS?
7. ¿Cómo seleccionamos el elemento de la derecha que esté inmediatamente

precedido por el de la izquierda en CSS?
8. ¿Cómo seleccionamos el elemento de la derecha que no necesite estar

precedido inmediatamente por el de la izquierda en CSS?
9. ¿Desde qué versión podemos redondear esquinas con CSS?
a) Siempre se ha podido redondear esquinas
b) Desde CSS2
c) Desde CSS3
10. ¿Cuántos valores necesita como mínimo la propiedad box-shadow?

a) Necesita dos valores como mínimo
b) Necesita tres valores como mínimo
c) Necesita cuatro valores como mínimio

Modulo 2 - CSS

Cargado por

Copyright:

Formatos disponibles

Modulo 2 - CSS

Cargado por

Información del documento

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

Modulo 2 - CSS

Cargado por

Copyright:

Formatos disponibles

Módulo

Introducción a HTML, CSS y

Centro de Apoyo Tecnológico a Emprendedores

Licencia del documento:

Copyright © 2017, Centro de Apoyo Tecnológico a Emprendedores

Usted es libre de:

• Copiar, distribuir y comunicar públicamente la obra.

1. Introducción del módulo ........................................................................................ 5

1.1 Objetivos del módulo ........................................................................................ 5

3. Estilos y estructura .................................................................................................. 7

3.1 Elementos block ................................................................................................ 7

3.2 Modelos de caja ................................................................................................ 8

4. Conceptos básicos sobre estilos ........................................................................... 10

4.1 Sintaxis CSS ...................................................................................................... 10

4.2 Selectores ........................................................................................................ 11

4.2.1 Selector universal ..................................................................................... 11

4.2.2 Selector de tipo o etiqueta ....................................................................... 12

4.2.3 Selector descendente ............................................................................... 14

4.2.4 Selector de clase ....................................................................................... 17

4.2.5 Selectores de ID ........................................................................................ 22

4.2.6 Combinación de selectores básicos.......................................................... 24

4.3 Estilos en línea ................................................................................................. 24

4.4 Estilos embebidos ............................................................................................ 25

4.5 Archivos externos ............................................................................................ 26

4.6 Referencias ...................................................................................................... 28

5.1 Nuevos estilos CSS3 ......................................................................................... 38

5.1.1 Border-radius ............................................................................................ 39

5.1.2 Border-shadow ......................................................................................... 40

5.1.3 Text-shadow ............................................................................................. 42

5.1.4 @font-face ................................................................................................ 42

5.1.5 Gradiente lineal ........................................................................................ 44

5.1.6 Transform y transition .............................................................................. 44

6. Buenas prácticas con CSS ...................................................................................... 47

6.1 Inicializar estilos .............................................................................................. 47

6.2 Comprobar el diseño en varios navegadores .................................................. 52

6.2.1 Principales navegadores ........................................................................... 52

6.2.2 Probar el diseño en todos los navegadores ............................................. 53

6.2.3 Integrar Internet Explorer en Firefox ....................................................... 54

6.2.4 Diferentes versiones de Internet Explorer ............................................... 54

6.3 Hojas de estilos ................................................................................................ 55

6.3.1 Llaves ........................................................................................................ 55

6.3.2 Tabulaciones ............................................................................................. 56

6.3.3 Propiedades .............................................................................................. 58

6.3.4 Selectores ................................................................................................. 59

6.3.6 Comentarios ............................................................................................. 61

6.4 Rendimiento .................................................................................................... 62

7. Glosario de términos del módulo ......................................................................... 65

9.1 Caso práctico 1 ................................................................................................ 66

9.2 Caso práctico 2 ................................................................................................ 69

10. Cuestionario de autoevaluación ......................................................................... 70

1.1 Objetivos del módulo

3.1 Elementos block

3.2 Modelos de caja

CSS tiene un set predeterminado de propiedades destinados a sobrescribir los estilos

Aunque este modelo ha probado ser efectivo, algunos modelos experimentales

4. Conceptos básicos sobre estilos

4.1 Sintaxis CSS

La siguiente sintaxis define, por ejemplo, el estilo que se aplicará a un hipervínculo

4.2.1 Selector universal

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se