Cuando un navegador lee una hoja de estilo, se dará formato al documento HTML de acuerdo con la información contenida en la hoja de estilo.
Tres formas de insertar CSS
Hay tres maneras de insertar una hoja de estilo:
Hoja de estilos externa
Con una hoja de estilos externa, puede cambiar el aspecto de un sitio web completo cambiando un archivo!
Cada página debe incluir una referencia al archivo de hoja de estilos externa dentro de la <link> elemento. La <link> elemento va dentro del <head> sección:
Ejemplo
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head> Inténtalo tú mismo " Una hoja de estilo externa puede estar escrito en cualquier editor de texto. El archivo no debe contener ninguna etiqueta HTML. El archivo de hoja de estilo debe ser guardado con un .css extensión.
Así es como el "myStyle.css" se ve:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | No agregue un espacio entre el valor de la propiedad y la unidad (como margin-left:20 px; ). La forma correcta es: margin-left:20px; |
|---|
Hoja de estilo interna
Una hoja de estilo interna puede ser usado si una sola página tiene un estilo único.
Estilos internos se definen dentro de la <style> elemento, dentro de la <head> sección de una página HTML:
Ejemplo
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> Inténtalo tú mismo " estilos en línea
Un estilo en línea se puede utilizar para aplicar un estilo único para un solo elemento.
Para utilizar los estilos en línea, añadir el atributo de estilo al elemento relevante. El atributo de estilo puede contener cualquier propiedad CSS.
El siguiente ejemplo muestra cómo cambiar el color y el margen izquierdo de un <h1> elemento:
| Un estilo en línea pierde muchas de las ventajas de una hoja de estilo (mediante la mezcla de contenido con la presentación). Utilizar este método con moderación! |
|---|
Hojas de estilo en múltiples
Si algunas propiedades se han definido para el mismo selector (elemento) en diferentes hojas de estilo, se utilizará el valor de la última hoja de estilos de lectura.
Ejemplo
Supongamos que una hoja de estilos externa tiene el siguiente estilo para el <h1> elemento:
h1
{
color: navy;
}entonces, suponer que una hoja de estilo interna también tiene el siguiente estilo para el <h1> elemento:
h1
{
color: orange;
}Si el estilo interno se define después de que el enlace a la hoja de estilos externa, los <h1> elementos serán "orange" :
Ejemplo
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Inténtalo tú mismo " Sin embargo, si el estilo interno se define antes de que el enlace a la hoja de estilos externa, los <h1> elementos serán "navy" :
Ejemplo
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Inténtalo tú mismo " Orden de conexión en cascada
Qué estilo se utilizará cuando no se especifica más de un estilo de un elemento HTML?
En términos generales se puede decir que todos los estilos voluntad "en cascada" en una nueva hoja de estilos "virtual" por las reglas siguientes, en los que el número uno tiene la más alta prioridad:
- estilo en línea (dentro de un elemento HTML)
- hojas de estilo externas e internas (en la sección de cabecera)
- por defecto del navegador
Por lo tanto, un estilo en línea (dentro de un elemento HTML específica) tiene la prioridad más alta, lo que significa que va a anular un estilo definido dentro de la <head> etiqueta, o en una hoja de estilos externa, o bien un valor por defecto del navegador.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»