Es un lenguaje para diseño visual de documentos estructurados escritos en HTML. Fue creado por W3C para separar el contenido que sera escrito usando HTML del formato de presentación que es CSS, incluyendo capas, colores, fuentes, cajas, etc para mejorar la accesibilidad, proveer flexibilidad, reducir la complejidad.
| Versión | Fecha | Descripción |
|---|---|---|
| CSS 1.0 | Propuesto: 1994 Especificación: 1996 | |
| CSS 2.0 | 1998 | No esta completamente implementada |
| CSS 2.1 | Propuesto: 2004 Aun no es una especificación | Cerca a ser implementada |
| CSS 3.0 Modular | Cada modulo tendrá sus propios tiempos | Algunos módulos ya están implementados. |
Al igual que ocurre con HTML5, la W3C introdujo un nuevo método de trabajo en CSS3, dividiendo en diferentes módulos, cada uno con su propio grupos de trabajo y calendario, cuando esta listo el modulo se produce la recomendación de manera independiente de otros módulos. Puedes consultar el estatus de cada modulo en la pagina CSS current work.
| Abreviatura | Descripcion |
|---|---|
| WD | Borrador de trabajo |
| LC | Ultima llamada |
| CR | Candidata a Recomendación |
| PR | Proyecto de Recomendación |
| REC | Recomendación |
Hasta el momento era necesario recurrir a diversos trucos para suplir las limitaciones del HTML y mejorar la presentación de las páginas. Estos trucos normalmente usados han tenido efectos secundarios ya que suelen funcionar solo para algunas navegadores, aumentan la complejidad de la pagina, tienen poca flexibilidad y tienden a aumentar el peso de la pagina (mas KBs).
Algunos de estos trucos son:
Las hojas de estilo en cascada nos devuelven el control de la presentación. Por ejemplo, nos permiten determinar margenes, espacio interlineal, tipo y tamaño de las fuentes, colores de texto y fondo, así como la redefinicion a voluntad de cualquier zona del DOM.
Además hay otro aspecto muy importante en CSS y es que separan por completo la información de la presentación de una página de su contenido, con lo que se facilita mucho el diseño y revisión de las páginas, pues se puede variar la presentación de una página, o de todo el conjunto de ellas, sin cambiar una sola línea del código del DOM.
Los beneficios de usar CSS son:
Las hojas de estilo en cascada nos permiten redefinir las reglas que usa el navegador para presentar una página Web.
Cada etiqueta tienen sus propias reglas o comportamiento por defecto, que respetan los navegadores. Así, por ejemplo si usas una etiqueta H1 el navegador lo representara como: un texto alineado a la izquierda, un par de puntos mayor que el resto y en negrita.
Con CSS podemos cambiar cada una de estas reglas si lo deseamos. Es decir, podemos modificar a nuestro antojo el comportamiento de cada etiqueta.
El formato básico de CSS es el siguiente:
Selector {propiedad:valor;}
Este formato puede ser aplicado de tres maneras a nuestras páginas Web:
| Estilo | Descripción | Comportamiento |
|---|---|---|
| Añadiendo | Incluir el atributo STYLE a una sola etiquetas. | Afectado solo a este elemento en particular. |
| Incluyendo | Incluir la etiqueta STYLE en la cabecera de la pagina. | Afecta a la pagina entera, pero solo a esta. |
| Enlazando | Incluir la etiqueta LYNK en la cabecera. | Afecta múltiples páginas con solo retocando dicho archivo. |
Podemos usar en nuestras páginas uno, dos o los tres métodos descritos, como se verá más adelante.
Este método es el apropiado si sólo se desea cambiar el estilo en un elemento determinadas de una página. Con él podemos manipular las propiedades de una etiqueta y todas las que estén contenidas en ella.
Se hace añadiendo el atributo STYLE en la etiqueta de apertura del elemento, que contiene una serie de propiedades. Veamos los siguientes ejemplos:
<etiqueta STYLE="propiedad:valor;">texto</etiqueta>
Ejemplo 1: Párrafo de color rojo.
<P STYLE="color:red;">
Ejemplo 2: Este es un párrafo con márgenes superior e inferior son 0, izquierdo y derecha de 10px y letra de color verde.
<P STYLE="margin:0 10px;color:green;">
Obsérvese la sintaxis del atributo STYLE. Se ponen entre comillas una serie de propiedades (por ejemplo, margin) y después de dos puntos se pone el valor de dicha propiedad (en este caso, 10px). Las distintos pares de propiedad:valor deberán estar separadas por punto y coma.
Si queremos cambiar la apariencia de una sección entera (que agrupe un conjunto de etiquetas), se puede usar la etiqueta DIV, con lo que definimos el estilo globalmente para esa sección.
En el siguiente ejemplo cambiamos el color (a rojo) y el tamaño de la fuente (a 16 puntos) de un bloque de etiquetas por medio de la etiqueta DIV, lo que tiene el mismo efecto que si hubiéramos asignado este estilo separadamente a cada una de las etiquetas englobados: P, UL y LI.
<DIV STYLE="font-size:16pt;color:red"> <P>La definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas.</P> <P>Este texto también es rojo y tiene 16 puntos de altura.</P> <P>Al igual que esta línea. </DIV>
Qué ocurre si a una de las etiquetas englobadas por DIV le introducimos un estilo distinto ? Comprobémoslo introduciendo un estilo propio en la segunda etiqueta P:
<DIV STYLE="font-size: 16pt; color: blue"> <P>Veamos si la definición del estilo (azul y 16 puntos), afecta a todo el bloque de la etiqueta, hasta la etiqueta cierre de DIV.</P> <P STYLE="color: green">Esta línea es verde, a pesar de estar englobada dentro del DIV, porque tiene su propio estilo.</P> <P>Esta otra cumple con el estilo de DIV, porque no tiene estilo propio.</P> </DIV>
Este es el resultado:
Veamos si la definición del estilo (azul y 16 puntos), afecta a todo el bloque de etiquetas.
Esta línea es verde, a pesar de estar englobada dentro del DIV, porque tiene su propio estilo.
Esta otra cumple con el estilo de DIV, porque no tiene estilo propio.
Como se comprueba en este caso, el estilo dentro de una etiqueta concreta tiene preferencia sobre el estilo del bloque, impuesto por DIV que es su padre.
La preferencia de unos estilos sobre otros, se debe al orden en que estos son activados por el navegador, por este motivo es que se llamen Hojas de estilo en cascada ya que hay una cascada de métodos para aplicar los estilos, teniendo un orden de preferencia riguroso de unos sobre otros.
Este método de introducir el estilo en etiquetas concretas o en conjuntos de etiquetas es sencillo de aplicar y es el adecuado si sólo se desea hacer algún cambio puntual en una página. Sin embargo no es la verdadera potencia de los hojas de estilo.
Se hace poniendo un bloque de instrucciones dentro de los etiquetas <STYLE> y </STYLE>, que deberá estar dentro de la cabecera del documento, después del título, entre las etiquetas </TITLE> y </HEAD>.
<HTML>
<HEAD>
<TITLE>... </TITLE>
<STYLE>
...
Selector {propiedad:valor;}
...
</STYLE>
</HEAD>
<BODY>
[conjunto de todas las etiquetas que componen la página]
</BODY>
</HTML>
En el capítulo siguiente se ve con detalle cada uno de las propiedades y sus posibles valores.
<STYLE>
BODY {background: yellow; font-size: 10pt; font-family: Arial; margin-left: 0.5in; margin-right: 0.5in}
H1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
H2 {font-size: 12pt; font-weight: bold; color: red}
DIV {background: URL(nubes.jpg)}
</STYLE>
Como se ve en este ejemplo, se ponen las distintas etiquetas a las que se quiere atribuir un estilo (en este caso BODY, H1, H2 y DIV, pero podrían haber sido otras cualesquiera); a continuación del nombre de cada etiqueta, y englobadas por los signos "{" y "}" van las distintas propiedades con sus respectivos valores, separadas unas de otras por un punto y coma.
Si se coloca este bloque en la cabecera del documento HTML, donde se ha indicado antes, veremos que cada vez que se usa una de las etiquetas que tienen una definición de estilo, no se comportará de la forma habitual, sino tal como la hemos definido. El resto de los etiquetas, que no están incluidas en el bloque de definición del estilo, se comportarán de la forma habitual.
Si nuestro sitio de Web está compuesto por muchas páginas, y queremos darles un estilo uniforme a todas ellas, en vez de incluir un bloque de definición de estilo repetido en cada una de ellas (como se ha visto en la sección anterior), se puede establecer un enlace a un archivo de texto que contiene el bloque de definición del estilo. La extensión CSS no es obligatoria, pero si recomendable.
<HTML> <HEAD> <TITLE>... </TITLE> <LINK TYPE="text/css" REL="StyleSheet" HREF="archivo.css" /> </HEAD> <BODY> ... </BODY> </HTML>
Aquí se ha supuesto que el archivo hoja.css se ha dejado en el misma carpeta donde están los documentos HTML. Si no es así, es decir, si está en otra carpeta en el servidor, habría que indicar la ruta (por, ejemplo: HREF=ruta/hoja.css).
Dentro de este archivo el formato es exactamente el mismo:
Selector {propiedad:valor;}
Un ejemplo de este método lo constituye este manual, en donde todos los capítulos están enlazados con un archivo que contiene la hoja de estilo para todos ellos, llamado hoja.css.