Sintaxis de las hojas de estilo
Una hoja de estilo es un fichero de texto plano (sin formato) en el que se define el aspecto de las etiquetas de una página web:
Una hoja de estilo está formada por una o varias sentencias:
Existen dos tipos de sentencias: las reglas-arroba y las reglas:
Las reglas-arroba empiezan por el símbolo de arroba (@) pegado a un identificador y terminan por un punto y coma (;):
Algunas reglas-arroba (@import o @namespace) deben aparecer al principio de la hoja de estilo, pero el resto (@font-face, @media, etc.) pueden escribirse en cualquier lugar de la hoja de estilo.
Las reglas están formadas por un selector y un bloque de declaración. El bloque de declaración empieza y acaba con llaves { }.
Cada declaración está formada por una o varias propiedades y sus valores correspondientes. Las propiedades van separadas entre sí por puntos y comas. El valor (o valores) van separados de las propiedades por dos puntos. En general, si una propiedad necesita varios valores, los valores van separados por espacios en blanco. En general, si una propiedad admite varios valores alternativos, los valores van separados por comas.
Enlaces a varias hojas de estilo
Se pueden enlazar dos o más hojas de estilo, con lo que el código fuente contendrá tantas etiquetas <link> como hojas enlazadas:
<link rel="stylesheet" href="estilo-1.css">
<link rel="stylesheet" href="estilo-2.css">
En este caso, el navegador aplica las dos hojas de estilo a la página web, una tras otra. Si un elemento está definido en las dos hojas, el navegador hará lo que diga la última hoja de estilo de la lista.
Errores más comunes
Un error bastante habitual es escribir los caracteres < y > en la hoja de estilo.
<p> {
color: red;
}
Estilos en cascada
El formato final de cualquier elemento depende de la combinación de todas las propiedades que afectan al elemento. La denominación de hojas de estilo en cascada hace referencia precisamente a este hecho. En la lección Estilos en cascada se detallan las reglas que emplean los navegadores.
Por ejemplo, una de esas reglas es que a un elemento le afectan todas las propiedades de los elementos en los que está incluido, como muestra el ejemplo siguiente, en el que el color de texto del párrafo <p> viene determinado por la propiedad establecida para el elemento <body>:
body {
color: white;
}
p {
background-color: lightcoral;
}
Definir varios selectores simultáneamente
Se pueden definir varios selectores simultáneamente escribiendo los selectores separados por comas, como muestran los siguientes ejemplos:
p, address {
color: red
}
Lo que no es correcto es definir varias propiedades simultáneamente, como muestran los siguientes ejemplos:
p {
border-top, border-bottom: red 3px solid;
}
p {
border-top: red 3px solid;
border-bottom: red 3px solid;
}
Repetir selectores
Aunque no es incorrecto, no se aconseja repetir selectores, ya que distribuye la información en varios lugares de la hoja de estilo y eso dificulta la lectura e interpretación de la hoja de estilo a los lectores humanos.
Si se repiten las propiedades, el navegador aplica la propiedad que aparece en último lugar, como muestra el siguiente ejemplo:
p {
color: red;
}
p {
color: blue;
}
Si no se repiten las propiedades, el navegador aplica todas las propiedades, como muestra el siguiente ejemplo:
p {
color: white;
}
p {
background-color: black;
}