Hojas de estilo en cascada CSS

Al igual que ocurre con HTML 5, la W3C introdujo un nuevo metodo de trabajo y es que se dividio en diferentes modulos y acada uno es una especificacion independiente, con su propio grupo de desarrolladores y calendario. Puedes consultar el estatus de cada modulo en la pagina CSS current work.

Introducción

Las hojas de estilo son un gran avance en el diseñe páginas Web, ya que permiten un mejor manejo de la apariencia.

VersionFechaDescripcion
CSS 1.0Propuesto: 1994
Especificacion: 1996
CSS 2.01998No esta completamente inplementada
CSS 2.1Propuesto: 2004
Aun no es una especificacion
Cerca a ser implementada
CSS 3.0
Modular
Cada modulo tendra
sus propios tiempos
Algunos modulos ya
estan implementados.
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 o plataformas, 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 interlíneal, 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:

Cómo funcionan ?

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 reglas o comportamiento por defecto, que respetan los navegodres. Así, por ejemplo se define H1 como un texto alineado a la izquierda, un par de puntos mayor que el resto y en negrita.

Con las hojas de estilo podemos cambiar cada una de estas reglas si lo deseamos. Es decir, podemos modificar a nuestro antojo el comportamiento de cada etiqueta.

El formato basico de CSS es el siguiente:

Selector {atributo: valor;}

Este formato puede ser aplicado de tres maneras a nuestras páginas Web:

  1. Añadiendo el atributo STYLE a una sóla etiquetas.
  2. Incluyendo las instrucciones de estilo en el documento HTML de una página concreta, permite cambiar la apariencia de una hoja entera.
  3. Enlazando varias paginas con un archivo de estilo, de modo que se puede cambiar la apariencia de múltiples páginas retocando dicho archivo .CSS

Podemos usar en nuestras páginas uno, dos o los tres métodos descritos, como se verá más adelante.

1. Estilo para etiquetas en concreto

Este método es el apropiado si sólo se desea cambiar el estilo en unas secciones determinadas de una página. Con él podemos manipular las propiedades de una etiqueta y todas las que esten contenidas en ella.

Se hace añadiendo el atributo STYLE, que contiene una serie de propiedades, dentro de la etiqueta correspondiente de apertura. Veamos los siguientes ejemplos:

Ejemplo 1: Parrafo de color rojp.

<P STYLE="color: red">

Ejemplo 2: Este es un párrafo con márgenes izquierdo y derecha de 0.4 pungadas, superios e inferior en 0 y letra de color verde.

<P STYLE="margin: 0 0.5in 0 0.5in; color:green">

Obsérvese la sintaxis del atriburo STYLE. Se ponen entre comillas una serie de propiedades (por ejemplo, margin-left), y después de dos puntos se pone el valor de esa propiedad (en este caso, 0.5in o sea, 0.5 pulgadas). Las distintps pares 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>Este texto también es rojo y tiene 16 puntos de altura.
<P>Al igual que esta línea.
</DIV>

Qué ocurre si a una de las etiquetas englobados por DIV le introducimos un estilo distinto ? Comprobémoslo introduciendo un estilo propio la segunda etiqueta <P>:

<DIV STYLE="font-size: 16pt; color: red">
<P>
Veamos si la definición del estilo (rojo y 16 puntos), afecta a todo el bloque de la etiqueta, hasta la etiqueta cierre de DIV.
<P STYLE="color: blue">Esta línea es azul, a pesar de 
estar englobada dentro de DIV, porque tiene su propio estilo.
<P>Esta otra cumple con el estilo de DIV, porque no tiene 
estilo propio.
</DIV>

Este es el resultado:

Esta línea es azul, a pesar de estar englobada dentro de 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.

2. Inclusión global del estilo en un documento HTML

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>
      [bloque de instruciones de estilo]
   </STYLE>
</HEAD>
<BODY>
   [conjunto de todas las etiquetas que componen la página]
</BODY>
</HTML>

El formato generico es:

Selector {propiedad: valor;}

En el capítulo siguiente se ve con detalle cada uno de los atributos y sus posibles valores.

Ejemplo 1:

<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.

3. Enlazando distintos documentos a una hoja de estilo

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 extencion CSS no es obligatoria, pero si reomendable.

<HTML>
<HEAD>
   <TITLE>... </TITLE>
   <Link type="text/css" rel="StyleSheet" href="archivo.css"></Link>
   </HEAD>
<BODY>
   [conjunto de todas las etiquetas que componen la página]
</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.


Selectores

