¿Por qué no se aplican mis estilos CSS?

El síntoma: Una página sin formato

Has escrito tus reglas en un archivo externo, pero al ver la web en el navegador, los colores, fuentes y estructuras brillan por su ausencia.

Cuando el CSS no se aplica, el navegador suele estar ignorando el archivo porque no lo encuentra o porque la etiqueta de enlace es incompleta.

Causa 1: El atributo rel y la ruta

A diferencia de una imagen, un archivo CSS necesita que especifiques el atributo rel para indicar que se trata de un archivo de estilos CSS. Si olvidas rel="stylesheet", el navegador no procesará el contenido del archivo.

Error común:

<link href="estilos.css"> (Falta el atributo rel)

Solución correcta:

<link rel="stylesheet" href="css/estilos.css">

Causa 2: Errores de sintaxis interna

Si el archivo carga pero no funciona, revisa el código. Un solo punto y coma ; olvidado o una llave } sin cerrar puede invalidar el resto de reglas del documento.

Arréglalo ahora

El archivo de estilos está en la misma carpeta de la página y se llama estilos.css. Modifica el código para que el enlace sea funcional.

Si logras verlo en rojo, centrado y con borde es que lo has hehco bien.

<head>

</head>

<body>

<h1>Diseño cargado</h1>

</div>

</body>

Ejemplo: Error en la vinculación del archivo CSS.

Recuerda inspeccionar la pestaña "Network" de las DevTools para confirmar si el archivo devuelve un error 404.