NDICE

I.
II.

HOJAS DE ESTILO EN CASCADA

(3)
CLASES E IDENTIFICADORES .
(4)
II.1. CLASES DEPENDIENTES ..
(5)
II.2. IDENTIFICADORES
....
(5)
II.3. IDENTIFICADORES DEPENDIENTES..
(6)
II.4. COMBINACIN DE CLASS E ID ...
(6)

III.

MS SELECTORES .(7)
III.1. SELECTOR UNIVERSAL (7)
III.2. AGRUPACIN DE SELECTORES (7)

IV.
V.

SUCESORES Y ANTECESORES .(8)

PSEUDOCLASES .
(8)
INSERCIN DE LAS REGLAS CSS EN UNA PGINA WEB ..
(10)
VI.1. AADIR ESTILOS EXTERIORES
(11)
VI.2. ENLAZAR UN ARCHIVO .CSS ....(12)
MLTIPLES HOJAS DE ESTILO .(12)

VI.

VII.

INTRODUCCIN
Atrs quedaron los aos en que disear una pgina web consista en juntar en
un caldero todo tipo de etiquetas, mezclando el diseo de estructura con el
formato. En la actualidad ambas partes estn muy separadas.
En la actualidad ya no basta con manejar HTML para realizar estas tareas;
necesitamos conocer tambin el estndar que lo complementa, CSS, acrnimo
de hojas de estilo en cascada.
La norma CSS nos facilita un conjunto de elementos que podremos aplicar a
nuestras etiquetas HTML para proporcionarles la apariencia deseada.
Encontraremos modificadores para aplicar todo tipo de variaciones, las mismas
que podramos obtener si llevamos un documento a un procesador de texto, e
incluso muchas de las cosas que podramos hacer con un programa de edicin
de imgenes.
Si a lo mencionado anteriormente le sumamos algunas acciones creadas con
JavaScript, conseguiremos aportar interactividad a la pgina web, creando as
verdaderas aplicaciones que se ejecutan sin necesidad de instalar nada en el
ordenador.

I.

HOJAS DE ESTILO EN CASCADA

Las hojas de estilo en cascada o css 1 son el nombre de un conjunto de

normas que permiten especificar y controlar de una forma muy cmoda y
racional el aspecto del texto en los documentos HTML. Aunque constituyen
una recomendacin del W3Consortium 2 que data de 1996, slo en los ltimos
dos aos se han empezado a utilizar de forma ms o menos general. A pesar
de ello aun distan de ser populares, pese a su enorme potencial y su gran
sencillez de uso.
Los navegadores como Explorer, Netscape u Opera incorporan desde hace
algunos aos no solamente un intrprete de HTML, sino de otros lenguajes que
tambin forman parte del ncleo central de normas del www. Entre ellos se
encuentra el lenguaje de las css.
Una regla CSS se puede aplicar mediante el uso del parmetro style. Por
ejemplo, la lnea:
<h1 style="{color:blue}">Bienvenidos < /h1>
Mostrar un ttulo de color azul.
Ese mtodo funciona correctamente, pero es difcil de mantener. En un
documento con 50 ttulos tendramos que aplicar el formato a cada uno de
ellos. Y si despus nos cansamos y los queremos poner todos verdes?
Tendramos que modificarlos todos. Por este motivo, las hojas de estilo se
suelen aplicar de otra manera: como elementos dentro de la cabecera de la
pgina web y mejor an, en archivos externos. As se recopilan todas las reglas
en un mismo espacio, haciendo que sea ms sencillo su mantenimiento y
modificacin.

II.

CLASES E IDENTIFICADORES

1 Por Cascading Style Sheets

2 Organismo internacional que publica las normas sobre la web.

Pensemos ahora en una pgina en la que queremos cambiar la apariencia de

algunos <h1>, pero no de todos. Cmo lo conseguiramos? Para ello tenemos
un parmetro general de HTML denominado class ("clase" en espaol, en el
sentido de "tipo"). Este parmetro nos sirve para crear un conjunto de etiquetas
que forman parte del mismo grupo. El objetivo es que luego podremos
referirnos a esa clase de forma conjunta.
En este ejemplo tenemos tres ttulos diferentes:
<h1>Bienvenidos</h1>
<h1 class="capitulos">Captulo 1</h1>
<h1 class="capitulos">Captulo 2</h2>
Dos de ellos los hemos agrupado dentro de una clase llamada "captulos".
Gracias a ello podemos modificar slo su apariencia, diferencindolos del resto
de los ttulos del documento. Para referirnos a la clase, emplearamos el signo
de punto (.).
.capitulos { font-family: sans-serif; text-decoration: underline;}
Al probarlo en un navegador, obtendramos el resultado de la figura.

