Estructura de CSS

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.

Estructura CSS

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

Sintaxis simple

  • Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo concreto. Por ejemplo, el elemento p. Realmente, esto es mucho más complejo, pero ya dedicaremos una serie de capítulos exclusivamente a este tema.

  • Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS e iremos aprendiendo.

  • Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento.

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. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.