Cuando un Navegador Web lee una hoja de estilos, da formato al documento HTML de acuerdo a la información de la hoja de estilos.
Tres formas de insertar el CSS
Hay tres formas de insertar una hoja de estilos:
- Hoja de estilos externa.
- Hoja de estilos interna.
- Estilos en línea.
Hoja de estilos externa
Con una hoja de estilos externa, puedes cambiar la presentación entera de un sitio web cambiando solo un archivo.
Cada página debe incluir una referencia a la hoja de estilos externo dentro del elemento <link>. El elemento <link> va dentro de la sección del elemento <head>.
<head>
<link rel="stylesheet" type="text/css" href="/estilos.css">
<head>
Un hoja de estilos externa puede ser escrito en cualquier editor de texto. El archivo no debe contener ninguna etiqueta HTML. El archivo de hoja de estilo debe guardarse con la extensión de archivo .css.
A continuación un ejemplo de como debe lucir un archivo "estilos.css":
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
No agregar espacios entre el valor de propiedad y la unidad del mismo (como
margin-left:20 px;) la forma correcta es:margin-left:20px;
Hoja de estilos interna
Una hoja de estilos interna puede ser usada si una sola página tiene un único estilo. Los estilos internos son definidos dentro del elemento <style> del HTML y este a su vez dentro de la sección <head> también de la página HTML.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Estilos en línea
Un estilo en línea puede ser utilizado para aplicar un único estilo a un solo elemento. Para usar estilos en línea, agrega el atributo style al elemento HTML a aplicar. El atributo style puede contener varios atributos CSS.
En el siguiente ejemplo se muestra como cambiar el color y el margen izquierdo a un elemento <h1>:
<h1 style="color: blue; margin-left; 30px;">
Este es un encabezado.
</h1>
Con los estilos en línea se pierden las ventajas de una hoja de estilos (mezclando el contenido con la presentación). Así recomendamos utilizar este método con moderación.
Múltiples hojas de estilos
Si algunas propiedades son definidas para el mismo selector (elemento) en diferentes hojas de estilos, el valor de la ultima hoja de estilos leída será la que se tomará en cuenta para su uso.
Ejemplo:
Asumiendo que una hoja de estilos externa tiene el siguiente estilo para el elemento <h1>:
h1 {
color: navy;
}
y también, en una hoja de estilo interna también tiene el siguiente estilo para el elemento <h1>:
h1 {
color: orange;
}
Si la hoja de estilos interna es definida después del link para la hoja de estilos externa, el elemento <h1> será de color naranja:
<head>
<link rel="stylesheet" type="text/css" href="/estilos.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Sin embargo, si la hoja de estilos interna es definida antes del link para la hoja de estilos externa el elemento <h1> será de color navy:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="/estilos.css">
</head>
Orden de la Cascada
¿Cual estilo será utilizado cuando hay más de un estilo especificado para un elemento HTML?
En términos generales podemos decir que todos los estilos aplicarán en cascada en un nuevo "virtual" hoja de estilos para la siguientes reglas, donde el número uno tiene la más alta prioridad.
- Estilo en línea (dentro de un elemento HTML).
- Hojas de estilos Internas y Externas (depende del orden en la sección head).
- Predeterminada por el Navegador Web.
Así, un estilo en línea (dentro de un elemento HTML) tiene la más alta prioridad, lo cual significa que redefinirá un estilo definido en la sección de la etiqueta <head>, o definido en una hoja de estilos externa o el predeterminado del Navegador Web.