Se llama selector a la sintaxis que define a quien se aplicara un grupo de atributos de estilo. Mas datos aqui.

1. Etiquetas

Se puede asignar el estilo a una tipo de etiqueta concreta de HTML, pero hay que tener en cuenta que afectara a todas las que se usen en la pagina. Para ello, en la declaración de estilos escribimos la etiqueta y entre llaves, las propiedades de estilo que deseemos, seguido de dos puntos y el valor seguido de punto y coma.

body { 
   	background: #f0f0f0; 
   	color: #333366; 
}

Podemos aplicar el mismo estilo en un conjunto de etiquetas. Para ello, indicamos las etiquetas seguidas por comas y luego, entre llaves, las propiedades y valores.

h1, p { 
   	color: red; 
}

En este caso se define que los encabezados de nivel 1 y los párrafos, tengan letra roja.

Otro ejemplo:

header, nav, footer{ 
   	background-color: #000000; 
   	color: #ffffff; 
	border: 1px solid red;
}

2. Clases

Podemos usar una clase o mas clases, si deseamos crear un estilo específico, para luego aplicarlo a distintos elementos de la página. Las clases en la declaración de estilos se declaran con un punto antes del nombre de la clase.

.miclase{ 
   	color: blue; 
}

Para asignar el estilo definido por una clase en un elemento HTML, simplemente se añadir el atributo class a la etiqueta que queremos aplicar dicha clase. Por ejemplo:

<p class="miclase">este párrafo tiene el estilo definido en la clase "miclase".

El párrafo anterior se presentaría con color azul. La definición de clases y su uso es sencilla, pero veamos un ejemplo más detallado:

Para la siguiente declaración de estilos:
.inverso { 
   	background-color: #ffffff; 
   	color: #000000; 
}

Se ha definido un fondo negro y el texto blanco para el cuerpo de la página (body), así como las celdas y los párrafos. Luego se ha declarado una clase, de nombre "inverso", con los colores al revés, es decir, fondo blanco y texto negro.

Ejemplo 3:
<body> 
<p/gt;Hola esto es un parrafo normal</p/gt;
<p class="inverso">Párrafo con los colores invertidos</p/gt;
<table/gt; 
<tr/gt; 
   	<td class="inverso">INVERSO</td/gt;
   	<td>NORMAL</td/gt;
</tr/gt;
</table/gt;
</body/gt;

Esta página tiene el fondo negro y el texto blanco. El primer párrafo, que es un párrafo normal, sigue esa definición general de estilos, pero el segundo párrafo, al que se ha aplicado la clase "inverso", tiene el fondo blanco y el texto en negro. Por lo que respecta a la tabla, en su primera celda se ha asignado la clase "inverso", por lo que se verá con fondo blanco y color de texto en negro. Mientras que la segunda celda, que no tiene asignada ninguna clase, se presentará como se definió en la regla general.

3. Indices

Se puede definir un estilo especifico para un solo indicador id, para esto el nombre del indicar se preceder de # y en el elemento se asigna el mismo id. Hay que aclara que a diferencia de la clase este estilo solo se puede aplicar una vez.

#queso {text-align: center;}

4. Atributo

Se puede usar el hecho de que una etiqueta contenga un atributo especifico como selector. Para su definicion en CSS el atributo debe ir entre corchetes.

Ejemplo: Selecciona todas los elementos que contengan el atributo Title.
[Title]{color: red;}

Ejemplo: Selecciona cualquier elemento button sin un atributo DISABLED.

button:not([DISABLED]) {color: red;}

5. Atributo y valor

Se puede usar el hecho de que una etiqueta tenga un valor especifico en un atributo. Para este caso se designa entre corchetes el atributo, luego un simbolo y luego un valor. El simbolo puede ser =, ^= (empieza con), $= (termina con), *= (contiene) o |= (diferente).

Ejemplo: Selecciona cualquier elemento cuyo atributo HREF termine en .PDF
[href$=".pdf"] {color: red;}

6. Operadores de pertenencia

Se puede usar el operador > (descendiente), * (todos), not() (negacion)

Ejemplo: Selecciona cualquier elemento p que es descendiente de un elemento li que es hijo de un elemento ol que es hijo de un elemento body.

body > ol > li p {color: red;}

Ejemplo: Selecciona cualquier elemento que no sea un elemento a.

*:not(a) {color: red;}

7. Pseudo Clases

Una pseudo clase en cuando analizamos el valor de una propiedad.

