Cómo crear CSS

Cómo insertar una hoja de estilo

Cuando un navegador lee una hoja de estilo, la utiliza para formatear el documento HTML. Hay tres métodos para insertar una hoja de estilo:

Hoja de estilo externa

Cuando los estilos deben aplicarse a muchas páginas, las hojas de estilo externas son la opción ideal. En el caso de las hojas de estilo externas, puede cambiar el aspecto de todo el sitio cambiando un solo archivo. Cada página usa la etiqueta <link> para enlazar a la hoja de estilo.<link> se coloca en la cabecera del documento:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

El navegador leerá las declaraciones de estilo del archivo mystyle.css y las utilizará para formatear el documento.

Las hojas de estilo externas se pueden editar en cualquier editor de texto. El archivo no debe contener etiquetas html. Las hojas de estilo deben guardarse con la extensión .css. Aquí hay un ejemplo de un archivo de hoja de estilo:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

No deje espacios en blanco entre el valor del atributo y la unidad. Si usa "margin-left: 20 px" en lugar de "margin-left: 20px", solo funcionará en IE 6, pero no en Mozilla/Firefox o Netscape.

Hoja de estilo interna

Cuando un documento necesita estilos especiales, debe usar una hoja de estilo interna. Puede definir una hoja de estilo interna usando la etiqueta <style> en la cabecera del documento, como así:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Estilos en línea

Dado que mezcla la presentación y el contenido, los estilos en línea pierden muchas ventajas de las hojas de estilo. Use este método con precaución, por ejemplo, cuando el estilo solo se debe aplicar a un elemento una vez.

Para usar estilos en línea, debe usar la propiedad (style) dentro de las etiquetas relevantes. La propiedad Style puede contener cualquier atributo CSS. Este ejemplo muestra cómo cambiar el color del párrafo y el margen izquierdo externo:

<p> style="color: sienna; margin-left: 20px">
Este es un párrafo
</p>

Estilos múltiples

Si algunos atributos están definidos por el mismo selector en diferentes hojas de estilo, el valor del atributo se heredará del estilo más específico.

Por ejemplo, la hoja de estilo externa tiene tres propiedades para el selector h3:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

Mientras que la hoja de estilo interna tiene dos propiedades para el selector h3:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

Si esta página tiene una hoja de estilo interna y también se enlaza con una hoja de estilo externa, el estilo obtenido por h3 será:

color: red; 
text-align: right; 
font-size: 20pt;

El atributo de color se heredará del hoja de estilo externa, mientras que alineación de texto (text-alignment) y tamaño de fuente (font-size) serán reemplazados por las reglas de la hoja de estilo interna.