Manual de HTML5 y CSS3

[9]
Introducción a CSS
PUBLICIDAD

https://jorgesanchez.net/manuales/html/
selectores-css.html
[6.1] introducción a CSS
[6.1.1]las limitaciones de HTML
HTML, en especial en las últimas versiones, es un lenguaje descriptivo. Es decir; indica
qué elementos hay en una página web, pero no la forma de presentarlos en pantalla. En
sus primeras versiones todas las posibilidades de formato se conseguían mediante
etiquetas. Así existían etiquetas para modificar el tipo de letra (font), uso de
maquetaciones complejas (frame), etc. Es decir ante una nueva necesidad de formato,
se inventaba una nueva etiqueta.
Hoy en día (y ya desde hace muchos años) se ha entendido que ese no es el modelo
lógico para desarrollar páginas web. Se ha entendido que HTML no es el lenguaje que
se debe de encargar de indicar cómo se deben formatear los datos. Las razones de no
usar HTML para realmente dar formato a la página son:
 Utilizando un lenguaje diferente que se encargue del formato, podremos
reutilizar dicho formato fácilmente para diferentes páginas, manteniendo una
apariencia coherente y armoniosa en todas las páginas de nuestro sitio web.
 Hace que HTML sea un lenguaje puramente semántico, simplemente para dotar
de significado al contenido. De esa forma nuestro texto tiene más calidad para
ser buscado de forma apropiada mediante los buscadores de Internet u otras
herramientas.
 De usar sólo HTML, habría infinidad de etiquetas y una gran probabilidad de
que cada navegador use las suyas propias (como ha ocurrido durante tantos
años).
  Se independiza el formato y el contenido. Así podemos usar un lenguaje para dar
formato mucho más poderoso. Es más, si en el futuro se inventan mejores
lenguajes que el actual dominante CSS, sería fácil adaptar nuestras páginas a
esos lenguajes
 Usando como único lenguaje HTML, el formato de la página web la deciden los
navegadores. El tipo de letra, colores, tamaño, espacios entre párrafo,... todo eso
escapa al control de HTML. En general todos los navegadores usan los mismos
formatos básicos (por ejemplo la letra del párrafo normal es de tipo Times en
todos los navegadores), pero hay pequeñas diferencias que a veces hacen que el
aspecto de una página web sea muy diferente de un navegador a otro. CSS
permite una apariencia más exacta en cada navegador.

[6.1.2]la ayuda de CSS

CSS es la abreviatura de Cascade Style Sheets (Hojas de Estilo en Cascada) y se trata
de un lenguaje de texto que se incrusta en las páginas web para definir el formato de la
página. Actúa sobre los elementos HTML definiendo la forma en la que se mostrarán en
pantalla (o en otros dispositivos).
Es capaz de actuar sobre todas las etiquetas del mismo tipo o sobre unas concretas. Se
puede almacenar en un archivo aparte que después se puede usar para varias páginas a
la vez. De modo que si cambiamos algo en el estilo, al instante se reflejará en todas las
páginas.
CSS por lo tanto facilita la homogeneidad de las páginas y su mantenimiento. Hoy en
día se considera una técnica imprescindible para dar formato a las páginas web. Además
se puede aplicar también a código XML.
No es posible hoy en día crear páginas web sin utilizar CSS.

[6.2] versiones de CSS

CSS se ideó a mediados de los años 90 y se ha ido estandarizando. A día de hoy se
habla de tres versiones de CSS:
 CSS1. Es la versión original de CSS. Estandarizada en 1996 por
la W3C (organismo de estándares oficial de Internet) incluye formatos de texto,
párrafo, márgenes, lista, tamaños de imágenes,…
 CSS2. Es estándar desde 1998. Amplía el CSS anterior para incluir sobre todo
posicionamiento (manejo de capas), además de tipos de medios (que permite
definir distintos tipos de páginas web según los diferentes medios que la usen,
pantallas, impresoras, reconocedores de voz…).
La especificación 2.1 es el último estándar. Modificó errores de la anterior.
 CSS3. Se lleva trabajando en ella desde 1998 y es un estándar de facto, pero que
aún no ha sido aprobado por la W3C (se sigue trabajando en él) . En realidad se
compone de una serie de módulos que definen diferentes especificaciones que,
sumadas a CSS2 (con la que sigue siendo compatible), dan lugar a posibilidades
muy avanzadas de formato. De hecho, en total hay unos 30 módulos, varios de
ellos son ya considerados recomendación oficial.
En conjunto, la norma aún está en fase de borrador. Pero la mayoría de sus
capacidades (estén o no aprobadas por la W3C) están ya implementadas en los
 navegadores. Se puede observar el estado de estandarización de sus
componentes en www.w3.org/Style/CSS/current-work
CSS3 ha supuesto un auténtico pistoletazo de salida para webs con una
apariencia más espectacular y vistosa, por lo que ha tenido un éxito inmediato.
La mayoría de las nuevas páginas web se crean mediante CSS3 y está claro que
no corre peligro de que se deje de usar en el futuro. Más bien al contrario: se
seguirá ampliando y será cada vez más usado.

[6.2.1]adopción de nuevos elementos CSS

Se puede considerar que las normas CSS1 y CSS2 (hasta CSS 2.1) están ya soportadas
por todos los navegadores actuales. Sin embargo CSS3 no está del todo adoptado. De
hecho, jamás lo estará ya que la norma no está cerrada y aparecen nuevas capacidades
(nuevos módulos) constantemente.
El proceso de adopción de nuevas propiedades para CSS sigue este proceso:
[1]Desde foros o medios influyentes se propone una posible nueva propiedad CSS.
[2]La empresa fabricante de un navegador influyente (Mozilla, Google, Microsoft,
etc.) adopta de forma personal dicha propiedad que solo funcionará en algún
navegador.
[3]La propiedad se hace popular entre los desarrolladores y cada vez más navegadores
la soportan (aunque sea de forma personal).
[4]Si las entidades normalizadoras (como el W3C) lo estiman conveniente pasa a ser
parte del estándar.