Es decir, ahora tenemos dos tipos de ttulos: mientras que todos ellos sern de
color azul, slo los que forman parte de la selecta clase "captulos" tendrn un
tipo de letra concreto y estarn subrayados. Por tanto, podemos aplicar normas
para todos los ttulos o slo para los de los grupos que generemos.

II.1. CLASES DEPENDIENTES

Las reglas que definimos para una clase pueden ser aplicadas exclusivamente
a una etiqueta. As podramos tener un par de reglas como stas:

h1.capitulos { font-family: sans-serif; text-decoration: underline; font-size:14px}

p.capitulos { font-family: sans-serif; text-decoration: underline;}
De este modo podemos reutilizar el nombre de la clase y definir distintos
valores, dependiendo de si se aplica a una cabecera o a un prrafo, en nuestro
ejemplo.

II.2. IDENTIFICADORES
Adems de las clases, podemos diferenciar un nico elemento entre todos los
dems de una pgina mediante el parmetro id (abreviatura de "identificador").
Con id asignaremos un nombre nico que luego podemos emplear en nuestra
seccin de estilos, precedindolo en este caso del signo #.
Continuando con el ejemplo anterior, supongamos que tenemos un identificador
como ste:
<h1 id="anexos">Anexos especiales</h1>
Podramos modificar exclusivamente ese anexo mediante la siguiente regla:
#anexos { font-size: 18px; text-align: center; }
El resultado se muestra en la figura.

La clave del id es que estamos creando un grupo especfico slo con un

elemento. Este modificador tiene otras muchas utilidades, ya que al designar
un elemento de forma nica dentro de la pgina web, podremos operar con l
mediante JavaScript.
El sentido de utilizar identificadores, al trabajar con estilos, es mayor cuando
pensamos en las hojas externas. Podemos tener un elemento con un
identificador que se repite a lo largo de varias pginas. Si nuestros estilos estn
guardados en un archivo externo, podremos modificar todos esos
identificadores con facilidad.

II.3. IDENTIFICADORES DEPENDIENTES

Como sucede con las clases, un identificador puede estar definido de forma
general o especficamente para una etiqueta concreta. Es distinto esto:
#anexos { font-size: 18px; text-align: center; }
que esto:
div#anexos { font-size: 18px; text-align: center; }
El segundo slo se aplicara a un elemento que se llamase as:
<div id="anexos">
pero no a uno denominado
<h1 id="anexos">

II.4. COMBINACIN DE CLASS E ID

Se pueden combinar los parmetros class e id en un mismo elemento, con lo
que conseguiremos que se le apliquen tanto las reglas definidas para la clase
como para el identificador.
Este ejemplo:
<h1 class="capitulos" id="anexos">Bienvenidos</h1>
Da como resultado una mezcla de todas las reglas que hemos aplicado hasta
ahora, tanto las del elemento <h1>, como las de la clase y las del identificador.
Observa la figura:

III.

MS SELECTORES

Hay otros mtodos para definir reglas que se aplicarn a diferentes grupos de
etiquetas.

III.1. SELECTOR UNIVERSAL

El signo * se emplea para definir a todo el conjunto de etiquetas de una pgina
web. Nos sirve para indicar "esto se aplica a cualquier etiqueta". Por ejemplo:
* {font-family:san-serif; }
Hace que cualquier etiqueta de la pgina tome ese tipo de letra.

III.2. AGRUPACIN DE SELECTORES

Tambin podemos emplear la coma para agrupar varias etiquetas, clases e
identificadores. Un par de ejemplos:
p, h1, h2 {font-family: times, word-spacing: 2px;}
img, #portada, hr, .fotografia {margin: 6px;}

IV.

SUCESORES Y ANTECESORES

Todava obtenemos mayor control, gracias a las opciones que nos ofrece CSS
para aplicar estilos, si un elemento desciende de otro o es el padre de uno. No
entraremos en demasiados detalles, pero observemos la siguiente regla:
h2 strong {font-style: italic; }
Esa lnea hara que se mostrase en cursiva el contenido etiquetado dentro de
<strong>, pero si y slo si esta etiqueta se encuentra dentro de una cabecera
<h2>. No es necesario que lo sea directamente; puede haber otras etiquetas
conteniendo la de <strong>.
Por ejemplo:
<h1>Esta lnea no se vera <strong>afectada</strong></h1>
<h2>Esta lnea <strong>s</strong> se vera <strong>afectada</strong></h2>
El ejemplo anterior se mostrara como en la figura:

