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>):
<LINK REL="stylesheet" TYPE="text/css" HREF="URL_Hoja.css">
Veamos un ejemplo:
<!-- Manual de CSS de WebEstilo.com -->
<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}
Redefinici�n de etiquetas