[6.2.2]estandarización de características CSS

Que una característica forme parte del estándar tiene un largo proceso en el que esa
característica pasa por diferentes fases. El estado actual de estandarización de los
diferentes elementos de CSS está disponible en la
URL https://www.w3.org/Style/CSS/current-work.
Para conseguir que una característica (o más bien un módulo de CSS, una serie de
características) sea estándar, hay un proceso rígido en el que se debe pasar por estas
fases:
[1]First Public Working Draft. Primer borrador de trabajo. Un grupo de trabajo del
organismo W3C recoge propuestas detectadas en la comunidad sobre nuevas
características a incluir en la norma CSS y publica un primer borrador con la
propuesta. Se suelen agrupar un conjunto de características en módulos CSS, la
propuesta hace referencia a un módulo concreto. El documento-borrador lo
publicita a entidades, otros grupos de trabajo de la W3C y al público en general.
[2]Working Draft. Borrador de trabajo. Cuando ya se ha trabajado en el borrador
anterior. Se recoge este trabajo y el nuevo módulo CSS pasa a estar en estado de
Borrador de Trabajo (Working Draft). Este documento se puede revisar por el
público y organismos técnicos antes de decidir que pase al estado siguiente.
[3]Last Call, Última llamada. Se pasa a este estado cuando el W3C indica que una
fecha en la que el módulo CSS pasará a ser una característica recomendada por el
organismo. En este estado de última llamada se avisa de que los comentarios de la
comunidad deben hacerse antes de esa fecha.
[4]Candidate recomendation. Recomendación candidata. La propuesta pasa a poseer
un documento técnico revisado que cumple la forma de la W3C para las
 recomendaciones. En este estado ya hay plazos para que la propuesta pase a ser
una propuesta formal del organismo, salvo que se detecten problemas en la misma.
[5]Proposed Recomendation. Recomendación propuesta. En este estado, la propuesta
ha sido totalmente aceptada por el W3C. En este caso habrá ya una fecha definitiva
para que la propuesta pase a ser una recomendación completa de la W3C. No se
pueden hacer cambios significativos en este estado de la propuesta, salvo que se
publique otra recomendación candidata u otro borrador.
[6]Recomendación. Cuando una propuesta pasa a este estado, se considera que ya es
estándar y utilizable por todos los desarrolladores y herramientas.
[7]Rescinded recomendation. Recomendación escindida. A este estado pasan
recomendaciones obsoletas que no están en uso, bien por la aparición de otros
elementos que la mejoran o bien porque se detecta que su uso no ha sido positivo.

[6.2.3]el problema de la compatibilidad

Independientemente de si una característica de CSS pasa a ser estándar o no, para
determinar si una página web creada por nosotros debe de utilizar esa característica,
conviene tener claro qué navegadores la soportan y cuáles no.
Algunas páginas como http://css3test.com/ y http://caniuse.com permiten comprobar
qué parte (incluso qué porcentaje) de CSS3 reconoce cada navegador
(especialmente caniuse.com).
Muchos navegadores incorporan elementos CSS nuevos, antes de que el estándar los
recoja. Para ello, las propiedades CSS nuevas que incorpora un navegador concreto y
que no son estándares, se acompañan de un prefijo.
Los prefijos habituales son:
 -moz-. Para navegadores que usan el motor Mozilla, como Firefox.
 -webkit-. Para navegadores que usan el motor Webkit, como Safari o Chrome.
 -o-. Para el navegador Opera. Aunque desde el año 2013 utiliza webkit como
motor de renderizado.
 -ms-. Para navegadores con motor de Microsoft, como Internet Explorer.
Así para algunas propiedades que están en proceso de desarrollo podemos encontrarnos
código CSS como este:
div{
-moz-columns:3;
-webkit-columns:3;
columns:3;}
}
La razón es que los navegadores Mozilla y los que utilizan el motor Webkit (como
Chrome) en algunas versiones implementaban las columnas (característica bastante
reciente de CSS) de forma propia. Por ello se indica la propiedad con el prefijo y
finalmente sin él para que los navegadores que han adoptada esta propiedad de forma
estándar la lean correctamente. Además la forma estándar siempre es la última que se
indica para que sea la que prevalece (los navegadores que no la reconozcan, no la
tendrán en cuenta).
Otra posibilidad es detectar el navegador de usuario (para lo que hace falta código en
JavaScript) e indicarle que se actualice a uno más adecuado para nuestra página web.
Esto último se puede hacer también con utilidades gratuitas como por ejemplo la
disponible en outdatedbrowser.com/es.
Finalmente hay que señalar que hay navegadores que permiten probar nuevas
características de CSS antes de que sean adoptadas por los navegadores comerciales
(para que los desarrolladores se familiaricen con ellas).
Así, Google posee el navegador Chrome Canary y Mozilla posee hasta tres: Firefox
Nightly (permite probar de forma prematura nuevas características), Firefox Developer
Edition (que posee toda una caja de herramientas para desarrolladores, además de
incorporar CSS aun no disponible en la versión final) y Firefox Beta (que permite
probar la siguiente versión de Firefox antes de que sea definitiva).

[6.3] sintaxis básica de CSS

CSS es un lenguaje distinto de HTML. Es muy sencillo, pero su dificultad radica en que
es muy extenso.
CSS sigue esta sintaxis fundamental:
selector {
propiedad1:valor1;
propiedad2:valor2;
…
}
El selector nos permite indicar a qué elemento (o elementos) de la página web se va a
aplicar el formato CSS.
El formato se indica mediante un conjunto de propiedades y valores. Esas propiedades
permiten indicar qué formato estamos cambiando y los valores indican la modificación
que hacemos a esa propiedad.
Ejemplo:
p{
font-size:14pt;
color:red;
}
En ese código CSS, el selector es el elemento p (que seleccionaría todos los párrafos
normales del documento). Las propiedades que se cambian es el tamaño de letra (font-
size) y el color. Se conseguirá por tanto que los párrafos salgan con tamaño de letra de
14 puntos y color rojo.

