CONTEXTO: no sólo se puede agregar los estilos con la etiqueta <style> sino también importar todos los estilos de CSS de un archivo externo al HTML.
En este tutorial, aprenderemos a agregar estilos de múltiples archivos CSS a un documento HTML. Esto nos permitirá organizar nuestro código CSS de manera más eficiente y nos dará más flexibilidad para controlar el aspecto de nuestra página web.
Para agregar estilos de múltiples archivos CSS a un documento HTML, utilizaremos la etiqueta link con los atributos rel y href. El atributo rel debe establecerse en stylesheet, y el atributo href debe especificar la ruta del archivo CSS que queremos importar.
Si los archivos CSS están en la misma carpeta que el archivo HTML, podemos utilizar una ruta relativa. Por ejemplo, para importar el archivo style1.css, podríamos utilizar el siguiente código:
<linkrel="stylesheet"href="style1.css">Si los archivos CSS están en carpetas diferentes, debemos utilizar una ruta absoluta. Por ejemplo, para importar el archivo style1.css, que está en la carpeta css, podríamos utilizar el siguiente código:
<linkrel="stylesheet"href="/css/style1.css">El siguiente ejemplo muestra cómo agregar estilos de múltiples archivos CSS a un documento HTML:
CODIGO DE ‘tutorial.html’:
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</<span class="hljs-name">title>
<linkrel="stylesheet"href="./style1.css"><linkrel="stylesheet"href="./style2.css"></<span class="hljs-name">head>
<body><divclass="container-1">Estudiante</<span class="hljs-name">div><divclass="container-2">de Platzi</<span class="hljs-name">div></<span class="hljs-name">body>
</<span class="hljs-name">html>
CODIGO DE ‘style1.css’:
.container-1{
color: blue;
}
CODIGO DE ‘style2.css’:
.container-2{
color: red;
}
Cuando cargamos este código en un navegador, veremos que el texto “Estudiante” se colorea de azul y el texto “de Platzi” se colorea de rojo.
¡Espero que te haya gustado este tutorial!
