Unidad Didáctica 5
Las hojas de estilos
en cascada (CSS)
Contenido
1. Introducción
2. Crear una hoja de estilo
3. El panel Estilos CSS
4. Selectores CSS
U.D. 5 | Las hojas de estilos en cascada (CSS)
1. Introducción
CSS es el acrónimo de Cascading Style Sheets (es decir, hojas de estilo en
cascada). CSS es un lenguaje de estilo que define la presentación de los docu-
mentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores,
márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avan-
zado y muchos otros temas.
Es posible usar HTML o XHTML, o incluso abusar del mismo, para añadir
formato a los sitios web. Sin embargo, CSS ofrece más opciones y es más pre-
ciso y sofisticado. CSS está soportado por todos los navegadores hoy día.
XHTML se usa para estructurar el contenido; CSS se usa para formatear
el contenido previamente estructurado. El lenguaje XHTML sólo se usaba
para añadir estructura al texto. Los autores podían marcar sus textos dicien-
do «esto es un título» o «esto es un párrafo», usando las etiquetas XHTML
<h1> y <p>, respectivamente.
A medida que la Web fue ganando popularidad, los diseñadores empezaron
a buscar posibilidades para añadir formato a los documentos en línea. Para sa-
tisfacer esta reclamación, los fabricantes de los navegadores inventaron nuevas
etiquetas XHTML, entre las que se encontraban, por ejemplo, <font>, que se
diferenciaba de las etiquetas originales XHTML en que definían el formato y no
la estructura.
Esto también llevó a una situación en la que las etiquetas estructurales
originales, por ejemplo, <table>, se usaban cada vez más de manera incorrec-
ta para dar formato a las páginas en vez de para añadir estructura al texto.
Muchas nuevas etiquetas que añadían formato, por ejemplo, <blink>, sólo las
soportaban un tipo determinado de navegador. «Necesitas el navegador X para
visualizar esta página» se convirtió en una declaración de descargo común en
los sitios Web.
CSS se inventó para remediar esta situación, proporcionando a los dise-
ñadores Web con sofisticadas oportunidades de presentación soportadas por
todos los navegadores. Al mismo tiempo, la separación de la presentación de
| 85
Dreamweaver CS4
los documentos del contenido de los mismos, hace que el mantenimiento del
sitio sea mucho más fácil.
Muchas de las propiedades que se usan en las hojas de estilo en cascada
(CSS) son parecidas a las de XHTML. Así pues, si estás acostumbrado a usar
XHTML para cuestiones de presentación, lo más probable es que reconozca
gran parte del código usado. Examinemos un ejemplo concreto.
Supongamos que queremos un color rojo como fondo de nuestra página Web:
Usando HTML podríamos haberlo conseguido así:
<body bgcolor=»#FF0000»>
Con CSS el mismo resultado puede lograrse así:
body {background-color: #FF0000;}
Como verás, el código usado es más o menos idéntico para HTML y CSS. El
ejemplo anterior te muestra además el modelo CSS fundamental:
■ Selector: es la etiqueta HTML a la que se le aplica la propiedad, en este
ejemplo “body”.
■ Propiedad: la propiedad identifica lo que se quiere cambiar, en este caso
el color de fondo “background-color”.
■ Valor: indica al navegador la forma de cambiar la propiedad, es decir, el
valor que tomará la propiedad. En este caso #FF0000, que equivale al
color rojo.
La Propiedad y el Valor es lo que forman el Bloque de declaración y este
bloque puede contener múltiples declaraciones cada una de las cuales estará
formada por estas dos partes, seguido por un punto y coma.
CSS ofrece tres tipos de hojas de estilos para aplicar características a los
documentos, algunas más prácticas que otras. Es importante conocer la di-
ferencia entre ellas para poder decidir cuál es la que mejor se adapta a cada
proyecto Web.
86 |
U.D. 5 | Las hojas de estilos en cascada (CSS)
Los tipos son:
■ En línea: un modo de aplicar CSS a HTML es usando el atributo de HTML
style. Este estilo se usa para anular definiciones de estilo aplicadas por
una hoja de estilo externa o incrustada.
<html>
<head>
<title>Ejemplo</title>
</head>
<body style=”background-color: #FF0000;”>
<p>Esta es una página con fondo rojo</p>
</body>
</html>
■ Interno o Incrustada: aquí el código va escrito en la etiqueta <head> del
documento y sólo afecta a esa página.
<html>
<head>
<title>Ejemplo</title>
<style type=”text/css”>
<!-
body {background-color: #FF0000;}
->
</style>
</head>
<body>
<p>Esta es una página con fondo rojo</p>
</body>
</html>
■ Externas o enlazadas: el método recomendado es enlazar con lo que se
denomina hoja de estilo externa. Una hoja de estilo externa es sencilla-
mente un fichero de texto con la extensión .css. Como cualquier otro
fichero, puedes colocar la hoja de estilo en el servidor Web o en el disco
duro. El truco consiste en crear un vínculo desde el documento HTML
| 87
Dreamweaver CS4
con la hoja de estilo. Dicho vínculo se puede crear con una sencilla línea
de código HTML:
<link rel=»stylesheet» type=»text/css» href=”style/
style.css” />
Fíjese cómo la ruta a nuestra hoja de estilo aparece indicada por medio
del atributo href.
La línea de código debe insertarse en la sección de encabezado del códi-
go HTML, es decir, entre la etiqueta <head> y </head>. De esta manera:
<html>
<head>
<title>Mi documento</title>
<link rel=”stylesheet” type=”text/css” href=”style/
</head>
<body>
...
style. css” />
Este vínculo indica al navegador que debería usar la presentación del
fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este mé-
todo es que se pueden vincular varios documentos HTML con la misma
hoja de estilo. En otras palabras, se puede usar un único fichero CSS
para controlar la presentación de muchos documentos HTML.
Los cambios en la hoja de estilo externa
afectarán a todos los documentos HTML
style.css
Documentos HTML que enlazan con la misma hoja de estilo
88 |
U.D. 5 | Las hojas de estilos en cascada (CSS)
Esta técnica puede ahorrarle mucho trabajo. Si quisiera cambiar, por
ejemplo, el color de fondo de un sitio Web compuesto por 100 pági-
nas, una hoja de estilo puede ahorrarle el tener que cambiar de forma
manual los 100 documentos HTML. Con CSS, el cambio se puede
llevar a cabo en unos segundos modificando parte del código de la
hoja de estilo principal.
2. Crear una hoja de estilo
Hemos visto básicamente lo que es una hoja de estilo y el comportamiento
que tiene. Ahora veremos cómo hacer hojas de estilo con Dreamweaver. Como
puede imaginarse la manera de crear una hoja de estilo es variada como ocurre
con muchas de las opciones de Dreamweaver.
Vamos a ver cómo crear una hoja de estilos a través del inspector de pro-
piedades. Lo primero que haremos será abrir el cuadro de diálogo que usted ya
conoce Propiedades de la página. En este cuadro de diálogo vimos como confi-
gurar algunos aspectos de la página, si se fija en la lista de categorías aparecen
tres opciones con las siglas CSS.
| 89
Dreamweaver CS4
Al utilizar este cuadro de diálogo le estaremos diciendo a Dreamweaver que
cree una hoja de estilos incrustada y que aplique esos estilos a los distintos
elementos de la página. Ha de recordar que las hojas de estilos incrustadas
determinan las opciones de toda la página.
Desde la categoría Apariencia (CSS) podemos cambiar el aspecto general de
la página, podremos cambiar la fuente de la página, el tamaño, los colores y
márgenes, etc. De esta forma quedarán configuradas como las opciones prede-
terminadas de toda la página.
Una vez que haya terminado de especificar los atributos de Apariencia (CSS)
pasamos a los de Vínculos (CSS). En esta categoría podemos especificar una
fuente distinta para el texto, así como los colores de los vínculos.
90 |
U.D. 5 | Las hojas de estilos en cascada (CSS)
El Color de vínculo establece el color de todos los enlaces no visitados de
una página. Vínculos visitados establece el color de los enlaces ya visitados
anteriormente por el usuario. Vínculos de sustitución cambia el color del enlace
cuando el usuario sitúa el cursor sobre el enlace (o lo pasa por encima). Vín-
culos activos cambia el color de los enlaces cuando los usuarios hacen clic en
ellos (con el ratón ya liberado), por lo que es menos importante que el Color de
vínculo o los Vínculos visitados.
El estilo subrayado controla lo que pasa con la línea de subrayado de los
enlaces de una página cuando el visitante sitúa el cursor encima de ellos.
Una vez especificados los atributos y los vínculos, pasamos a los de los
Encabezados. Estas opciones configuran la fuente, el tamaño de fuente y el
color de todos los encabezados del documento. Los encabezados ayudan a
identificar y aislar las distintas áreas de texto de una página. Como resultado,
se pueden especificar fuentes y tamaños de fuentes diferentes pero comple-
mentarias a las establecidas para el cuerpo de texto en el panel Aspecto.
| 91
Dreamweaver CS4
Cuando lo tengamos todo configurado pulsaremos el botón Aceptar y cerra-
remos el cuadro de diálogo. Todas las opciones que se hayan establecido en el
cuadro de diálogo se habrán aplicado a la página.
De esta forma hemos conseguido crear una hoja de estilos CSS incrustada
mientras hemos ido cambiando las propiedades. Dreamweaver ha ido creando
el código automáticamente dentro de la etiqueta <head> del documento.
La única pega que tiene al crear esta hoja
de estilos, es que sólo sirve para esta página, de
modo que si su página Web va a tener varias pá-
ginas y todas con el mismo estilo, debemos crear
una hoja de estilo externa. Veamos cómo pode-
mos convertir la página incrustada en externa.
En primer lugar tenemos que abrir el panel
Estilos CSS. Seleccionamos la ficha Todo y abri-
mos la lista <style>.
Crear cuenta
Comentarios de: Unidad Didáctica 5 Las hojas de estilos en cascada (CSS) (0)
No hay comentarios