[6.3.1]comentarios
Dentro del código CSS se pueden colocar comentarios. Para ello el texto del comentario
se encierra entre los símbolos /* y */. Ejemplo:
p {
line-height:10pt;
/*El siguiente código marcará el texto subrayado*/
text-decoration:underline;
text-align:center;
}
[6.3.2]inserción de código CSS
en una etiqueta concreta de HTML
Utilizado de esta forma, el código CSS se aplicará a la etiqueta en la que se ha incluido
dicho código. Eso se consigue gracias a que todos los elementos de HTML
(p, strong, abbr, h1,…) pueden utilizar un atributo llamado style, dentro del cual se
coloca el código CSS. Ejemplo:
<!doctype html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title></title>
</head>
<body>
<p>Este texto sale de color negro (normal)</p>
<p style=”color:red;”>Este texto sale de color rojo </p>
</body>
</html>
En este caso el código CSS no lleva selector alguno, porque el estilo se aplica al
elemento en el que se incrustó el código CSS. El resto del documento no queda afectado
por el código CSS.

en la cabecera de la página
En este caso el código CSS se inserta debajo del elemento HTML style que se colocará
en la zona de cabecera (head). Este código afectará a toda la página web. Ejemplo:
<!doctype html>
<html lang=”es”>
<head>
<title></title>
<style type=”text/css”>
p{
color:red;
}
</style>
</head>
<body>
<p>Este texto sale de color rojo</p>
<p>Este texto también sale de color rojo </p>
</body>
</html>
Con ese código todos los elementos de tipo p se mostrarán en color rojo ya que es a esa
etiqueta (mediante el selector p) al que se ha aplicado el formato.
El elemento HTML style usa fundamentalmente dos atributos:
 type. Que hoy en día siempre contiene el valor text/css. En el caso de que
apareciera otro lenguaje de estilos su contenido sería el tipo MIME
correspondiente a ese lenguaje.
En la versión HTML 5 ha dejado de ser obligatorio, por lo que hoy en día no se
usa (se da por hecho que el lenguaje de formato de páginas es CSS).
 media. Identifica para qué tipo de dispositivo de salida se aplican los estilos.
Podemos diseñar diferentes estilos de salida, dependiendo del medio por el cual
estamos viendo el contenido de la página. Sus posibilidades se explican en
 capítulos posteriores. Si no se indica este atributo, se entiende que la hoja de
estilos se aplica para cualquier tipo de medio de salida.

en un archivo externo
Es el caso más habitual. Se trata de crear un archivo de texto con extensión .css al que
se le inserta código CSS. La ventaja es que el mismo archivo nos sirve para aplicar su
código a diferentes documentos. De esa forma conseguimos una mayor coherencia
estética y una centralización del formato; ya que, si modificamos el archivo CSS, todos
los documentos que utilicen esa hoja de estilo aplicaran automáticamente los cambios.
La forma de incorporar el código CSS de un archivo externo es mediante el
elemento link (se sitúa dentro del elemento head).
Por ejemplo, si hemos creado un archivo de texto css llamado estilo1.css con este
contenido:
/*Contenido del archivo estilo1.css */
p{
color:red;
}
Suponiendo que lo guardemos en el mismo directorio que la página web a la que se
aplica, el código que permite aplicar dicho código CSS es:
<!doctype html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title></title>
<link rel=”stylesheet” href=”estilo1.css”
type=”text/css”>
</head>
<body>
<p>Este texto sale de color rojo</p>
<p>Este texto sale de color rojo también </p>
</body>
</html>
La etiqueta link tiene los atributos:
 href. Con el que se indica la ruta de la hoja de estilos que se está incluyendo.
 rel. Contiene siempre el valor stylesheet (para indicar que estamos incluyendo
una hoja de estilos, ya que este atributo se puede utilizar para otros fines).
 type. Hoy en día no se suele usar. Se aparece, se indica el valor text/css.
 media. Comentado en el apartado anterior, indica el tipo de medio de salida para
el que se aplicará el código CSS (se explica más adelante).

[6.3.3]orden de aplicación de estilos

Es posible que algunas páginas web utilicen varios estilos referidos al mismo elemento.
Ejemplo:
<!doctype html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Página con estilos</title>
<style type=”text/css” media=”screen”>
p{
color:blue;
 }
</style>
</head>
<body>
<p style=”color:red;”>Hola</p>
</body>
</html>
En el código anterior, la cuestión es en qué color saldrá el texto Hola , teniendo en
cuenta que por un lado saldría de color azul (ya que la etiqueta p hemos marcado que
tenga ese color y hemos indicado rojo en el atributo style de dicha etiqueta).
La respuesta es: de color rojo, porque tiene prioridad la definición más restrictiva. Las
reglas de aplicación de estilos son (se indica cuáles se aplican a antes y cuáles después):
[1]Los estilos del navegador. Es decir el formato predefinido del navegador. Todos
los navegadores poseen un estilo predefinido, que dicta con que tamaño por
defecto se muestra el texto, los colores, el tipo de letra, etc. Estos estilos son los
que se aplican en primer lugar.
[2]Después se aplican los estilos externos (los que se incorporan con la etiqueta link).
[3]Después los que proceden de la etiqueta style en la cabecera del documento.
[4]Después los que se definan internamente en el elemento (mediante
el atributo style).
[5]En caso de dos estilos referidos al mismo elemento y definidos en el mismo ámbito
(por ejemplo ambos procedentes de archivos externos e incluidos con el
elemento link) tiene preferencia el último que aparece en el código.
[6]Tienen preferencia siempre los estilos definidos sobre los elementos más internos
Ejemplo:
<style>
strong{
color:red;
}
p{
color:green;
}
</style>
<body>
<p>Soy verde<strong>Soy rojo</strong></p>
</body>
El elemento strong aparece de color rojo ya que es más interno que el elemento p.

alteración del orden de aplicación de estilos

