Cuando un navegador lee una hoja de estilo, formateará el documento HTML de acuerdo con la información de la hoja de estilo.
Tres formas de usar CSS
Hay tres formas de usar una hoja de estilos.
CSS externo
CSS interno
CSS en línea
CSS Externo
Con una hoja de estilo externa, puedes cambiar la apariencia de un sitio web completo cambiando solo un archivo.
Cada página HTML debe incluir una referencia al archivo de hoja de estilo externo dentro del elemento <link>, dentro de la sección <head>.
Ejemplo:
Los estilos externos se definen dentro del elemento <link>, dentro de la sección <head> de una página HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
</body>
</html>
Una hoja de estilo externa se puede escribir en cualquier editor de texto y debe guardarse con una extensión .css
El archivo .css externo no debe contener ninguna etiqueta HTML.
Así es como se ve el archivo "mystyle.css":
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Nota: no agregues un espacio entre el valor de la propiedad y la unidad. Incorrecto (con espacio):
margin-left: 20 px;Correcto (sin espacio):margin-left: 20px;
CSS Interno
Se puede usar una hoja de estilo interna si una sola página HTML tiene un estilo único.
El estilo interno se define dentro del elemento <style>, dentro de la sección <head>.
Ejemplo:
Los estilos internos se definen dentro del elemento <style>, dentro de la sección <head> de una página HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
</body>
</html>
CSS en línea
Se puede usar un estilo en línea para aplicar un estilo único a un solo elemento.
Para usar estilos en línea, agregue el atributo style al elemento. El atributo style puede contener cualquier propiedad CSS.
Ejemplo:
Los estilos en línea se definen dentro del atributo style del elemento:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Tip: un estilo en línea pierde muchas de las ventajas de una hoja de estilo (al mezclar contenido con presentación). Utilice este método con moderación.
Múltiples hojas de estilo
Si se han definido algunas propiedades para el mismo selector (elemento) en diferentes hojas de estilo, se utilizará el valor de la última hoja de estilo.
Suponga que una hoja de estilo externa tiene el siguiente estilo para el elemento <h1>:
h1 {
color: navy;
}
Luego, suponga que una hoja de estilo interna también tiene el siguiente estilo para el elemento <h1>:
h1 {
color: orange;
}
Ejemplo:
Si el estilo interno se define después del enlace a la hoja de estilo externa, los elementos <h1> serán de color orange:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Sin embargo, si el estilo interno se define antes del enlace a la hoja de estilo externa, los elementos <h1> serán de color navy:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Orden en cascada
¿Qué estilo se utilizará cuando haya más de un estilo especificado para un elemento HTML?
Todos los estilos en una página "caerán en cascada" en una nueva hoja de estilo "virtual" según las siguientes reglas, donde el número uno tiene la prioridad más alta:
Estilo en línea (dentro de un elemento HTML)
Hojas de estilo externas e internas (en la sección de cabecera)
Predeterminado del navegador
Por lo tanto, un estilo en línea tiene la prioridad más alta y anulará los estilos externos e internos y los valores predeterminados del navegador.
Resumen
El documento explica cómo usar CSS en tres formas: externa, interna y en línea. También se cubren múltiples hojas de estilo, el orden en cascada y la prioridad de los estilos. Se proporcionan ejemplos y se recomienda usar estilos en línea con moderación.
Traducido con 💚 desde W3Schools.com