Published on

Cómo vincular CSS a HTML: vinculación de archivos de hojas de estilo

Authors

tailwind-nextjs-banner

HTML es el lenguaje de marcado que te ayuda a definir la estructura de una página web. CSS es el lenguaje de hoja de estilo que utilizas para hacer que la estructura sea presentable y esté bien diseñada.

Para que los estilos que implementes con CSS se reflejen en el HTML, debes encontrar una manera de vincular el CSS al HTML.

Puedes hacer la vinculación escribiendo CSS en línea, CSS interno o CSS externo.

Es una buena práctica mantener tu CSS separado de tu HTML, por lo que este artículo se centra en cómo puedes vincular ese CSS externo a tu HTML.

Cómo vincular CSS a HTML

Para vincular tu CSS a tu HTML, debes usar la etiqueta de enlace con algunos atributos relevantes.

La etiqueta de enlace es una etiqueta de cierre automático que debes colocar en la sección de encabezado de tu HTML.

Para vincular CSS a HTML con él, así es como se hace:

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

Coloca la etiqueta de enlace en la sección principal de tu HTML como se muestra a continuación:

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    <title>Enlazar CSS a HTML</title>
</head>

Atributos de la etiqueta de enlace

El atributo rel

rel es la relación entre el archivo externo y el archivo actual. Para CSS, usa stylesheet. Por ejemplo, rel="stylesheet".

El atributo type

type es el tipo de documento que estás vinculando al HTML. Para CSS, es text/css. Por ejemplo, type="text/css".

El atributo href

href significa "referencia de hipertexto". Lo usas para especificar la ubicación del archivo CSS y el nombre del archivo. Es un enlace en el que se puede hacer clic, por lo que también puedes mantener presionada la tecla CTRL y hacer clic para ver el archivo CSS.

Por ejemplo, href="styles.css" si el archivo CSS se encuentra en la misma carpeta que el archivo HTML. O href="carpeta/styles.css" si el archivo CSS se encuentra en otra carpeta.

Pensamientos finales

Este artículo te mostró cómo vincular correctamente un archivo CSS externo a HTML con la etiqueta de enlace y los atributos necesarios. También echamos un vistazo a lo que significa cada uno de los atributos, para que no los uses sin saber cómo funcionan.

Ver en GitHub