# Qué es una hoja de estilo

En las primeras versiones del HTML, el código fuente de una página web contenía tanto la información (el contenido) como la forma de representarse (el diseño o formato). Actualmente, estos dos aspectos se pueden separar. La página web (el documento html) sólo debe contener información, mientras que el formato se debe definir en las llamadas hojas de estilo (en inglés, CSS, Cascading Style Sheets, es decir, Hojas de Estilo en Cascada).

Las ventajas de utilizar hojas de estilo son muchas, sobre todo permiten hacer un diseño consistente y fácil de modificar. Si varias páginas web hacen referencia a la misma hoja de estilo, para cambiar la apariencia de un elemento de todas las páginas (por ejemplo, del encabezado <h1>) es suficiente con hacer los cambios en un único lugar, en la hoja de estilo.

## Sintaxis de las hojas de estilo

Una hoja de estilo es un archivo de texto en el que se define el aspecto de cada una 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 deben aparecer al principio de la hoja de estilo y las reglas después. Las reglas-arroba que se escriban después de alguna regla no se tienen en cuenta.

sentencia 1 sentencia 2 etc. | @import "general.css"; h1 { color : white ; background-color: black; } p { color : black ; background-color: white; }

Las reglas-arroba empiezan por el símbolo de arroba (@) pegado a un identificador y terminan por un punto y coma (;).

Las reglas están formadas por un selector y un bloque de declaración. El bloque de declaración empieza y acaba con llaves { }.

selector declaración | @import "general.css"; h1 { color : white ; background-color: black; } p { color : black ; background-color: white; }

Cada declaración está formada por una o varias propiedades y su valor (o valores) correspondiente. 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.

selector1 { propiedad1 : valor ; propiedad2 : valor ; etc : etc }

h1 { color : white ; background-color : black ; }

Volver al principio de la página

### Definir varias 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 } | Esto es un párrafo. Esto es una dirección <address>.

Lo que no es correcto es definir varias propiedades simultáneamente, como muestran los siguientes ejemplos:

| p { border-left, border-right: red 3px solid; } | Esto es un párrafo.
| p { border-left: red 3px solid; border-right: red 3px solid; } | Esto es un párrafo.

Volver al principio de la página

## Comentarios en las hojas de estilo

Una hoja de estilo puede contener comentarios. Los delimitadores del comentario son /* ... */ (como en el lenguaje de programación C). Los comentarios pueden extenderse varias líneas, como ilustra el siguiente ejemplo:

    /* Autor: Bartolomé Sintes Marco
       Fecha: 9 de noviembre de 2006
    */
    h1 {
        color : white ;                 /* texto blanco */
        background-color : black ;      /* sobre fondo negro */
    }

Volver al principio de la página

## Formato de las hojas de estilo

Una hoja de estilo es un fichero de texto plano. Los navegadores no hacen caso de los espacios en blanco, de los tabuladores o de los saltos de línea que contenga la hoja de estilo, así que los siguiente ejemplos son equivalentes:

    h1{color:white;background-color:black;}

    h1 { color: white; background-color: black; }

    h1
       { background-color : black; color : white; }

    h1 { color : white ;
         background-color : black ; }

    h1 { color : white ;
         background-color : black ;
       }

    h1
       {
         color : white ;
         background-color : black ;
       }

    h1 {
      background-color: black;
      color: white;
    }

Para facilitar la modificación en el futuro de las hojas de estilo que se hayan creado, conviene que la hoja de estilo sea lo más clara y organizada posible. Para ello se aconseja insertar los comentario, espacios y líneas en blanco necesarios.

El único motivo para hacer hojas de estilo muy compactas podría ser reducir el tamaño del archivo y reducir el tiempo de descarga, pero dado que el tamaño de las hojas de estilo suele ser pequeño, no vale la pena hacerlo.

El formato adoptado en este curso (en los ejemplos y ejercicios) es el del último ejemplo:

- El selector y la llave de apertura en una línea, sin indentar y con espacio entre el selector y la llave.
- Las propiedades en las siguientes líneas, indentadas con dos espacios en blanco, una propiedad por línea, en orden alfabético si el orden no modifica el resultado (con algunas excepciones que se verán más adelante), sin espacio antes de los dos puntos, con espacio tras los dos puntos, sin espacio antes del punto y coma, siempre con punto y coma al final.
- La llave de cierre en un línea, sin indentar.

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.