Aprende a continuación un par de conceptos clave en la elaboración de hojas de estilo CSS:
Reglas, selectores y propiedades
Para identificar los componentes de una regla, veamos primero un ejemplo de dos reglas:
h1, h2 {
color: black;
font-size: 16px;
}
Observa y localiza en cada una de ellas los siguientes componentes:
- Selector: Indica a qué etiquetas HTML aplica la regla que es el texto que precede a las llaves de apertura y cierre de la regla. En la primera regla, el selector es “h1, h2”, en la segunda “h2”.
- Propiedades: Especifican exactamente qué se hará con esos los elementos HTML a los que aplica. En la primera regla, las propiedades indican que la regla se refiere a los elementos HTML <h1> y <h2> y que a ellos se aplicarán el color negro (propiedad “color”) y un tamaño de letra de 16 pixeles al texto (propiedad “font-size”). En la segunda regla, la propiedad indica que la regla se refiere al elemento HTML <h2> y que a él se aplicará un tamaño de letra de 14 pixeles.
Reglas simples
Hay cientos de propiedades, de las cuáles trabajaremos unas cuantas más frecuentemente usadas y más útiles en un ejercicio interactivo a continuación. Estas propiedades las hemos utilizado hasta ahora en selectores simples: son los que se refieren a elementos HTML (etiquetas) ya existentes. Tienen el formato:
Veamos un ejemplo más:
p a {
text-decoration: underline;
}
En esta regla se han anidado dos elementos para indicar que esta regla sólo se refiere a
enlaces (etiqueta <a> en HTML)
dentro de párrafos de texto (etiqueta <p> en HTML) y que a estos enlaces se le aplicará un subrayado. Es decir, esta regla
no aplica a elementos que no se encuentren dentro de un párrafo (<p>).
Reglas complejas
Las reglas más complejas son las que diseñan selectores que sólo se aplican si se especifica mediante el atributo class en el documento HTML que conforma la web. Vamos a aprenderlo con un caso concreto:
p.text-izq {
text-align: left;
}
En esta regla se juega con una
etiqueta párrafo (<p>) y un
atributo de clase al que se le ha dado el nombre de text-izq. Es decir, esta regla sólo se
aplicará a párrafos (texto dentro de etiquetas <p>) que contienen un atributo “
class” con el valor “
text-izq” como éste:
<p class=”text-izq”>Texto del párrafo</p>
Fíjate que en la regla “text-izq” empieza con un punto. Es la manera de especificar en el lenguaje CSS que “text-izq” se refiere a un atributo de clase.
La cascada
Vas a ver ahora qué efectos produce el estilo en cascada, que es lo que se implementa al utilizar CSS: El nombre de hojas de estilo en “cascada” no es casual, expresa que los estilos que especifican con reglas se pueden heredar de una manera jerárquica. Pero sin embargo, la herencia se puede interrumpir mediante sobreescritura, llamada también principio de especificidad.
¿Cómo funciona? Observa el ejemplo:
body {
font-family: Arial;
}
Aquí se está obligando a que la etiqueta <body>, que es la que envuelve el contenido de cualquier página web, tenga un tipo de letra “Arial”. Gracias a la capacidad de herencia de las reglas, por defecto, cualquier elemento hijo como un título o un párrafo va a heredar ese estilo.
Pero podemos cortar esa tendencia utilizando la sobreescritura de estilo en un elemento que deseemos que tenga otra tipología de letra, como:
p {
font-family: Verdana;
}
Esta última regla aplica el
principio de especificidad. En principio, se plantearía un conflicto entre la regla general de <body> con lo que dice la regla de <p>, pero se resuelve fácilmente puesto que se aplica la regla más específica: referirse a un párrafo es más específico que referirse a “los elementos hijos que existen dentro de <body>”.
Finalmente, como otro ejemplo, considera que una regla con un selector “p a” (enlace dentro de un párrafo) tendría precedencia (sobreescribe) sobre una regla con un selector “a” que se refiere a un enlace a secas.
