Original article: External CSS Stylesheets – How to Link CSS to HTML and Import into Head
Es considerado una buena práctica tener tus hojas de estilos de CSS en un archivo externo. Entonces, ¿cómo puedes enlazar ese CSS a tu archivo HTML?
Enlazar a un archivo externo de CSS es una parte importante de cualquier plantilla de HTML. Y en este artículo, aprenderemos a cómo hacerlo.
Cómo enlazar un archivo CSS a un archivo HTML
Puedes enlazar tu archivo CSS a tu archivo HTML añadiendo un elemento link dentro del elemento head de tu archivo HTML, de este modo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>El elemento link tiene muchos usos, y es importante especificar los atributos correctos de modo que puedas usarlo para importar una hoja de estilos de CSS. Veremos algunos atributos importantes ahora.
El atributo rel
El primero de los atributos indispensables es el atributo rel. Usarás este atributo para decirle al navegador cuál es la relación con el archivo importado.
Escribirás rel="stylesheet" para decirle al navegador que estás importando una hoja de estilos.
El atributo href
El segundo atributo indispensable es el atributo href, el cual especifica el archivo a importar.
Una situación común es que el archivo de CSS y el archivo de HTML estén en la misma carpeta. En ese caso puedes escribir href="style.css".
Si el archivo de CSS y el archivo de HTML están en diferentes carpetas, necesitarás escribir la dirección correcta a la que necesita ir desde el archivo de HTML al archivo de CSS.
Por ejemplo, una situación habitual es que el archivo de CSS está en una carpeta que es hermana del archivo de HTML, de este modo:
project --- index.html
css ---------- style.cssEn este caso necesitarías escribir la dirección de esta forma "css/styles.css".
El atributo type
<link rel="stylesheet" href="style.css" type="text/css">Se utiliza el atributo type para definir el tipo de contenido que estás enlazando. Para una hoja de estilos, esto sería text/css. Pero ya que css es el único lenguaje de hojas de estilos usado en la web, no es solo opcional, si no es incluso a una buena práctica no incluirlo.
El atributo media
<link rel="stylesheet" href="style.css" media="screen and (max-width: 600px)">El atributo media no es visible en el ejemplo. Es un atributo opcional que puedes usar para especificar cuando importar una hoja de estilos determinada. Su valor debe ser una media type / media query.
Esto puede ser útil en caso de que quieras separar los estilos para diferentes dispositivos y resoluciones de pantalla en diferentes archivos. Necesitarías importar cada archivo de CSS con su propio elemento link.
Conclusión
En este artículo, aprendiste a como añadir una hoja de estilos externa a tu página web usando el elemento link y los atributos href y rel.
También aprendiste que puedes importar múltiples hojas de estilos y usar el atributo media para determinar cuando cada una debería ser aplicada.
¡Qué te diviertas creando páginas web!