Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). Una instrucción en CSS consta de 2 partes: el selector (elemento a modificar) y la declaración.
La declaración siempre va entre llaves y consta de propiedad y el valor de esa propiedad. Un ejemplo podría ser:
h1 {color: red;}
Esta instrucción determina que todos los títulos (tag <h1> de HTML) tengan el texto en color rojo.
La mejor forma de aprender las propiedades y los valores de CSS es buscando documentaciones CSS y creando nuestras propias hojas de estilo, probando diferentes visualizaciones. Para ello nos puede ayudar un buen editor, como puede ser BlueFish, que nos ayuda autocompletando bastante código.
También hay que tener en cuenta que los estándares web están en continuo desarrollo, por lo que los diferentes navegadores suelen añadir propiedades CSS nuevas a modo de beta (ver las propiedades propietarias de Mozilla).
Una vez vista esta introducción pasemos directamente a los selectores:
Los selectores pueden ser nombres de tags HTML (como h1), nombres de clases o ids. Combinándolos de forma correcta podemos dar formato a nuestras web de forma muy simple y clara.
Selectores de tag HTML
h1 {color: red;}
Estilo aplicado al tag h1. En caso de querer varios tag con el mismo formato, podemos ponerlos separados por comas:
h1, h2, h3{color: red;}
Selector universal
* {
margin: 0;
padding: 0;
}
Estilo aplicado a toda la página (útil para cambiar el estilo predeterminado por el navegador)
Selector de clase
Supongamos que tenemos el siguiente título en HTML:
<h2 id="titulo" class="rojo">Titulo en rojo</h2>
Podríamos referirnos a el de la siguiente forma (todos los elementos con tag h2 y que sean de la clase rojo):
h2.rojo{color:rojo;}
Si quisiéramos referirnos a todos los elementos de la clase rojo (independientemente del tag HTML) pondríamos:
.rojo{color:rojo;}
Selector de ID
Lo mismo que para las clases se puede aplicar a las ID, pero refiriéndonos mediante # (almoadilla) en vez de mediante . (punto):
h2#titulo{color:rojo;}
Así aplicaríamos el estilo (color de texto rojo) a todos los elementos con tag h2 y que tengan el ID rojo. Y si quisiéramos referirnos cualquier elementos con el ID titulo, sería:
#titulo{color:rojo;}
Selectores descendientes
Supongamos que tenemos el siguiente código HTML:
<div id=”info”>
<p>Texto</p>
<p>Más texto</p>
Si quisiéramos dar formato al texto de los párrafos dentro del div con ID info usaríamos la siguiente sintaxis:
#info p{color:rojo;}
Es decir, con un espacio entre los selectores indicamos que el segundo selector se encuentra contenido dentro del primero.
Hay que tener en cuenta que en el este ejemplo, estamos definiendo el estilo para cualquier tag <p> que se encuentre dentro de un elemento con ID info. Es decir, si dentro del tag <p> tuviéramos, por ejemplo una lista (<ul>) y en un elemento de esa lista (<li>) tuviéramos de nuevo un tag <p>, tambien se aplicaría el estilo (color de texto rojo) a este tag.
Esto mismo lo podemos aplicar tanto a tags, clases o IDs y encadenarlo indefinidamente. Por ejemplo (para aplicar estilo a un elemento con ID ‘dato’, que se encuentra dentro de un elemento de la clase ‘generico’ y que está dentro del tag body):
body .generico #dato{color:rojo;}
También podemos usar el selector universal o separar elementos con la misma sintaxis con comas.
Selector hijo
Para definir mas exactamente el nivel de anidamiento de nuestros elementos podemos usar este selector (>, mayor que):
div > a{color:rojo;}
De esta forma especificamos que el estilo es solamente válido para los elementos <a> dentro <div>. El elemento <a> debe estar dentro de <div> o inmediatamente a continuación, es decir, ser hijo o nieto de <div>
Selector de hermanos adyacentes
Podemos referirnos a elementos que se encuentran a la misma altura (hermanos) y uno a continuación del otro (adyacentes) con el caracter + (mas):
div + a{color:rojo;}
De esta forma nos referimos a los elementos con tag <a> que se encuentrn a continuación y a la misma altura que un <div>
Selectores de atributo
También podemos referirnos a elementos con un cierto atributo en HTML. Por ejemplo, para el siguiente código:
<h1 title="Titulo1">El título</h1>
Podemos de la siguiente forma (elementos con tag <h1> y el atributo title):
h1[title]{color:red;}
O podemos especificar mas (elementos con tag <h1> y el atributo title cuando este sea igual a ‘Titulo1′ ):
h1[title="Titulo1"]{color:red;}
En CSS2 podemos especificar cuando el atributo contenga algún valor (que contenga Titulo):
h1[title~="Titulo"]{color:red;}
Y en CSS3 podemos incluso comprobar si el atributo empieza, acaba o contiene un valor (con los caracteres ^, $ y * respectivamente)
Pseudo clases
Las pseudo clases permiten seleccionar elementos aplicando criterios que no se extraen directamente del código fuente, como por ejemplo los enlaces no visitados (:link), los enlaces visiados (:visited), los enlaces focalizados (:focus), cuando el raton está encima (:hover), cuando es un elemento activo, en click (:active) o para un elemento de un determinado idioma (:lang(en)). Por ejemplo (para referirse a elementos de tag <a> cuando son enlaces que han sido visitados y está el ratón encima):
a:visited:hover{color:red;}
Pseudo clases de estructura
Este tipo de pseudo clases no está muy extendido todavía. En CSS2 tan solo está definida :first-child:
#content:first-child{color:red;}
Este elemento se refiere al elemento #content cuando es el primer hijo del elemento inmediatamente superior. CSS3 amplia un poco el número de este tipo de pseudo clases.
Pseudo elementos
Algo similar ocurre con los pseudo elementos, están poco desarrollados en CSS2 y su número se ve en aumento en CSS3. Sirven para referirse a partes de elementos sin que estas partes tengan que estar directamente referenciadas en el código HTML. Por ejemplo (para referirse a la primera línea de un párrafo, elemento con tag <p>):
p:first-line{color:red}
De forma parecida, con :first-letter, nos referimos a la primera letra; con :before y :after, nos referimos al contenido antes y despues.