Los Estilos CSS

Las hojas de estilo intentan separar el contenido de un página de la forma de presentarlo en pantalla. Esto lo hacen cambiando la forma de actuar de las etiquetas de formato html. Por ejemplo, sabemos que usando <p> tendremos una párrafo nuevo con una separación del anterior determinada, o que strong pone el texto en negrita, etc.. Con las hojas de estilo también podremos decirle a un párrafo que todo su texto sea verde y que además va a tener un margen izquierdo de 30 pixels. O que strong ponga la letra en negrita y en azul. Son solo dos ejemplos.

El primer navegador en soportar hojas de estilo fue el Explorer 3.0. Utiliza la llamada sintaxis en cascada. El Communicator acepta esa sintaxis e introduce una nueva basada en JavaScript. Sin embargo, como el estándar más comunmente aceptado de sintaxis de hojas de estilo es el de cascada, CSS, será este el único que veamos. Vamos a empezar con un ejemplo:

<style type="text/css"> P {color: green; margin-left: 30;} </style>

Vamos a detenernos en todos los elementos. Para empezar, la etiqueta html con la que deberemos englobar las hojas de estilo será <style>, que sólo podrá estar situada en la cabecera de la página. Su parámetro type indica la sintaxis que utilizaremos para definirlas. En el caso de las hojas en cascada deberá ser text/css.

Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la etiqueta que deseamos personalizar. Seguimos con el ejemplo del párrafo, el nombre de esta regla de estilo será p. Después, entre llaves, pondremos una lista de las propiedades que queremos modificar. En nuestro caso son dos, el color (en el formato habitual) y el margen, que se define en pixels.

Hay que destacar que, aunque muchas veces los navegadores tengan una cierta manga ancha, la sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia entre mayásculas y minúsculas. Conviene tener cuidado.

El html 4.0 permite declarar fuera de la página las hojas de estilo, llevando de este modo al extremo su filosofía de separar forma y contenido. Si colocamos nuestras hojas de estilo en un fichero llamado estilos.css (solo las hojas, no la etiqueta <style>) no tendremos más que incluir la siguiente línea en la cabecera de nuestro documento html para incluirlas en nuestras páginas:

<link rel="stylesheet" href="estilos.css" type="text/css">

Si en esas clases hubiera una definida como

p { color:green; margin-left: 30px }

Veríamos todos los párrafos de la página como este que vemos aquí:

Si la cosa va bien, este párrafo estará escrito en verde y con un margen izquierdo de 30 pixels. Precioso, ¿no? embargo, estoy convencido de que los más avispados se habrán dado cuenta de que les estoy ocultando algo. Por lo que he dicho hasta ahora la personalización de una etiqueta debería ser general y en esta página sólo este párrafo está modificado. No os preocupéis demasiado, ahora os cuento como se hace.

Desde 2011 el estandard de hojas de estilo es el CSS3 que permite un enorme control sobre el contenido, incluyendo animaciones y efectos que pueden sustituir el algunos casos al uso de scripts. Pues ver una introducción bastante detallada en nuestra introducción al CSS3 y tienes una sección donde practicar con ejercicios sobre CSS

Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también podemos hacerlo para una clase determinada. ¿Esto que significa? Pues que si, por ejemplo, definimos la hoja de estilo de la clase verde de la siguiente manera:

p.verde { color: green; margin-left: 30px; }

sólo estarán verdes y con un margen izquierdo de 30 pixels aquellos párrafos definidos con <p class="verde">.Así de sencillo.

Ampliando un poco más las posibilidades de las clases, se pueden realizar excepciones. Supongamos que tenemos unos párrafos que queremos que tengan unos márgenes determinados y color verde. Y deseamos que uno solo de esos párrafos, con los mismo márgenes, sea azul. Podríamos definir dos clases distintas, pero hay un método mejor: usar el parámetro id. Por ejemplo:
.verde { color: green; margin-left: 30px; } #ej1 { color: blue; }

Ahora cualquier elemento de la la página con el atributo clase sea verde (class="verde") serían, obviamente, verdes y con un margen de 30 pixels. Sin embargo el párrafo definido por

<p class="verde" id="ej1">

será azul:

Este párrafo es muy verde.

Y anda que este...

Sin embargo, este es azul pero con el mismo margen, fíjate que curioso.

Puede que, a veces, no queramos modificar el comportamiento de una etiqueta de HTML (todos los párrafos, o todas las imágenes, o todas las celdas de tabla..)sino que queremos un estilo que actúe sólo sobre un cierto una parte del texto. Casi como una etiqueta nueva y propia. Entonces, ¿qué hacemos? Utilizar las etiqueta <span> y <div>.

El método es simple. Definimos una clase rojo que simplemente modifique el color del texto (que será rojo). Ahora, si queremos que un texto esté en rojo lo encerraremos entre las etiquetas <span class="rojo"> y </span> o entre <div class="rojo"> y </div>.

La diferencia entre ambas es que, mientras span realmente no hace nada por sí misma, div convierte a todo lo que encierra en un bloque aparte (poniendo un salto de línea tanto al comienzo como al final).

Veremos en el siguiente capítulo que a las etiquetas que se comportan como bloques se les pueden definir atributos propios desde las hojas de estilo. Por ejemplo, si definimos las siguientes reglas:

all.titulo { margin-top: -24px; color: blue; font-size: 20px; } all.sombra { margin-top: 2px; margin-left: 2px; color: black; font-size: 20px; }

El prefijo all se refiere a todo el documento y realmente no se usa, pero sirve para explicar eso del punto: all.titulo significa los elementos de la página (all) que tienen una clase llamada titulo. Los atributos los explicaré en la referencia de las hojas de estilo. el uso de las clases (reglas de estilo) es sencillo:

<div align="center" class="sombra"> El maravilloso curso de html </div> <div align="center" class="titulo">
El maravilloso curso de html
</div>

obtendremos este típico efecto sombra:

En el siguiente capítulo tenéis una guía de referencia con todos (o casi todos) los atributos que se pueden modificar con CSS.