Se puede alterar la preferencia por defecto utilizando una palabra clave: !
important. Los estilos marcados con !important tienen preferencia sobre cualquier
otro. Ejemplo:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Prueba important</title>
<style>
strong{
color:green !important;
}
</style>
</head>
<body>
<h1>Color</h1>
<p>Esto es una
<strong style=”color:blue”>prueba</strong>
</p>
</body>
</html>
El texto prueba aparece de color verde, aunque el atributo style tiene prioridad sobre el
elemento del mismo nombre. La razón es que !important altera ese orden.

[6.3.4]herencias
Hay que tener en cuenta que hay etiquetas que son padre de otras. Es decir etiquetas que
contienen a otras. En el ejemplo:
<p>Arturo Herrero: <em>Los años veinte</em></p>
La etiqueta p es padre de la etiqueta em (em está dentro de p). Esto hace que em herede
todo el estilo que posea p y además añada el suyo propio. Por ejemplo, si hemos
definido:
p{
color:blue;
font-size:12pt;
}
em{
font-size:14pt;
}
En el ejemplo anterior, los años veinte tendrán color azul, heredado del párrafo en el
que se encuentra el texto de tipo em, y tamaño 14, ya que tiene prioridad el tamaño
asignado al elemento em.

[6.3.5]normalizar. estilo predefinido

Una página HTML que no use código CSS, mostrará el contenido utilizando el formato
predefinido en el navegador.
Esto significa que el navegador decide el estilo de la página. Corremos, por tanto, el
riesgo de que nuestra página se muestre distinta en diferentes navegadores porque
apliquen diferente estilo inicial.
Para no correr riesgos, muchos diseñadores de páginas web, crean un primer
estilo normalizador. Esto se realiza creando una primera hoja de estilos que contenga el
formato inicial deseado para cada elemento HTML (o al menos para cada elemento que
utilicemos en nuestras páginas).
Un opción muy habitual es utilizar como normalizador, la librería
normalize.css disponible en http://necolas.github.io/normalize.css/ que es una hoja de
estilos ya preparada para normalizar el funcionamiento de todos los elementos HTML5
en cualquier navegador. Con ella se asegura que el aspecto inicial es el mismo en
cualquier navegador, además de conseguir que la apariencia inicial sea más moderna.

[6.3.6]indicación de la codificación de caracteres

del archivo CSS
Como se ha visto, en HTML 5 la etiqueta:
<meta charset=”utf-8”>
Indica que el documento HTML utiliza la codificación de caracteres UTF-8. Si tenemos
un archivo CSS que dentro utiliza caracteres fuera del ASCII (algo que no ocurre a
menudo), disponemos de un elemento en el lenguaje CSS que permite avisar de la
codificación del archivo. Se trata de @charset.
Esta instrucción CSS debe de ser la primera del archivo y basta simplemente con
indicarla y, seguidamente, añadir la codificación utilizada. Por ejemplo:
@charset “utf-8”
 > VOLVER A JORGESANCHEZ.NET
MANUAL DE HTML5 Y CSS3:
 > INTRODUCCIÓN A LOS LENGUAJES DE MARCAS
 > INTRODUCCIÓN A HTML5
 > EDICIÓN BÁSICA DE DOCUMENTOS HTML
 > ELEMENTOS DE TEXTO Y PÁRRAFO
 > ELEMENTOS ESTRUCTURALES
 > ENLACES
 > IMÁGENES
 > ELEMENTOS MULTIMEDIA
 ˅ INTRODUCCIÓN A CSS
o > INTRODUCCIÓN A CSS
o > VERSIONES DE CSS
o > SINTAXIS BÁSICA DE CSS
 > SELECTORES CSS
 > UNIDADES Y COLORES EN CSS
 > FORMATO DE FUENTE Y PÁRRAFO
 > FORMATO DE CAJA Y LISTA
 > TABLAS
 > FORMULARIOS
 > VISUALIZACIÓN DE ELEMENTOS
 > POSICIONAMIENTO MEDIANTE CSS
 > TRANSFORMACIONES MEDIANTE CSS
 > ANIMACIONES MEDIANTE CSS
 > GENERACIÓN DE CONTENIDO AUTOMÁTICO
 > MAQUETACIÓN (1). COLUMNAS Y FLEXBOX
 Manual de HTML5 y CSS3

[10]
Selectores CSS
PUBLICIDAD

[7.1] introducción
Los estilos CSS se aplican hacia el elemento (o elementos) HTML que indiquemos, por
ello es muy importante utilizar correctamente los selectores.
Un selector es el instrumento que proporciona CSS para determinar qué partes de la
página web se van a ver afectados por el código CSS que indiquemos.
Podemos indicar los elementos a los que aplicar un determinado código CSS, por
ejemplo con el nombre del elemento (por ejemplo, h1), pero también podemos hacer
selecciones más elaboradas para seleccionar un elemento concreto mediante su
identificador, seleccionar elementos mediante su jerarquía en la página, mediante el
valor de sus atributos, etc..
Hacer buenas selecciones nos permitirá conseguir hojas de estilos muy sofisticadas,
coherentes y fáciles de mantener. Lo ideal es que HTML y CSS funcionen de forma
independiente, de forma que cuando queramos dar formato a nuestros documentos, no
tengamos que tocar el código HTML.
Eso solo se puede conseguir estructurando bien a nivel semántico nuestro HTML y
dominando el uso de selectores.

[7.2] selectores simples

[7.2.1]selección de elementos completos HTML
Podemos aplicar un estilo a los elementos de un tipo de etiqueta concreta de HTML.
Ejemplo:
p{
color:blue;
font-size:12pt;
}
En principio, con ese código todos los elementos de tipo p de la página saldrán de color
azul.
Podemos incluso aplicar el estilo a varias etiquetas a la vez:
h1,h2,h3{
color:blue;
}
Los títulos de tipo h1, h2 o h3 saldrán de color azul.

[7.2.2]selección por clases de elementos