a:linkEnlace no visitado aun.
a:visitedElace ya visitado.
a:hoverCon el mouse encima. Ojo se puede usar en cuaquier etiqueta.
a:focus
a:activateActualmente activa
Tambien tenemos las siguientes pseudo clases:
:First-ChildEl primer hijo.
:nth-Child()El hijo n (numerico) o ODD o EVEN
:Only-ChildEl unico hijo.
:nth-Last-Child()El hijo n antes del ultimo.
:Last-ChildEl ultimo hijo.
:First-of-TypeEl primero de su tipo.
:nth-of-Type()El n del tipo.
:Only-of-TypeEl unico de su tipo.
:nth-Last-of-Type()
:Last-of-TypeEl ultimo de su tipo.
:EmptyEsta vacio.
:RootEs la raiz.
:TargetEs enlace
:chechedselecciona elementos input "marcados"
:disablesselecciona elementos input "desabilitrados"
:invalidselecciona elementos input "invalidos"
:requiredselecciona elementos input "requeridos"
:read-onlyselecciona elementos input "solo lectura"
:read-writeselecciona elementos input sin atributo "solo lectura"

CSS tambien permiten modificar a voluntad la apariencia de los enlaces, usando como selector una pseudo clases especifica, luego el atributo (color, tamañe fuente, subrayado o no) y finalmente el valor a asignar.

Hay seis tipos de pseudo clase disponibles:

:link
Enlace que todavía no han sido visitados.
:visited
Enlace que ya han sido visitados.
:hover
Enlace donde se posa el puntero del mouse.
:active
Enlace que esta activo
:focus
Enlace que tiene el foco
:lang
Selector por lenguaje. Ej html:lang (es) {font-size: 80%;}
Ejemplo: hace que los enlaces por visitar sean de color azul, una vez visitados se pongan de color verde y alponer el mouse encima de color rojo.
a:link {color: blue;} 
a:visited {color: green;} 
a:hover {color: red;}

Si se les aplica la propiedad text-decoration, ajustado al valor none (ninguno), hace que los enlaces no estén subrayados. Ejemplo: Hace que los enlaces visitados sean de color fucsia y no estén subrayados.

A:visited {color: fuchsia; text-decoration: none}

8. Pseudo elementos

Los pseudo elementos permiten seleccionar una seccion del DOM sin tener en cuanta una etiqueta en especial, sino mas bien de su posicion dentro del DOM.

::First-line
::First-letter
::Before
::After

Normalmnet estos dos ultimos asociados a un Generator Content.

Ejemplo: En el ejemplo se esta introduciendo un nbsp (codigo unicode 00A0) antes del div.
div::before {
	content: "\00A0";
	display: block;
	width: 0;
	heigth: 0;
	border-width: 10px 20px 10px 0;
	border-style: solid;
	border-color: transparent;
}

9. Identificar el navegador

Es posible que algunas implementaciones modernas no funcionen igual en todos los navegadores por lo que debes especificar una instruccion para cada navegador en particulor.

-moz-Firefox
-webkit-Chrome o Safari
-o-Opera
#grad {
    background: red; /* Para navegadores que no soportan gradiente */
    background: -webkit-linear-gradient(red, yellow); /* Para Safari 5.1 a 6.0 */
    background: -o-linear-gradient(red, yellow); /* Para Opera 11.1 a 12.0 */
    background: -moz-linear-gradient(red, yellow); /* Para Firefox 3.6 a 15 */
    background: linear-gradient(red, yellow); /* Sintexis estanadar */
}

10. Mezclando los tipo de selector

Como se ha visto anteriormente, existen muchos selectrores para aplicar estilos en cascada.

Ejemplo: Selecciona cualquier elemento h2 que no es un primer hijo de su tipo y que no es un último hijo de su tipo que es hijo de un elemento body.
body > h2:not(:first-of-type):not(:last-of-type) {color: red;}

Ejemplo: Selecciona cualquier elemento p sin un atributo class que contiene la palabra section.

p:not(.section) {color: red;}


Preguntas frecuentes sobre CSS:

Se pueden aplicar más de uno a la vez en una misma página ?

Sí. Por ejemplo, en la confección de este manual se utilizan simultáneamente algunos de ellos. En las páginas del índice y de la portada se utilizan el segundo método (inclusión de la hoja de estilo en el documento HTML) y también el primero (inclusión del estilo en etiquetas concretas). Y en la totalidad de los capítulos se usan el tercero (enlace a la hoja de estilo) y el primero.

Qué ocurre si hay información contradictoria entre ellos ?

Para evitar conflictos entre los distintos métodos usados simultáneamente, existe un orden de preferencia, es decir, cuál prevalecerá sobre el otro si dan órdenes contradictorias sobre un aspecto concreto.

El orden de preferencia es el siguiente (de mayor a menor):

  1. Estilo dentro de una etiqueta.
  2. Bloque de estilo en la cabecera del documento.
  3. Enlace a un archivo que contiene la hoja de estilo .CSS

Esto quiere decir que una orden de estilo, por ejemplo el color del texto, puesta dentro de un etiqueta, prevalecerá sobre la que esté indicada en los otros dos métodos, si es que se usan en esa página.

Lo más práctico es usar el tercer método (enlace a una hoja de estilo), para dar una apariencia consistente a todas las páginas, y si es necesario modificar un aspecto concreto en alguna de ellas, usar el primero o el segundo metodo.


Consejos de uso

En este capítulo se amplían los conceptos vistos en los dos capítulos anteriores, y se introducen algunos nuevos sobre las hojas de estilo en cascada.
El orden de los atributos es significativo. Los atributos Font-Weight y Font-Style se deben especificar antes que los demas.

Comentarios

Se pueden añadir comentarios propios a las hojas de estilo, que pueden servir de recordatorio posterior. Se pueden colocar en cualquier sitio de la especificacisn, siempre que vayan englobados entre los caracteres /* y */.

H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde*/

Si quieres hacer que una linea deje de hacer efecto, simplemente añadele un * delante del selector. Al no reconocer el selector, dejara de funcionar.

Diseño para todos los navegadores

Si se usa el metodo de incluir un bloque de estilo en la cabecera, que consiste en poner las distintas instrucciones de estilo entre las etiquetas <STYLE> y </STYLE>, tal como en el ejemplo que se visúalisara:
<STYLE TYPE="text/css"> 
	BODY {
		background: yellow; 
		font-size: 10pt; 
		font-family: Arial; 
		margin-left: 2cm; 
		margin-right: 2cm
	}
	H1 {
		background: blue; 
		font-size: 14pt; 
		font-weight: bold; 
		color: red
	} 
	H2 {
		font-size: 12pt; 
		font-weight: bold; 
		color: red
	} 
	DIV {
		background: URL(isla.gif)
	} 
</STYLE>

En los navegadores que no implementen las hojas de estilo se ignoraran las etiquetas <STYLE> y </STYLE>, pero podrá ocurrir que aparezca como texto el bloque de definición del estilo.

Para evitar esto, es conveniente englobar dicho bloque de información entre los símbolos <!-- y -->. Por tanto, es conveniente poner el bloque de definición del estilo de esta manera:

<Style Type="text/css"> 
	<!-- 
	BODY {
		background: yellow; 
		font-size: 10pt; 
		font-family: Arial; 
		margin-left: 2cm; 
		margin-right: 2cm;
	} 
	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> 

Aprovechando la herencia entre etiquetas

Como sabemos, las etiquetas de un documento HTML tienen una estructura definida, que de manera muy resumida se puede poner de esta forma:
<HTML> 
<BODY> 
	(conjunto de etiquetas que conforman el DOM) 
</BODY> 
</HTML> 

Como se puede ver, la etiqueta <BODY> engloba a todas las demas. Si se la asigna un estilo determinado a esta etiqueta, todos los elementos que estin dentro de la pagina (tablas, listas, parrafos, etc.) heredaran este estilo.

Por tanto, para establecer un estilo global a la pagina entera, lo mas apropiado es atribuirselo a la etiqueta <BODY>. Por ejemplo:

BODY {
	font: 10pt/11pt Arial, Helvetica, sans-serif; 
	background: url(isla.gif); 
	margin: 0 2cm 0 2cm;
}

Establece para el DOM completo la fuente, separación entre líneas, imagen de fondo y espesor de los margenes. Si se precisa que ciertos elementos concretos dentro del DOM tengan otras caractermsticas distinta a la general, entonces hay que definirlas por separado.


Metodos de desarrollo

1. Progressive enhancement - Mejora progresiva
Propone hacer un diseño basico que soportes todos los navegadores y a partir de alli mejorando en capas con CSS3, JavaScript, etc
2. Graceful degradatio - degradacion en elegancia
Es el proceso inverso.
Recomendaciones:
  1. W3 index list
  2. HTML.net
  3. CSS3 Generator
  4. 50 fantasticos ejemplos
  5. Opal Group
  6. CSS Discussion list
  7. CSS-D Wiki
  8. CSS Zen Garden
  9. Yahoo recommends YUI 3
  10. The OPAL group

Una pagina con muchos ejemplos es CSS 3 info