HTML no carga el archivo CSS

Estoy completamente perplejo de por qué esto no funciona. Parece que el archivo HTML no puede cargar el CSS por algún motivo, aunque ambos están en el mismo directorio. Alguna idea de lo que podría ser el problema?

index.html

   Home Page     
Hello

style.css

 body{ background-color: #F9F9F9; background-image: url(images/bg3.png); background-position: center top; background-repeat: repeat; text-shadow: #FFFFFF 0px 1px 0px; font-family: "Georgia", "Times", serif; -webkit-font-smoothing: antialiased; } a{ text-decoration: none; } #main{ margin: 50px auto 50px auto; width: 1000px; min-height: 500px; padding: 0px 20px 0px 20px; } 

Lo anterior no funciona. Agregar el CSS en línea en index.html funciona bien aunque

    Homepage  body { background-color: #F9F9F9; background-image: url(images/bg3.png); background-position: center top; background-repeat: repeat; text-shadow: #FFFFFF 0px 1px 0px; font-family: "Georgia", "Times", serif; -webkit-font-smoothing: antialiased; } a { text-decoration: none; } #main { margin: 50px auto 50px auto; width: 1000px; min-height: 500px; padding: 0px 20px 0px 20px; }     
Hello

Añadir

 type="text/css" 

a su etiqueta de enlace

Si bien esto ya no es necesario en los navegadores modernos, la especificación HTML4 declaró este atributo obligatorio.

tipo = tipo de contenido [CI]

Este atributo especifica el lenguaje de hoja de estilos de los contenidos del elemento y anula el lenguaje de hoja de estilo predeterminado. El lenguaje de la hoja de estilo se especifica como un tipo de contenido (por ejemplo, “texto / css”). Los autores deben proporcionar un valor para este atributo; no hay un valor predeterminado para este atributo.

Verifique ambos archivos en el mismo directorio y luego pruebe esto

  

Como dijiste, tus dos archivos están en el mismo directorio. 1. index.html y 2. style.css

He copiado tu código y lo he ejecutado en mi máquina local, funciona bien, no hay problemas.

Según mi opinión, su navegador no actualiza el archivo para que pueda actualizar / volver a cargar toda la página presionando CTRL + F5 en Windows para mac CMD + R.

Pruébalo si sigue teniendo problemas, entonces puedes probarlo usando la herramienta firebug para Firefox .

Para IE8 y Google Chrome puedes verificarlo presionando F12, tu herramienta de desarrollador aparecerá y podrás ver el HTML y el CSS.

Aún tienes algún problema, por favor comenta para que podamos ayudarte.

Tienes que agregar type="text/css" , también puedes especificar href="./style.css" que el . especifica el directorio actual

Puedes intentar esto:

  

Asegúrese de que el navegador realmente realiza la solicitud y no devuelve un 404.

He luchado con este mismo problema (Ubuntu 16.04, editor de Bluefish, FireFox, Google Chrome.

Solución: borre los datos de navegación en Chrome “Configuración> Configuración avanzada> Borrar datos de navegación”, en Firefox, “Abrir imagen de menú en la barra de herramientas superior derecha ‘Preferencias’> Avanzado”, busque esta imagen en el menú: Contenido web en caché haga clic en el botón “Despejado ahora”. El caché del navegador es el archivo .css y, si no ha cambiado, generalmente no lo volverá a cargar. Entonces, cuando cambie su archivo .css, borre este caché web y debería funcionar a menos que exista un problema en su archivo .css. Paz, Stan

Con HTML5, todo lo que necesita es rel , ni siquiera el type .

  

Utilice los siguientes pasos para cargar el archivo .CSS es muy simple.

nota: 1 -> no te olvides de escribir “hoja de estilo” en el atributo rel. 2 -> use la ruta correcta, por ejemplo: D: \ folder1 \ forlder2 \ folder3 \ file.css ”

Ahora, donde quiera que esté en el directorio, puede cargar su archivo .css exactamente la ruta que menciona.

¡Saludos! Muhammad Majid.

Bueno, hoy me enfrenté a este problema y como solución (no la mejor) que hice a continuación

  

donde testWeb es mi carpeta de aplicaciones raíz en mi directorio htdoc. en Windows (usando xampp) o en el directorio / var / www / html como por alguna razón aún no lo sé

  

no se carga mientras el archivo de índice html está al lado de la carpeta de scripts en el mismo directorio.

He estado enfrentando el mismo problema,

Para Chrome y Firefox, pero todo funcionaba como debería en Internet Explorer. Descubrí que hacer que el archivo CSS UTF-8 lo hiciera funcionar para Chrome.

Tuve un problema similar y probé diferentes formas de resolverlo.

Eventualmente entendí que mi archivo index.htm había sido guardado con encoding “Unicode” (para usar caracteres Farsi en mi página) mientras que mi archivo .css había sido guardado con el formato “ANSI” .

Cambié la encoding de mi archivo .css a “Unicode” con el Bloc de notas y se resolvió el problema.

Bueno, yo también tenía la misma pregunta. Y todo estaba bien con mi enlace CSS . Por qué html no estaba cargando el archivo CSS fue debido a su posición (como en mi caso).

Bueno, mi CSS personalizado se definió en el lugar equivocado y es por eso que la página web no estaba accediendo a él. Luego comencé a probar y colocar el enlace CSS en un lugar diferente y listo para mí.

Había leído en algún lugar que deberíamos colocar custom CSS justo después de Bootstrap CSS así que lo hice, pero luego no lo estaba cargando. Así que cambié la posición y funcionó.

Espero que esto ayude.

¡Gracias!

También asegúrese de que el atributo de media su etiqueta de link tenga un valor válido. En mi caso, estaba usando WordPress CMS y pasé el valor booleano true en el campo de medios para que así se muestre.

  

Es por eso que estaba dando error. Hay tres atributos principales de los que depende la carga del estilo css.

  1. Asegúrese de que el valor del atributo relacional de la etiqueta de link sea ​​válido para un archivo css, es decir, una stylesheet .
  2. Asegúrese de que el valor del atributo href objective de su etiqueta de link debe apuntar a un archivo de hoja de estilos en cascada válido y existente. Como en tu caso, es ./style.css .

    Recuerde que puede usar rutas absolutas y relativas en el valor del atributo href . Eso significa que si su archivo style.css está presente en la raíz, es decir, / entonces también puede usar /style.css en el valor del atributo href o si el archivo está presente en el mismo directorio en el que está presente su archivo HTML, entonces puede use ./style.css como el valor en el valor del atributo href su etiqueta de link .

  3. Asegúrese de que el atributo de media su etiqueta de link sea ​​uno de los siguientes.
    1. Para cada dispositivo, puede usar la palabra clave all como el valor de los atributos de sus media .
    2. Para PC y laptops, solo puede usar la screen como el valor de su atributo media .
    3. Para las impresiones de páginas web, puede usar la palabra clave print como el valor de los atributos de sus media . Tenga en cuenta que también se aplica cuando presiona el botón Imprimir pantalla para capturar la imagen de la pantalla.
    4. Por último, para los lectores de pantalla puede usar la speech clave del speech como el valor de su atributo de medios.

Al seguir estas reglas, su estructura HTML para la etiqueta de link será.

Agregar type = “text / css” Funcionó para mí.