CSS (hojas de estilo en cascada)

Podemos utilizar etiquetas HTML: “p”, por ejemplo hace referencia a todos los párrafos; “h1” haría referencia a los títulos de primer nivel; “img” a las imágenes.

Ejemplo:

h3{
    color : green;
}

El selector “h3” hace referencia a los títulos de tercer nivel, que, en este caso, serían de color verde.

Podemos utilizar clases (hemos hablado antes de los identificadores y las clases). Para hacer referencia a una clase escribimos un punto antes de su nombre:

.noticia{
    color : #999999;
} 

Los elementos con la clase noticia tendrán color #999999 (atención: definimos el color utilizando un código hexadecimal. No es la única forma de hacerlo, pero sí la más habitual. Lo iremos viendo en próximos ejemplos).

Podemos utilizar identificadores (si para la clase utilizábamos un punto, para los identificadores utilizamos una almohadilla: #):

#advertencia{
    color : #ff0000;
} 

Ojo: recordamos que nunca debe haber dos identificadores iguales en una misma página. No tendría sentido (y el HTML sería incorrecto).

Y podemos hacer todo tipo de combinaciones:

• #nav li → Los elementos li (elementos de un listado) que hay dentro del elemento con el identificador nav.
• .noticia strong → Las negritas que hay dentro de cada noticia (no las que están fuera de las noticias).
• p.noticia → Los párrafos con la clase noticia (puede haber también capas con las clase noticia, por ejemplo, pero con p.noticia nos referimos solo a los párrafos, no a otros elementos). Atención: en este caso, no habría espacio entre el elemento y la clase. (“div.novedad” son las capas con la clase novedad; mientras que “div .novedad” son los elementos con la clase novedad y que están dentro de una capa).
• li li → Los elementos de listas de segundo nivel (“li” haría referencia a los de primer nivel).

Mencionado el ejemplo de las listas (selector “li li”), vamos a ver cómo trabajan los CSS.