Guía Breve de CSS

¿Qué es CSS?

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

¿Para qué sirve?

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

¿Cómo funciona?

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.

Las tres formas más conocidas de dar estilo a un documento son las siguientes:

Algunas normas básicas a la hora de crear una CSS son las siguientes:

Ejemplos

A continuación se muestran tres ejemplos de Hojas de Estilo diferentes, en las que se cambian algunas características, vinculadas a este mismo documento: La Guía Breve de CSS. Comprueba el cambio de aspecto:

Más información sobre CSS

Guía de Referencia Rápida de CSS 2
Incluye una referencia de todos los selectores, propiedades, valores, etc.
Página principal de CSS
Incluye multitud de recursos sobre CSS.
Especificaciones CSS
Conjunto de todas las especificaciones de CSS existentes.
Tutorial introductorio de CSS
Breve tutorial desarrollado por Bert Bos para quienes desean utilizar CSS y no tienen experiencia.
Añadir un toque de estilo
Guía desarrollada por Dave Raggett que te ayudará de forma sencilla a dar estilo a tus documentos.
Consejos y Trucos de CSS
Colección de ejemplos CSS con una breve descripción de cómo utilizarlos.
CSS Zen Garden
El Jardín Zen del CSS es un ejercicio de aprendizaje y demostración de las posibilidades de diseño que ofrece CSS, para ello se presentan diferentes hojas de estilo para un mismo contenido y así podremos ver los cambios de estilo que se producen sin tener que modificar el documento.
Camaleón CSS
Proyecto de origen hispano inspirado en la misma idea y concepto original del CSS Zen Garden.
Validador de CSS
Servicio del W3C online y gratuito que nos permite comprobar la validez de las Hojas de Estilo.