El espacio, por tanto, indica que la aplicacin se har dependiendo de si un

elemento est dentro de otro.
Adems hay otros operadores que definen el tipo de relacin, como el *, el
signo de > (que indica que un elemento desciende directamente de otro), el de
+ o el signo ~.

V.

PSEUDOCLASES

Contamos con un ltimo tipo de selectores denominado pseudoclases que

permiten definir propiedades para algunos elementos HTML que cuentan con
diferentes estados. El ms conocido es el caso de la etiqueta <a>, empleada
para definir enlaces. Esta etiqueta puede tener varios estados. Estos son los
principales:
a:link: el estado normal de un enlace no visitado.
a:visited: el estado de un enlace, una vez que ha sido visitado.
a:active: cuando se est pulsando sobre el elemento.
a:hover: cuando el ratn est sobre el elemento.
a:focus: cuando el elemento tiene el foco del navegador. Es el que est
preseleccionado.
Pues bien, si definimos algunos de esos estados, conseguiremos, por ejemplo,
que un enlace cambie su apariencia al pasar el ratn sobre l (a:hover) o que
cambie de color cuando ha sido visitado (a:visited). Podramos hacerlo as:
a:link {font-family: sans-serif; }
a:hover {color:red; }
a:visited {color:gray; }

La figura muestra el enlace tras ser visitado:

An hay muchas ms pseudoclases, centradas en aspectos posicionales,

