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 están separados. La página web sólo debe contener información, mientras que el formato se describe en lo que se llaman Hojas de Estilo en Cascada (en inglés, CSS, Cascading Style Sheets).

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 reglas 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.

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 { }.

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. Si una propiedad admite o necesita varios valores, los valores van separados por espacios en blanco.

Presentación de una hoja de estilo

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, por lo que tienes libertad para escribir las declaraciones de la manera que te resulte más cómoda. Intenta que el resultado sea legible. Los siguiente ejemplos son equivalentes:

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

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

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

Selectores

El selector más habitual es el propio nombre de la etiqueta.

Si quieres definir varias etiquetas simultáneamente, escríbelas entre comas:

Orden de las declaraciones

Comentarios

Una hoja de estilo puede contener comentarios. La marca que engloba el comentario (que puede extenderse una o varias líneas) es /* ... */ (como en el lenguaje de programación C)