¿Cuál es la estructura de un archivo CSS? ¿Qué sintaxis tiene? Selectores, propiedades, valores. Veamos todo desde el principio.

Al igual que los documentos HTML, los documentos CSS son archivos de texto donde se escribe una serie de órdenes y el cliente (navegador) las interpreta y aplica a los documentos HTML asociados.

La estructura CSS se basa en reglas que tienen el siguiente formato:

Sintaxis simple

Con todo esto le iremos indicamos al navegador que, para cada etiqueta (selector especificado) debe aplicar las reglas (propiedad y valor) indicadas.

Vamos a verlo con un ejemplo para afianzar conceptos. Supongamos que este es el código HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Título de página</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    <div id="first">
        <p>Párrafo</p>
    </div>
    <div id="second">
        <span>Capa</span>
    </div>
</body>
</html>

Y además, por otro lado, este sería el código CSS del archivo index.css:

p {
    color:red;      /* Color de texto rojo */
}

De esta forma, a todas las etiquetas <p> se le aplicará el estilo especificado: el color rojo.

Truco: Se pueden incluir comentarios entre los caracteres /* y */, los cuales serán ignorados por el navegador y pueden ser utilizados por legibilidad y para documentar nuestros documentos CSS.

Sin embargo, esto es sólo un ejemplo muy sencillo. Se pueden aplicar muchas más reglas (no sólo el color del ejemplo), consiguiendo así un conjunto de estilos para la etiqueta indicada en el selector. Cada una de estas reglas se terminará con el carácter punto y coma (;).

En el siguiente esquema se puede ver las diferentes partes del código CSS con sus respectivos nombres:

Sintaxis múltiple

Truco: El último ; de un selector (en naranja) no es obligatorio y se puede omitir.

Además, también se pueden especificar agrupaciones de etiquetas, clases de etiquetas o cosas más complejas, pero eso lo veremos más adelante. De momento, vamos a centrarnos en las diferentes reglas que podemos utilizar.

Un buen consejo, para hacer más legible nuestro código CSS, es utilizar la siguiente estructura visual (indentar el código mediante espacios, con una propiedad por línea). Es una buena práctica, indispensable a la larga, que nos facilitará la lectura del código:

Sintaxis visual

Esto mejora sustancialmente la legibilidad del código y se considera un convenio a utilizar para evitar la complejidad de entender el código que no se encuentre correctamente indentado.

Más adelante, en un capítulo dedicado expresamente a ello, veremos que la estructura CSS puede ser más compleja, pero de momento trabajaremos con el esquema simplificado.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).