dependientes de si un elemento es el primero de su tipo (:first-of-type, :last-oftype), si es el nico descendiente (:only-child), si est vaco (:empty), etc.
Incluso tenemos una pseudoclase para no aplicar estilo a un elemento concreto
(:not).
Veamos un ejemplo de uso con la lista siguiente:
<ul>
<li>Nombre y cantidad</li>
<li>Pepe. 5 </li>
<li>Mara. 8 </li>
<li>Manuel. 3</li>
<li>Total. 16</li>
</ul>
Le aplicaremos los estilos siguientes:
li:first-child {font-size:22px; color:#333399; list-style-type: none }
li:last-of-type {font-size:16px; color:#333399 ; font-weight:bolder; }
En este caso no haba diferencia entre emplear child o of-type. El resultado que
obtenemos es el de la figura:

VI. INSERCIN DE LAS REGLAS CSS EN UNA PGINA

WEB
Ya sabemos que podemos insertar las reglas directamente dentro de un
elemento de la pgina web mediante el parmetro style, pero como
inconveniente obtenemos un mtodo poco claro y que resulta difcil de
mantener. Por tanto, siempre optaremos por separar los estilos del contenido
de la pgina.
As, los estilos los situaremos en la cabecera de la pgina, rodeados de una
etiqueta HTML denominada <style> con su correspondiente </style>. El
ejemplo anterior quedara integrado en nuestra pgina de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 { color: blue;}
.capitulos { font-family: sans-serif; text-decoration: underline; }
#anexos { font-size: 18px; text-align: center; }
</style>
</head>
<body>

Contenido de la pgina
</body>
</html>
Este mtodo es fcil y su mantenimiento es simple. Si tenemos que realizar
cualquier modificacin, slo tenemos que acudir a la cabecera de la pgina y
modificar all los estilos correspondientes, para que automticamente toda la
pgina cambie su apariencia.

VI.1. AADIR ESTILOS EXTERIORES

An hay un mtodo ms para aplicar estilos, consistente en almacenar los
estilos fuera de la pgina web. Pensemos en un sitio web con 20 pginas a las
que le vamos a dar una apariencia comn. Para usar los estilos en la cabecera
de la pgina, tendramos que copiar el conjunto de reglas y pegarlo en cada
una de las pginas. Sera viable, pero cada vez que fusemos a modificar
algn detalle de los estilos, tendramos que abrir las 20 pginas y aplicar los
cambios. Esto es poco racional.
Para trabajar cmodamente con estilos en sitios grandes, el mtodo ideal se
basa en crear un archivo con extensin .css, dentro del que meteremos todos
los estilos de nuestro sitio web.
En concreto, un archivo de estilos tendra una apariencia similar al de la figura.

VI.2. ENLAZAR UN ARCHIVO .CSS

Para que el archivo con los estilos tenga efecto en la pgina, debemos indicar
en la cabecera del archivo .html que se va a tomar ese estilo, mediante la
etiqueta <link>, as:
<link rel="stylesheet" href="misestilos.css" type="text/css" media="all">
Cada parmetro tiene su propio significado:
rel: indica la relacin entre el documento y el archivo que se carga; en este
caso ser su hoja de estilos.
href: como en los enlaces normales, indica la URL del archivo. Al encontrarse
en la misma carpeta, slo indicaremos el nombre; pero si estuviese en otro
lugar o incluso en otro servidor, crearamos las rutas siguiendo las normas de
los enlaces.
type: indica el tipo de informacin. Tanto este valor como el de rel, sern
siempre iguales.
media: especifica a qu medio se aplicar la hoja de estilo. En este caso se
aplica a todos los medios, pero podramos tener hojas de estilo diferentes para
impresin (print), mviles (handheld), televisiones (tv), etc.
Entonces podramos decir que esa lnea ser la que repetiremos a travs de
nuestras diferentes pginas, para que tomen la apariencia deseada.

VII. MLTIPLES HOJAS DE ESTILO

Un detalle a tener en cuenta es que una misma pgina web puede emplear
varias hojas de estilo diferentes. De hecho es una prctica muy frecuente para
separar, por ejemplo, los aspectos relativos a maquetacin de los puramente
grficos.
Cuando llegue el momento de preparar la pgina web, el navegador juntar
todos los estilos y los ordenar, para aplicarlos correctamente.
Al crear estilos en diferentes lugares, nos surge una duda, qu sucede si
definimos un estilo para un prrafo en una pgina externa, en la propia
cabecera de la pgina y como un estilo interno mediante <style>? Cul se
aplicar?
Las hojas de estilo se denominan "en cascada" precisamente por la forma que
tienen de definir su prioridad. Cuando un mismo estilo est definido en varios
lugares, se sigue un orden de preferencia muy claro:
Primero se aplican los estilos de las hojas externas.
Si en la cabecera de la pgina se repite alguna propiedad de un estilo, se
aplica el de la cabecera, obviando la misma propiedad que estuviese definida
en la hoja externa.

Si en un elemento concreto se ha definido una propiedad especfica, se aplica

esta ltima, saltndose las anteriores.
Es decir, se va de mayor a menor, aplicando cada propiedad. Insistimos en lo
de la propiedad, ya que podemos encontrarnos con que en la hoja exterior se
define el tipo de letra de los prrafos y en el documento interior se define el
tamao. En ese caso se aplicaran las dos propiedades, ya que no hay colisin
entre ellas.
El uso del modificador !important en una determinada regla hace que sta se
salte la cadena de prioridades y que se aplique de forma prioritaria. Se emplea
as:
p {margin: 6px !important; }
Su uso se suele hacer ms en la fase de diseo de la pgina web que una vez
terminada, ya que pocas veces se justifica el saltarse el orden predefinido de
los estilos.
Antes de comenzar a aplicar estilos a un documento, crearemos el espacio
necesario para acoger las reglas. Como venimos explicando, lo ms apropiado
es contar con una hoja de estilos externa.

CONCLUSIONES
A lo largo de esta monografa hemos revisado los conceptos tericos
fundamentales para emplear las hojas de estilo y comenzar a disear nuestras
propias reglas.
Por eso a modo de conclusiones se presentar un pequeo resumen prctico:
Contamos con tres formas fundamentales para definir la apariencia de un
elemento de una pgina web:
-

Redefinir la etiqueta de forma genrica, con lo que cambiaramos todas

las apariciones de esa etiqueta en la pgina (indicando simplemente el
nombre de la etiqueta).
Modificar una clase: precediendo el nombre de la clase del signo ".",
cambiaremos todas las apariciones de los elementos que pertenezcan a
esa clase.
Modificar un identificador especfico, que se identifica mediante el signo
"#". En este caso, slo se aplicar el estilo al elemento que pertenezca a
ese identificador.

Junto a estos tres mtodos contamos con diferentes combinaciones y

alternativas. stas son las ms empleadas:
-

Podemos mezclar clases e identificadores.

Podemos modificar slo las clases e identificadores de una etiqueta
especfica.
Podemos hacer que slo se modifiquen aquellas clases o identificadores
que desciendan de un elemento concreto.
Podemos modificar algunos estados especficos de una etiqueta o los
elementos que estn en una determinada posicin.

Para terminar, las reglas que definimos se pueden establecer en tres lugares
diferentes, ordenados de menor prioridad a mayor:
-

En un archivo externo, enlazado con la pgina con la etiqueta <link>.

En la cabecera de la pgina (mediante la etiqueta <style>).
En un elemento concreto de la pgina (con el parmetro style).

De los tres, el primer mtodo es el ms aconsejable.