Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS, es el lenguaje de estilos utilizado para describir la presentación de documentos HTML. CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada por parte del W3C.

Para definir estilos, se hace el siguiente modo:

  p {                     /* Elemento HTML a dar formato */
    color: red;           /* Propiedad color del elemento (en ester caso texto del párrafo) */
    text_align: center;   /* Propiedad de alineamiento del texto, en este caso centrado */
    }

Las indentaciones y saltos de línea se han puesto e este modo para ganar claridad, pero son ignorados. Los elementos a dar formato se denominan selectores:

• Elementos HTML: Pueden definirse varios elementos separados por comas. Afecta a todos los elementos de ese tipo.
• Id: Si en HTML se define una id para un elemento concreto, se puede dar formato sólo a ese elemento indicando #id.
• Clase: Si en HTML se define una clase para varios elementos o tipos de elementos, se puede dar formato a esa clase indicando .clase.
• *: Selector universal que afecta a todos los elementos.

Cabe la posibilidad de que a un elemento se le puedan asignar varias clases en el HTML:

p class="nombreClase1 nombreClase2"

• CSS externo: En un documento nombreDocumento.css que debe ser referenciado en el head del HTML. Se van declarando los estilos de los diferentes elementos uno debajo de otro.
• CSS interno: Se declaran los estilos el la cabecera del HTML. En lugar de hacer una referencia, se escriben los estilos uno debajo de otro.
• CSS en línea: Se declaran los estilos en cada elemento afectado, dentro de la etiqueta HTML que corresponda. Se suelen poner “seguidos”, es decir, sin saltos de línea ni indentaciones.

Cuando se declaran a la vez en diferentes sitios, se toman por orden de preferecia:

1. En línea.
2. Interno.
3. Externo.
4. Por defecto del explorador.

Los comentarios en CSS tienen la sintaxis /* Línea/s de comentario */ No olvidar que en HTML los comentarios eran de la forma <!– Comentario –>

CSS funciona con un “modelo de caja”. Cada elemento se encuentra dentro de una caja, cuyos límites, bordes, colocación y espacios interiores y exteriores pueden definirse mediante distintas propiedades.

En este modelo se distinguen las propiedades:

• margin: Márgenes. Espacio exterior al borde del elemento. Si el superior y el inferior son diferentes, se “colapsan”, es decir, ambos adquieren el valor del más alto. Esto no ocurre con el resto de propiedades del modelo de cajas. Puede depender del elemento en el que está englobado con la propiedad inherit.
• border: Borde del elemento. Por defecto es invisible, pero se le puede dar estilo.
• padding: Espacio interior al borde del elemento. Entre el contenido y el borde. Puede expresarse en % respecto al ancho del contenedor (caja delimitada por los bordes, width+padding). También permite usar la propiedad inherit.

Aunque no está referenciada respecto al modelo de caja, existe un elemento denominado Outline, que se corresponde con una línea exterior al borde, pero pegada al mismo. Al no referencial al modelo de caja, puede solapar a éste en función de las propiedades que tenga declaradas.