Una de las primeras formas que tiene CSS para diferenciar elementos del mismo tipo
(por ejemplo un párrafo de otro) son las clases.
Una clase es un nombre que asignamos a una serie de propiedades y valores CSS.
Posteriormente simplemente aplicaremos el nombre de la clase a aquellos elementos
que deseamos se modifiquen. La forma de configurar, es:
selector.nombreclase{
propiedad1:valor1;
propiedad2:valor2;
…
}
Por ejemplo:
p.rojo{
color: red;
}
Para que un párrafo (necesariamente marcado con la etiqueta p) adopte este estilo (y por
lo tanto coloree la letra de color rojo) hay que indicarlo gracias a un atributo presente en
todos los elemento HTML; se trata del atributo class. Ejemplo:
<p class=”rojo”>
Este texto sale de color rojo
</p>
Podemos definir la clase sin indicar a qué tipo de elementos se aplica, de ese modo
podremos aplicar la clase a cualquier elemento:
.rojo{
color:red;
}
Cualquier elemento HTML podrá utilizar esa clase. Ejemplo:
<h1 class=”rojo”>
Título con letras rojas
</h1>
<p class=”rojo”>
Párrafo con letras rojas
</p>
En el ejemplo tanto los elementos h1 como los p de clase rojo, aparecerán con la letra
en rojo.
Hay que tener en cuenta que podemos aplicar más de una clase al mismo elemento:
/* CSS */
.rojo{
color:red;
}
.borde{
border-bottom:1px solid black;
}
.......
...
<h1 class=”rojo borde”>
Título de color rojo y con borde
</h1>
En este último caso se suman al elemento las propiedades y valores de ambas clases
definidas. En el caso de que las dos clases modifiquen las mismas propiedades (por
ejemplo el color de la letra), se aplican las propiedades de la última clase definida en el
código.
También en CSS es posible aplicar formato cuando un determinado elemento tenga dos
clases a la vez. Eso se hace usando como selector las dos clases seguidas (sin separarlas
con un espacio):
/* CSS */
.rojo.borde{
color:red;
border-bottom:1px solid black;
}
.......
...
<h1 class=”rojo”>
No tendrá borde ni color rojo
</h1>
<h1 class=”rojo borde”>
Este sí es título de color rojo y con borde
</h1>

[7.2.3]selección por identificadores

La idea es parecida a la de las clases, pero en este caso se usa el valor del
atributo id (disponible en todos los elementos del lenguaje HTML). El valor de este
atributo no se puede repetir en un documento (aunque los navegadores lo permitan).
Para indicar el valor se usa el símbolo # seguido del identificador.
Ejemplo:
/* CSS */
#parrafo1{
color: #339999;
background-color: #D6D6D6;
}
.......
...
<p id=”parrafo1”>
texto del párrafo coloreado
</p>

[7.2.4]selector de limitación
Permite indicar que el estilo definido se aplica a una determinada etiqueta pero cuando
esté contenida en otra. Ejemplo:
td p{
color:red;
}
Se aplica a los elementos de tipo p cuando están dentro de elementos de celda (td).
Ejemplo:
<p>Este texto sale normal <p>
<table>
<tr>
<td>Sale normal</td>
<td><p>Sale de color rojo</p></td>
Podemos hacer limitaciones más complejas, por ejemplo:
section article p{
color:red;
}
El código anterior se aplicará a los párrafos que estén dentro de un artículo que, a su
vez, estén dentro de una sección.
Esta técnica vale para cualquier selector:
section .rojo{
color:red;
}
En este caso se colorean de rojo los elementos de clase rojo interiores a un
elemento section.

[7.2.5]selector universal
Permite aplicar un estilo a todas las etiquetas del documento. Esto lo consigue el
asterisco. Ejemplo:
*{
color:black;
}
No se suele utilizar de esa forma ya que es demasiado indiscriminada. Pero sí se utiliza
para elementos de este tipo:
<!doctype html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Documento</title>
<style>
table *{
color:red;
}
</style>
</head>
<body>
<p>Sale normal</p>
<table>
<tr>
<th>Sale rojo</th>
</tr>
<tr>
<td>Sale rojo</td>
</tr>
</table>
</body>
</html>
Permite colorear en rojo el texto que esté dentro de una tabla; no importará que etiqueta
sea la que está dentro de la tabla. Otro ejemplo:
<!doctype html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Documento</title>
<style>
p *{ color:red;}
</style>
</head>
<body>
<p>Sale normal <span>Sale rojo</span></p>
</body>
</html>
Ahora sale de color rojo el texto dentro de la etiqueta span.

[7.2.6]selección por atributos

Permite aplicar estilos a un elemento cuando este tiene un determinado valor sobre un
atributo. Para ello se indica el atributo entre corchetes, seguido del signo de igualdad y
el valor entre comillas. Ejemplo:
<!doctype html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Documento</title>
<style>
p[lang=”en”]{
font-style: italic;
}
</style>
</head>
<body>
<p lang=”es”>texto que sale de forma normal</p>
<p lang=”en”>texto que sale en cursiva</p>
</body>
Se puede mezclar este tipo de definiciones con clases o definiciones por identificador:
p.clase1[lang=”en”]{
font-style: italic;
}
En este caso el estilo definido se aplica a párrafos de clase 1 que estén marcados con el
valor en en el atributo lang (es decir que estén en inglés).
Se puede incluso utilizar más de un atributo:
p[lang=”en”][spellcheck=”true”]{
font-style: italic;
}
En este caso se aplica el estilo para los elementos de tipo p que usen los
atributos lang y spellcheck con los valores indicados.
Podemos incluso usar varios valores para el mismo atributo:
p[lang=”en”][lang=”fr”]{
font-style: italic;
}
Aplica la cursiva a párrafos cuyo lenguaje sea inglés o francés.
También podemos indicar el estilo simplemente para los elementos que usen el atributo
independientemente de su valor:
<!doctype html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Documento</title>
<style>
p[lang]{
font-style: italic;
}
</style>
</head>
<body>
<p>Este texto se muestra de forma normal</p>
<p lang=”en”>This text is shown with italics (se muestra con
cursiva)</p>
<p lang=”es”>Este texto también se muestra en cursiva</p>
</body>
Por otro lado gracias a CSS3 disponemos de estas posibilidades:
sintaxis significado
Elementos que usen el atributo indicado que contengan el valor aunque s
elemento[atributo~=”valor”]
espacios
 sintaxis significado
