Nada más molesto que cambiar planes a mitad de un proceso... Muchas veces los clientes deciden hacer cambios sobre la marcha. La pregunta ahora sería: ¿Qué pasaría si un cliente necesita hacer cambios en un sitio Web? Por ejemplo cambiar el color del encabezado de las páginas, la fuente de los títulos, el borde de las imágenes, etc. Si el sitio estuviera compuesto de pocas páginas nos podría llevar algunas horas las modificaciones. Pero si el sitio Web constara de unas cientos de páginas y tendría que hacer las modificaciones página por página nos llevaría más que unas cuantas horas.

Para solucionar este problema se han introducido las hojas de estilo (CSS, Cascading Style Sheets), que permiten controlar con facilidad la presentación y el aspecto de todas las páginas. Por ejemplo, permiten especificar el espacio entre las líneas de texto, el tipo y tamaño de las fuentes, el tamaño de los márgenes, los colores usados para el texto o el fondo, así como dar formato a cualquier etiqueta HTML. La utilización de estilos CSS para aplicar formato a una página permite separar el contenido de la presentación. El contenido de la página (el código HTML) reside en el archivo HTML, mientras que las reglas CSS que definen la presentación del código residen en otro archivo (una hoja de estilos externa) o en otra parte del documento HTML (normalmente, en la sección head). La separación del contenido y la presentación hace que resulte mucho más fácil mantener la presentación del sitio desde una ubicación central, ya que no es necesario actualizar las propiedades de las distintas páginas cuando se desea realizar algún cambio.

Para definir estilos en las etiquetas se debe usar el siguiente formato:

Toda la línea anterior es una regla. El selector o identificador indica a qué elemento se aplicará el formato. Las propiedades de formato y sus valores se colocan entre llaves y son separadas por punto y comas -esto conforma lo que denominaremos bloque CSS-. El código puede escribirse en varias líneas para que sea más fácil de entender. Si los valores que son asignados a las propiedades llevan múltiple palabras se deben encerrar entre comillas dobles.

Además de anexar numerosas propiedades a un selector, también es posible colocar muchos selectores separados por comas al cual se le van a aplicar las mismas propiedades.

Para los ejemplos que daremos a continuación el selector a aplicar las modificaciones serán etiquetas o tags html.

Una regla en CSS.