¿Cómo se usan los estilos?

¿Dónde se ubican los estilos?

Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la misma.

Hay 3 formas de insertar una hoja de estilos:

1. Entre líneas

Definimos el estilo directamente dentro del codigo HTML.
Debemos usar esta forma cuando un único estilo es aplicado a un solo elemento.
Su uso está dado por el atributo style.

Código

<p style="color:red; margin-left:30px">

Este párrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.

</p>

Resultado

Este párrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.

2. Hojas de estilo interna

Las hojas de estilo interna deben usarse cuando una página tiene un estilo único.
Las definimos con la etiqueta <style> en la cabecera del documento entre las etiquetas <head> y </head>

Código

<head>
<style type="text/css">
body {background-color:#008080}
p {color:white}
</style>
</head>

<body>
<p>
Este texto es de color blanco y el color de fondo de la pagina es #008080.
</p>
</body>

Resultado

Este texto es de color blanco y el color de fondo de la pagina es #008080.

En este ejemplo se muestra que la etiqueta <style> con su atributo type define una hoja de estilo.

Entre las etiquetas style definimos al selector body con un color de fondo azul y al selector p de color blanco.

3. Hojas de estilo externas

Esta es la forma ideal para cuando una misma hoja de estilos es aplicada a varias páginas.
Con realizar los cambios en un solo archivo, podemos cambiar el aspecto de todo el sitio web.
Las hojas de estilo deben llevar la terminación .css.
Así se vería por ejemplo, un archivo CSS externo que llamaremos "fuentes.css":

p
{
font-family:Arial;
font-size:12px;
font-weight:normal;
}

Nota: el código, en los archivos de hojas de estilos externos, comienzan directamente con el selector.

Cada página del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento.