> Faqs > Por qué no funciona mi vínculo de CSS y HTML

Por qué no funciona mi vínculo de CSS y HTML

Mi CSS esté en styles.css, y al conectar mi HTML con:

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

No funciona!

Respuestas

Hola!

El código parece que está correcto y no debería darte problemas con respecto a la sintaxis.

Sin embargo, para poder contestarte con exactitud deberías comentar cómo están organizados tus archivos en las carpetas en tu disco duro.

A la vista de tu código:

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

Se entiende que el archivo que vas a abrir está en un subdirectorio llamado "styles" y que dentro tienes un archivo llamado "style.css". Si esto es así siempre, te tendría que funcionar bien.

Pero ya dependiendo de la estructura de archivos de tu página, puede que funcione unas veces sí y otras no. Por ejemplo, para esta estructura:

|- index.html
|- contacto.html
|-- styles/styles.css
|-- productos/algo.html

Desde index.html y desde contacto.html se cumple la condición y la hoja de estilos estará bien enlazada.

Sin embargo, desde algo.html que está en la carpeta "productos", no ocurrirá esto, porque para llegar al archivo de estilos tendrías que poner otra ruta, porque te tendrías que ir al directorio padre. En este caso el vínculo con la hoja de estilos debería ser así.

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

Para solucionar esta necesidad de cambiar la ruta dependiendo de la página, muchas veces usamos una barra al comienzo de la ruta de la hoja de estilos.

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

De esta manera le estás diciendo que el archivo css está en la carpeta "styles", que cuelga de la carpeta raíz, y dentro en el archivo style.css. Pero claro, esta solución solamente te funcionará si realmente estás en una estructura de archivos donde te encaje, por ejemplo tienes la página en un dominio y el proyecto lo has metido en la raíz del dominio.

Juanjo
243 8 18 5