¿Cómo se enlaza una hoja de estilos CSS a un documento HTML?
Enlaza CSS a HTML usando «link rel="stylesheet" href="ruta/estilo.css"» dentro de la etiqueta «head». Esto asegura que los estilos se apliquen al cargar la página.
La forma estándar y más recomendada para enlazar una hoja de estilos CSS externa a un documento HTML es utilizando la etiqueta <link> dentro de la sección <head> de tu HTML.
Así es como se hace:
- Crea tu archivo CSS: Primero, asegúrate de tener tu archivo CSS (por ejemplo,
estilos.css) con todas las reglas de estilo que deseas aplicar. - Usa la etiqueta
<link>en el<head>: Dentro de la sección<head>de tu archivo HTML, añade una etiqueta<link>con los siguientes atributos:rel="stylesheet": Este atributo es fundamental. Le indica al navegador que el archivo enlazado es una hoja de estilos.href="ruta/al/archivo.css": Este atributo especifica la ruta (URL) hacia tu archivo CSS. Puede ser una ruta relativa (si el archivo CSS está en el mismo sitio web) o una URL absoluta (si enlazas a un archivo CSS alojado en otro servidor, como una CDN para «frameworks» CSS).
Ejemplo:
Supongamos que tienes un archivo HTML llamado index.html y un archivo CSS llamado estilos.css ubicado en una carpeta llamada css que está al mismo nivel que tu index.html. La estructura de carpetas sería:
mi-proyecto/
├── index.html
└── css/
└── estilos.css
Lenguaje del código: PHP (php)En tu archivo index.html, el enlace se vería así:
<!DOCTYPE <strong>html</strong>>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Web</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header>
<h1>Bienvenido a Mi Página</h1>
</header>
<main>
<p>Este es el contenido principal de mi página.</p>
</main>
<footer>
<p>© 2025 Mi Sitio Web</p>
</footer>
</body>
</html>
Lenguaje del código: PHP (php)¿Por qué en el <head>?
Colocar el enlace a tu CSS en el <head> permite que el navegador cargue y analice los estilos antes de empezar a renderizar el contenido del <body>.
Esto ayuda a evitar el «flash de contenido sin estilo» (FOUC), donde la página se muestra brevemente sin estilos antes de que el CSS se aplique, y asegura que los usuarios vean la página con su diseño correcto desde el inicio.
Aunque existen otras formas de aplicar CSS (como estilos internos con la etiqueta <style> o estilos en línea con el atributo style), enlazar una hoja de estilos externa con <link> es la práctica más común y recomendada para la mayoría de los proyectos, ya que promueve una mejor organización, mantenibilidad y permite que el CSS sea almacenado en caché por el navegador.
