REFERENCIA HTML

Se puede definir una hoja de estilo como una colección de reglas que afectan a la apariencia de un documento o parte del mismo.

Las ventajas que presenta el uso de CSS son:

Terminología empleada en CSS

Para comprender el funcionamiento de las hojas de estilo en cascada es necesario conocer los términos empleados en las mismas:

Propiedad

Una propiedad es una característica de un elemento que puede verse modificada mediante una hoja de estilo. Por ejemplo color o text-transform. Estas propiedades son muy numerosas permitiendo cambiar muchas características que hasta ahora no era posible.

Valor

Valor es el dato que se asigna a una determinada propiedad. Por ejemplo #FFFFFF es un valor para el color y uppercase es un valor de la propiedad text-transform.

Declaración

Una declaración esta formada por una propiedad y su valor. La declaración comienza por el nombre de la propiedad seguido de dos puntos y a continuación del valor de la propiedad. En nuestro ejemplo color: #FFFFFF; y text-transform: uppercase; son dos declaraciones.

Selector

Un selector es una etiqueta estándar de HTML o un nuevo nombre escrito por nosotros al cual se le quiere asignar una declaración. Por ejemplo: p, H1, strong son selectores del HTML.

Regla de estilo

Una regla es un selector junto con la declaración, por ejemplo, H1{color:rojo}. Al crear reglas es posible agrupar selectores y declaraciones. Un ejemplo de regla con dos declaraciones sería:

strong { color: #FFFFFF; text-transform: uppercase; }
Para separar las declaraciones se utiliza punto y coma.
Tambien se pueden agrupar los selectores como en este ejemplo
H1,H2{color:rojo;font-family:arial}
Tanto los h1 y h2 serán mostrados de color rojo y tipo de letra arial. En este caso se utiliza la coma para separar los selectores.

Hoja de estilo

Una hoja de estilo es un conjunto de reglas que definen completamente el aspecto de todos los elementos de la página.

Colocación de las reglas de estilo

Las reglas de estilo pueden ir colocadas:

1. Dentro de una etiqueta individual.
<etiqueta STYLE="propiedad1:valor;...;propiedadN:valor"> ...texto... </etiqueta>

Estas reglas sólo afectan a una etiqueta particular. No se utilizan las llaves para escribir las declaraciones sino que se escriben entre comillas dentro del modificador STYLE. Este tipo de colocación es el que implementa KompoZer a las capas en cuanto a tamaño y demás cuando las modificamos mediante la interfaz gráfica.

2. Afectando a toda la página.

Van colocadas dentro del HEAD de la página, entre dos etiquetas <STYLE type="text/css">
..reglas... </STYLE> y afectan a todas las etiquetas del mismo tipo que aparezcan a lo largo de la página.

3.En un archivo externo llamado hoja de estilos cuya extensión es .CSS

Lo más interesante es coger todos los estilos que vayamos a utilizar en un web y extraerlos a un archivo externo en donde almacenamos esas reglas de estilo. Esos archivos tienen extensión CSS.

Para vincular las páginas al formato definido en el archivo CSS hay que colocar en cada una de ellas una etiqueta como esta dentro del HEAD:

<LINK REL="stylesheet" TYPE="text/css" HREF="archivo.css">

Donde archivo.css contiene las reglas de estilo.

De esta forma conseguimos establecer el formato uniforme para todas las páginas y además cualquier cambio que hacemos en la hoja de estilos se ve reflejado de forma inmediata en todas las páginas que usen esta hoja de estilos. Es por eso que es la opción más utilizada.