Se puede aplicar una hoja de estilo CSS externa a cualquier número de documentos HTML colocando un elemento <link> en cada Documento HTML.
El atributo rel de la etiqueta <link> debe establecerse en "stylesheet" y el atributo href en relativo o absoluto en la ruta donde esta ubicada la hoja de estilo. Si bien el uso de rutas URL relativas generalmente se considera una buena práctica, las rutas absolutas pueden ser usadas también.
En HTML5, el atributo type puede omitirse.
Se recomienda que la etiqueta <link> se coloque en la etiqueta <head> del archivo HTML para que los estilos se carguen antes los elementos que modifican, de lo contrario, los usuarios verán un destello de contenido sin estilo.
hello-world.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> CSS</p>
</body>
</html>
style.css
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
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 su CSS. Hay una razón muy simple para esto: cuando administra un sitio de, digamos, 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 todas 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 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:
p.green { color: #00FF00; }
Todos sus párrafos con la clase 'green' 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 sus párrafos con la clase 'green' se escribirán en verde oscuro en lugar de verde claro.
Se aplican otros principios, como la regla "!important", 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 volver a descargarlo. Como los navegadores almacenan en caché la hoja de estilo externa, sus páginas se cargan más rápido.