Colocando las hojas de estilo
Dentro del documento HTML
Cuando hacemos una definción en grupo de una hoja de estilos utilizando la etiqueta <STYLE> esta tiene que estar colocada en la cabecera del documento HTML es decir dentro de la etiqueta <HEAD>.
<HTML>
<HEAD>
<TITLE>Esta es mi primera hoja de estilos</TITLE>
<STYLE TYPE="text/css">
<!-
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Texto Azul</H1>
<P>Fuente de tamaño 10 ptos. y margen izquierdo 20</P>
</BODY>
</HTML>
En un fichero .CSS
Pero también podemos definirlas en un fichero externo y luego referenciarlas desde el código HTML. Esta es sin duda alguna una de sus mayores virtudes, ya que nos permite crear una misma hoja de estilos para toda la Web que luego llamamos desde cada una de las páginas. De esta manera, cambiando el fichero que contiene la hoja de estilos podemos cambiar el aspecto de toda la web.
Existen dos maneras de enlazar las hojas de estilo.
Haciendo uso de la etiqueta <LINK>
<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="hoja_estilos.css">
</HEAD>
......
</HTML>
O utilizando la etiqueta @IMPORT
<HTML>
<HEAD>
<STYLE TYPE="text/css">
@IMPORT URL("hoja_estilo.css")
</STYLE>
</HEAD>
......
</HTML>
El fichero hoja_estilos.css es un simple fichero de texto con extensión .css en el que definimos la hoja de estilo en función de la sintaxis que hemos descrito anteriormente.
/*Fichero hoja_estilos.css*/
<!-
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
/*Fin del fichero hoja_estilo.css*/
Tutoriales