elemento[atributo$=”valor”] Elementos que utilicen el atributo y cuyo contenido finalice con el valor i
elemento[atributo^=”valor”] Elementos que utilicen el atributo y cuyo contenido empiece con el valor
Elementos que utilicen el atributo, cuyo contenido empiece con el valor
elemento[atributo|=”valor”]
sea una palabra
elemento[atributo*=”valor”] Elementos que utilicen el atributo indicado y contengan (en cualquier par
Ejemplo:
<!doctype html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Documento</title>
<style>
p[lang*=”es”]{
font-style: italic;
}
</style>
</head>
<body>
<p lang=”es-AR”>Este texto se muestra en cursiva
</p>
<p lang=”es-ES”>Este texto también se muestra en
cursiva</p>
<p lang=”es”>Incluso este también</p>
<p lang=”en”>Este no</p>
</body>
[7.3] selectores jerárquicos

Podemos entender HTML como un documento formado de manera jerárquica, donde

hay elementos que contienen otros elementos formando una estructura de árbol. Esta es
una parte importante del funcionamiento tanto de una página web HTML como de un
documento XML. Esta visión permite seleccionar elementos que casen con una cierta
jerarquía.
De este modo esta página web:
<!doctype html>
<html lang=”es-ES”>
<head>
<meta charset=”UTF-8”>
<title></title>
</head>
<body>
<h1>Monumentos de Palencia</h1>
<p>Palencia dispone de numerosos monumentos interesantes. Debido a su importan
posee una gran cantidad de edificios religiosos entre los que destaca la <strong>Cated
Palencia</strong> así como la iglesia de San Miguel con su peculiar torre de defensa y
conocido de la ciudad: El Cristo del Otero</p>
 <p>A finales del siglo <em>XIX</em> y principios del <em>XX</em> aparecieron e
civiles que han embellecido una buena parte de la ciudad, en especial la transitada Ca
<h2>Edificios religiosos</h2>
<ul>
<li>Cristo del Otero</li>
<li>Catedral Mayor</li>
<li>Iglesia de San Miguel</li>
<li>Iglesia de San Lázaro</li>
<li>Convento de San Pablo</li>
<li>Iglesia de la Compañía</li>
</ul>
</body>
</html>
Podemos entender que sus elementos forman la Ilustración 47.
En él se observa como los elementos body y head son hijos de html. Mientras que meta
y title son hijos de head (luego nietos de html). Los nodos al mismo nivel forman
hermanos (h1, h2, p y ul en este esquema son hermanos).

[7.3.1]selector para un descendiente

Es posible aplicar un formato cuando un elemento está contenido en otro (es su
descendiente).
La forma (vista anteriormente es):
section p{
color:red; /* Selecciona párrafos p si están dentro de una tabla
}
Ese código colorea de rojo el texto contenido en elementos de párrafo (de tipo p)
cuando son descendientes de algún elemento section (sea hijo o nieto).
Así usando el CSS anterior este código HTML:
<section>
<h1>Título</h1>
<p id=”p1”>Sale de color rojo</p>
<article>
<p id=”p2”>También sale de color rojo</p>
</article>
</section>
Se colorean ambos párrafos de tipo p.

[7.3.2]selector de elementos hijos

En este caso, solo funciona para elementos que son hijos directos. Se hace de esta
forma:
section > p{
color:red;
}
El signo > indica una relación jerárquica de padre a hijo. En el texto HTMl del ejemplo
anterior solo se colorearía el primer párrafo:
<section>
<h1>Título</h1>
<p id=”p1”>Sale de color rojo</p>
<article>
<p id=”p2”>No sale de color rojo</p>
</article>
</section>
[7.3.3]otros selectores jerárquicos
sintaxis significado
elemento1 + eleme El estilo se aplica al elemento2 cuando es hermano del elemento1 y además el eleme
nto2 al elemento2.
elemento1 ~ eleme
Se aplica al elemento2 cuando es hermano del elemento1 y éste le precede, aunque n
nto2
elemento:empty Se aplica cuando el elemento está vacío
Se aplica al elemento indicado cuando sea el hijo con el número indicado (por eje
tercer hijo).
Se pueden utilizar expresiones más complejas mediante el uso de la variable n p
complejas (la n el navegador la sustituirá automáticamente por cadas número ente
seleccionan)
Se permite también usa las palabras clave odd (impar) y even (par)
elemento:nth- Ejemplos de uso:
child(número)  tr:nth-child(3). Selecciona la tercera fila de una tabla
 tr:nth-child(odd). Selecciona las filas impares
 td:nth-child(even). A los pares
 tr:nth-child(2n+1). Selecciona las filas 1,3,5,... (las impares)
 tr:nth-child(3n+1). Selecciona las filas 1, 4, 7, 10, 13... (de tres en tres)
elemento:nth-last- Funciona igual que el anterior pero cuenta los elementos hijos a partir del último (es
child(n) delante).
elemento:first-
Se aplica al elemento cuando es el primer hijo
child
elemento:last-
Se aplica al elemento cuando es el último hijo
child
elemento:only-
Se aplica cuando el elemento es el único hijo
child
elemento:first-of-
Primer descendiente de su tipo
type
elemento:last-of-
Último descendiente de su hijo
type
elemento:nth-of- Funciona como nth-child, pero se refiere al número de hijo de ese tipo. No cue
type(n) indicado.
Ejemplo:
<style>
article p:nth-of-type(2){
color:red;
}
</style>
</head>
<body>
<article>
<h1>
Primer hijo, no se colorea
</h1>
<p>
Segundo hijo, primero de
tipo p. No se colorea
 sintaxis significado
</p>
<p>
Tercer hijo, segundo de
tipo p. SE COLOREA
</p>
<p>
Cuarto hijo, tercero de
tipo p. No se colorea
</p>
</article>
</body>
elemento:nth-last-
Como el anterior pero cuenta n desde el final.
of-type(n)
elemento:only-of-
Se aplica cuando el elemento es el único hijo de ese tipo
type
Ejemplo de uso de formatos jerárquicos
<style>
h1 + p{
color:red;
}
</style>
</head>
<body>
<section>
<h1>Este es un título</h1>
<p>Párrafo que sale de color rojo</p>
<p>Párrafo que sale normal</p>
<h1>Otro titulo</h1>
<address>C/ Mayor...</address>
<p>Este sale normal</p>
</section>
</body>
En el ejemplo, el operador +, hace que se coloree la letra de color rojo, para todos los
párrafos de tipo p que estén justo detrás de un párrafo h1. Por ello se colorea solo el
párrafo con el texto Párrafo que sale de color rojo ya que es el único que cumple la
condición. Sin embargo si se hubiera definido de esta forma:
<style>
h1 ~ p{
color:red;
}
</style>
Ahora todos los párrafos de tipo p aparecen de color rojo ya que no es necesario que
estén inmediatamente detrás de un h1, basta con que sean hermanos; es decir, que estén
dentro del mismo contenedor y h1 aparezca antes que p.
Ejemplo de uso de nth-child:
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Prueba nth-child</title>
<style>
table{
width:450px;
border-collapse:collapse;
}
 td,th{
border:1px solid black;
}
td:nth-child(2){
background-color:red;
}
</style>
</head>
<body>
<table>
<tr>
<th>&nbsp;</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th>&nbsp;</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
El resultado del código es:

La segunda columna sale con fondo rojo, ya que en ella la etiqueta td es el segundo hijo
de la etiqueta tr. Pero si el código CSS fuera este:
<style>
table{
width:450px;
border-collapse:collapse;
}
td,th{
border:1px solid black;
}
td:nth-of-type(2){
background-color:red;
}
El resultado sería:

Porque ahora se colorea la etiqueta td cuando es el segundo hijo de su tipo (la primera
columna es de tipo th y no td).
Podemos incluso hacer combinaciones avanzadas. Ejemplo:
ul > li + li {
color:green;
}
Se aplica a los elementos li que estén dentro de elementos ul y además estén
inmediatamente precedidos por otro elemento li. Ejemplo:
<ul>
<li>Yo salgo normal</li>
<li>Yo salgo verde</li>
 <li>Yo también salgo verde</li>
</ul>

[7.4] pseudoclases
[7.4.1]básicas
Las pseudoclases permiten asociar estilos a un selector cuando le ocurre una
determinada circunstancia. Inicialmente las pseudoclases se aplicaban a los enlaces
(elemento a), pero ahora se aplican a cualquier elemento. Las pseudoclases clásicas son:
 :link. Se aplica para los enlaces no visitados
 :visited. Enlaces visitados
 :active. Enlaces activos (aquellos sobre los que hacemos clic)
 :hover. Se aplica cuando el ratón pasa por encima del elemento (sea un enlace o
no)
Ejemplo:
<style>
a{
text-decoration:none;
}
a:visited{
color:gray;
}
a:hover{
text-decoration:underline;
}
</style>
En el ejemplo los enlaces a los que se aplique esta hoja de estilo saldrán sin subrayar, si
están visitados saldrán de color gris y si se arrima el ratón en ellos será cuando se
muestren subrayados.
Estas pseudoclases permiten un cierto dinamismo en la página HTML. Actualmente
además es posible utilizarlas en otros elementos distintos de la etiqueta a (como p, div,
etc.) lo que da enormes posibilidades.

[7.4.2]más pseudoclases
CSS3 ha incorporado muchas más pseudoclases:
pseudoclase selecciona...
Cuando el elemento obtiene el foco, es decir cuando el elemento ha capturado la ent
:focus
formularios.
Se aplica cuando el elemento esté marcado con el lenguaje indicado por s
:lang(código)
atributo lang (es para español, en para inglés,…)
:enabled Cuando el elemento está habilitado (útil en formularios)
:disabled Cuando el elemento está deshabilitado (útil en formularios)
:checked En controles de formulario de tipo radio o checkbox, cuando el elemento pasa a esta
En controles de formulario (de tipo input) cuando el valor que contienen está dentro
los atributos min y max (que solo se aplican a algunos tipos de controles input
:in-range
contenido del control cumple.
No funciona en Internet Explorer.
pseudoclase selecciona...
:out-of-range Al revés del anterior. Aplica el contenido CSS a controles cuyos valores están fuera d
Se aplica cuando el elemento al que se refiere ha sido destino de un enlace. Ejemplo:
<style>
#intro:target{
color:blue;
}
:target ...
<h1 id=”intro”>Introducción</h1>
...
<a href=”#intro”>Ir a la introducción</a>
Cuando hagamos clic sobre el enlace ir a la introducción, el título Introducción se p
Controles de formulario que contienen valores válidos (lo serán o no dependiend
:valid
ejemplo no será válido un texto en un cuadro input de tipo numérico (number).
:invalid Inverso al anterior. Es decir, selecciona controles cuyos valores no sean válidos.
Controles de formulario que están en modo de solo lectura (debido a usar el at
:read-only
funciona en Internet Explorer y en Mozilla Firefox solo si se usa con el prefijo -moz
:read-write Inverso al anterior. Controles que se puedan leer y escribir.
Controles de formulario que están marcados (gracias al atributo HTMl req
:required
obligatoriamente.
:optional Contrario al anterior. Controles que no están obligados a ser rellenados.
Selecciona los elementos de un formulario que son las opciones marcadas por defe
:default
radio que actualmente esté activado. No funciona en Internet Explorer.
:first-line La primera línea del elemento.
:first-letter La primera letra del elemento.
Contenido anterior al elemento. Siempre se suele usar con la propiedad conte
elemento. Ejemplo:
p:before{
:before content:url(‘flecha.gif’);
}
Coloca la imagen de una flecha delante del párrafo
:after Para indicar contenido después del elemento.
:lang(codigoLeng Selecciona los elementos que hayan utilizado el atributo lang con el códig
uaje) a [lang=”codigoLenguaje”].
Se aplica cuando el elemento no cumple ser del tipo indicado por el selector dentro d
div >:not(p){
color:red;
}
El color rojo se aplicará al contenido de los elementos div salvo que estén dentro de
:not(selector)
Otro ejemplo:
p:not(:first-of-type){
color:green;
}
Se aplica a todos los párrafos excepto al primero de cada grupo de hermanos.
Solo tiene utilidad cuando se aplica CSS sobre documentos XML. Aplica el estilo a
:root
documento. En un documento HTML la raíz es siempre el elemento html, por lo que
Aunque es estándar, no lo soporta aun casi ningún navegador. Selecciona en base
:dir(direccion)
escribe el texto. Esa dirección puede tomar el valor ltr (izquierda a derecha) o rtl (de
Selector interesante, pero experimental que se aplica a los elementos que se muest
:fullscreen está en modo de pantalla completa. Todos los navegadores actuales la soportan
navegador (por ejemplo -moz-fullscreen). Solo el navegador Edge de Microsoft la r
 pseudoclase selecciona...
:left Se aplica cuando la página se imprime. Selecciona la página izquierda (en impresión
:right Se aplica cuando la página se imprime. Selecciona la página derecha (en impresión a
Las pseudoclases se pueden combinar, de modo que se pueden construir cosas como:
input:focus:hover {
background-color: yellow;
}
Se pondrá color de fondo amarillo, cuando el cuadro de tipo input tenga el foco y el
ratón pase por encima de él. O cosas más complejas como:
input.clase1:focus:hover[type=”password”] {
background-color: yellow;
}
En este caso se aplica el fondo amarillo cuando el cursor esté encima de un control de
texto de tipo contraseña que además tenga el foco y sea de clase1.

[7.4.3]pseudoelementos
Se trata una mejora de CSS3 que permite aplicar estilos a elementos, aunque estos no
existan en el árbol de elementos del documento. La razón para que un elemento no esté
en el árbol es que no existe en el código hasta que se ejecute, por ejemplo, una
determinada sentencia en lenguaje JavaScript.
Los pseudoelementos utilizan los símbolos :: en lugar de simplemente : como ocurre
con las pseudoclases.
pseudoelemento significado
::first-line Primera línea del elemento
::first-letter Primera letra del elemento
::after Se aplica para colocar código tras el elemento
::before Se aplica para colocar código antes del elemento
Se aplica al texto seleccionado del elemento. En el caso de los navegadores de Moz
::selection
moz-
Pseudoclase experimental (solo funciona si se usa el prefijo de cada navegador)
::placeholder
tipo placeholder de los controles de los formularios.

[7.5] CSS3 en los navegadores

Hasta la versión 9, Internet Explorer no ha aplicado los selectores avanzados
pertenecientes a CSS3. El resto de navegadores les incorporó mucho antes.
No es el único caso de aplicación tardía. Internet Explorer es, sin duda, el navegador
que más está tardando en incorporar mejoras de CSS3 que los otros navegadores llevan
implementando desde hace un tiempo. Pero el resto también tardan en aplicar estas
mejoras de CSS (lógico puesto que CSS3 no deja de crecer).
Su sucesor, Edge, es más respetuoso con CSS3. Pero la cuestión es que todavía hay
bastantes usuarios que utilizan Internet Explorer.
También puede ocurrir que algunos navegadores acepten algunas cosas y otras no. Por
ejemplo que acepten la pseudoclase avanzada ::selection y sim embargo no
reconozcan :not. Esto complica enormemente el trabajo del diseñador de páginas web.
Las últimas versiones de todos los navegadores ya incorporan la mayoría de los
selectores.
Aunque a veces hay que comprobar que no se requiere prefijo. Es el caso del
selector ::selection, solo los últimos navegadores le reconocen y en el caso de Firefox
hay que acompañarle del prefijo –moz-
Ejemplo:
p::-moz-selection{
background-color:red;
}
En definitiva, hay que utilizar con cautela este tipo de selectores.
Debido a la falta de compatibilidad tan grande de Internet Explorer con CSS3, es
habitual usar código concreto para este navegador (y que solo queremos que ejecute este
navegador) para lo cual se utiliza este truco:
<!--[if lt IE 9]>
..código ignorado por todos los navegadores salvo por los Internet Explorer anteriore
<![endif]-->
 > VOLVER A JORGESANCHEZ.NET
MANUAL DE HTML5 Y CSS3:
 > INTRODUCCIÓN A LOS LENGUAJES DE MARCAS
 > INTRODUCCIÓN A HTML5
 > EDICIÓN BÁSICA DE DOCUMENTOS HTML
 > ELEMENTOS DE TEXTO Y PÁRRAFO
 > ELEMENTOS ESTRUCTURALES
 > ENLACES
 > IMÁGENES
 > ELEMENTOS MULTIMEDIA
 > INTRODUCCIÓN A CSS
 ˅ SELECTORES CSS
o > INTRODUCCIÓN
o > SELECTORES SIMPLES
o > SELECTORES JERÁRQUICOS
o > PSEUDOCLASES
o > CSS3 EN LOS NAVEGADORES
 > UNIDADES Y COLORES EN CSS
 > FORMATO DE FUENTE Y PÁRRAFO
 > FORMATO DE CAJA Y LISTA
 > TABLAS
 > FORMULARIOS
 > VISUALIZACIÓN DE ELEMENTOS
 > POSICIONAMIENTO MEDIANTE CSS
 > TRANSFORMACIONES MEDIANTE CSS
 > ANIMACIONES MEDIANTE CSS
 > GENERACIÓN DE CONTENIDO AUTOMÁTICO
 > MAQUETACIÓN (1). COLUMNAS Y FLEXBOX