WebTaller - Aprender CSS - Aprender HTML - Separar HTML de CSS

Separar HTML de CSS

Por Lola Cárdenas.
rinconprog.metropoli2000.com

Como sabemos definir estilos globales, sería interesante tenerlos definidos en un archivo aparte, pues si queremos dotar a todas las páginas de los mismos estilos, no es tarea grata copiar y pegar la definición de los estilos en cada una de las páginas.

Afortunadamente, sí podemos definir los estilos en un fichero distinto al documento HTML, y después referenciarlo desde el propio documento HTML. Esto lo haremos con la siguiente etiqueta, dentro de la cabecera del documento (entre <HEAD> ... </HEAD>):

Veamos un ejemplo:

<HTML>
<HEAD>
<TITLE> Ejemplo con hoja de estilo externa </TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css">
</HEAD>
<BODY BGCOLOR=white>
<H2>Prueba de definición de estilos en una hoja de
estilo externa</H2>
Como puede verse, la apariencia de esta página queda
completamente definida por los estilos que hemos
especificado en el bloque STYLE en la cabecera del
documento. Los márgenes son más amplios de lo habitual,
la <B>negrita</B> tiene un tamaño y un color fijos, los
trozos de texto en teletipo como <TT>este fragmento</TT>
también tienen definida su fuente, tamaño y color,
y vamos a ver cómo quedan las tablas, para finalizar
el ejemplo: <P>
<CENTER>
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2>
<TR> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> </TR>
<TR> <TD>Celda (1,1)</TD> <TD>Celda (1,2)</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Si quisiéramos que otros documentos tuvieran el mismo estilo, sólo tendríamos que usar la etiqueta LINK para aplicarlos. Esa es la ventaja de las hojas de estilo externas.

ejemplo.css
/* Manual de CSS de WebEstilo.com */
/* Definición de estilos en un archivo aparte */

/* Estilo para el documento */
BODY {font-family:Verdana,sans-serif;font-size:x-small;
margin-left:0.25in; margin-right:0.25in}

/* Estilo para la cabecera de nivel 2 */
H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red}

/* Estilos para otras etiquetas */
B, TD {font-family:Verdana,sans-serif;font-size:x-small;
color:olive}
TH {font-family:Verdana,sans-serif;font-size:x-small;
color:white;background-color:#0080C0}
PRE, TT, CODE {font-family:Courier New,Courier;
font-size:9pt;color:maroon}

Usuarios que han visto este tema también han visto...

- Puertas deslizantes con CSS
- Enlaces que simulan botones en CSS
- Notas en imágenes utilizando CSS
- Sintaxis CSS
- Cómo quitar subrayado de los enlaces

- Versión imprimible de este documento

- Enviar por e-mail este documento