CSS Hoja de estilo externa


Ejemplo

Una hoja de estilo CSS externa se puede aplicar a cualquier número de documentos HTML colocando un elemento <link> en cada documento HTML.

El atributo rel de la etiqueta <link> se debe establecer en "stylesheet" , y el atributo href en la ruta relativa o absoluta de la hoja de estilo. Si bien el uso de rutas de URL relativas generalmente se considera una buena práctica, también se pueden usar rutas absolutas. En HTML5 se puede omitir el atributo de type .

Se recomienda que la etiqueta <link> se coloque en la etiqueta <head> del archivo HTML para que los estilos se carguen antes de los elementos que diseñan. De lo contrario, los usuarios verán un destello de contenido sin estilo .

Ejemplo

hola-mundo.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>I ♥ CSS</p>
    </body>
</html>

style.css

h1 {
    color: green;
    text-decoration: underline;
}
p {
    font-size: 25px;
    font-family: 'Trebuchet MS', sans-serif;
}

Asegúrese de incluir la ruta correcta a su archivo CSS en el href. Si el archivo CSS está en la misma carpeta que su archivo HTML, entonces no se requiere una ruta (como en el ejemplo anterior), pero si está guardado en una carpeta, especifíquelo así href="foldername/style.css" .

<link rel="stylesheet" type="text/css" href="foldername/style.css">

Las hojas de estilo externas se consideran la mejor manera de manejar tu CSS. Hay una razón muy simple para esto: cuando administra un sitio de, por ejemplo, 100 páginas, todo controlado por una sola hoja de estilo, y desea cambiar los colores de sus enlaces de azul a verde, es mucho más fácil hacer el cambio. en su archivo CSS y deje que los cambios "caigan en cascada" en las 100 páginas de lo que es ir a 100 páginas separadas y hacer el mismo cambio 100 veces. Nuevamente, si desea cambiar completamente el aspecto de su sitio web, solo necesita actualizar este archivo.

Puede cargar tantos archivos CSS en su página HTML como sea necesario.

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">

Las reglas de CSS se aplican con algunas reglas básicas, y el orden sí importa. Por ejemplo, si tiene un archivo main.css con algún código en él:

p.green { color: #00FF00; }

Todos los párrafos con la clase 'verde' se escribirán en verde claro, pero puede anular esto con otro archivo .css simplemente incluyéndolo después de main.css. Puede tener override.css con el siguiente código, siga main.css, por ejemplo:

p.green { color: #006600; }

Ahora todos los párrafos con la clase "verde" se escribirán en verde más oscuro en lugar de verde claro.

Se aplican otros principios, como la regla '! Importante', la especificidad y la herencia.

Cuando alguien visita su sitio web por primera vez, su navegador descarga el HTML de la página actual más el archivo CSS vinculado. Luego, cuando navegan a otra página, su navegador solo necesita descargar el HTML de esa página; El archivo CSS se almacena en caché, por lo que no es necesario descargarlo nuevamente. Como los navegadores almacenan en caché la hoja de estilo externa, sus páginas se cargan más rápido.