Artículo original escrito por Ilenia Magoni
Artículo original External CSS Stylesheets – How to Link CSS to HTML and Import into Head
Traducido y adaptado por Josue Custodio

Se considera una buena práctica tener tus hojas de estilo CSS en un archivo externo.  Entonces, ¿cómo puedes vincular ese CSS a tu archivo HTML?

La vinculación a un archivo CSS externo es una parte importante de cualquier modelo de página HTML. Y en este artículo, aprenderemos cómo hacerlo.

Cómo vincular un archivo CSS a un archivo HTML

Puedes vincular tu archivo CSS a tu archivo HTML agregando un elemento link dentro del head de tu archivo HTML, así:

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" src="style.css">
    </head>
    <body>
    
    </body>
</html>

El elemento link tiene muchos usos, y es importante especificar los atributos correctos para que puedas usarlo para importar una hoja de estilo CSS externa. Veamos algunos atributos importantes ahora.

El atributo rel

El primero de los dos atributos indispensables es el atributo rel. Utilizarás este atributo para indicarle al navegador cuál es la relación con el archivo importado.

Escribirás rel="stylesheet" para decirle al navegador que está importando una hoja de estilo.

El atributo src

El segundo atributo indispensable es el src, que especifica el archivo a importar.

Una situación común es que el archivo CSS y el archivo HTML estén en la misma carpeta. En tal caso, puedes escribir src="style.css".

Si el archivo CSS y el archivo HTML están en carpetas diferentes, debes escribir el archivo correcto que debe pasar del archivo HTML al archivo CSS.

Por ejemplo, una situación común es que el archivo CSS está en una carpeta que es hermana del archivo HTML, así:

proyecto --- index.html
            css ---------- style.css

En este caso, necesitarás escribir una ruta como "css/styles.css".

El atributo type

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

Usas el atributo type para definir el tipo de contenido al que está enlazando. Para un archivo CSS, esto será text/css. Pero css es el único lenguaje de hoja de estilo que se utiliza en la web, no solo es opcional, sino que incluso es una buena práctica no incluirlo.

El atributo media

<link rel="stylesheet" src="style.css" media="screen and (max-width: 600px)">

El atributo de medios no es visible en el ejemplo.  Es un atributo opcional que puedes usar para especificar cuándo importar una determinada hoja de estilo. Su valor debe ser una media type / media query (tipo de medio / consulta de medios).

Esto puede resultar útil en caso de que desees separar los estilos para diferentes dispositivos y tamaños de pantalla en diferentes archivos. Debería importar cada archivo CSS con su propio elemento link.

Conclusión

En este artículo, has aprendido cómo agregar una hoja de estilo externa a tu página web usando el elemento link  y los atributos rel  src.

También aprendiste que puedes importar varias hojas de estilo y utilizar el atributo media para determinar cuándo se debe aplicar cada uno.

¡Diviértete creando páginas web!