HTML not loading CSS file

Question

I am completely stumped as to why this doesn t work  It seems the HTML file can t load the CSS for some reason  even though both are in the same directory  Any idea what might be the problem   index html   lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt Home Page lt  title gt   lt link rel  stylesheet  href  style css  media  screen    gt   lt meta name  viewport  content  width 1100  gt   lt  head gt   lt body gt   lt div id  main  gt  Hello  lt  div gt   lt  body gt   lt  html gt    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      The above doesn t work  Adding the css inline in index html works fine though   lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt Homepage lt  title gt   lt style type  text css  media  screen  gt      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         lt  style gt   lt meta name  viewport  content  width 1100  gt   lt  head gt   lt body gt       lt div id  main  gt  Hello  lt  div gt   lt  body gt   lt  html gt

User · Answer

You could try this    lt link href  style css  rel  stylesheet  type  text css  media  screen  projection   gt    Make sure that the browser actually makes the request and doesn t return a 404

User · Answer

You have to add type  text css  you can also specify href    style css  which the   specifies the current directory

User · Answer

I found myself out here looking for an answer and figured out that my issue was a missing character - spelling is important    lt link href  tss layout css  rel styleheet    gt    once I put the s in the middle of stylesheet - worked like a charm

User · Answer

i have the same probleme  i always change the  style css  to  styles css  or any other name and it worked fine for me

User · Answer

I was having similar problem but resolved changing the Style css to style css  Because of this name caps letter  S change it was throwing 404 error we won t notice small changes in my system it was working but  when I hosted in cloud it was throwing this error make sure this all being checked after uploading in cloud

User · Answer

guys the best thing to try is to refreash the whole website by pressing ctrl   F5 on mac it is CMD   R

User · Answer

Also make sure your link tag s media attribute has a valid value  in my case  I was using WordPress CMS and passed the boolean value true in the media field so it showed like that    lt link rel  stylesheet  href    style css  media  1  gt    That s why it was giving error   There are three main attributes on which the css style loading depends    Make sure that your link tag s relation rel attribute s value must be valid for a css file i e  stylesheet   Make sure that your link tag s target href attribute s value must be pointing to a valid an existing Cascading Stylesheet file  Like in your case it s   style css  Remember that you can use both absolute and relative paths in the href attribute s value  That means if your file style css is present at the root i e    then you can also use  style css in the href attribute s value or else if the file is present in the same directory in which your HTML file is present then you can use   style css as the value in your link tag s href attribute s value   Make sure that your link tag s media attribute should be one of the following    For every device you can use the all keyword as your media attributes s value  For PC s and laptops only you can use the screen as your media attribute s value  For webpage prints you can use the print keyword as your media attributes s value  Note that it also applies when you press the Print Screen button to capture the screen s image  At last for screen readers you can use the speech keyword as your  media attribute s value     By following these rules your HTML structure for link tag will be

User · Answer

After digging and digging on this issue  for me it was solved by Johannes on another thread  Local CSS file is not loading from HTML     The type attribute in your link tag has typographical quote   characters  type    text css     Try to change these to  plain  quotes   like type  text css

User · Answer

Well I too had the exactly same question  And everything was okay with my CSS link  Why html was not loading the CSS file was due to its position  as in my case    Well I had my custom CSS defined in the wrong place and that is why the webpage was not accessing it  Then I started to test and place the CSS link to different place and voila it worked for me   I had read somewhere that we should place custom CSS right after Bootstrap CSS so I did but then it was not loading it  So I changed the position and it worked   Hope this helps   Thanks

User · Answer

Your css file should be defined as UTF-8  Put this in the first line of you css file    charset  UTF-8

User · Answer

Well I faced this issue today and as workaround  not the best  I did below     lt script type  text javascript  src  testWeb scripts inline 31e1fb380eb7cf3d75b1 bundle js  gt  lt  script gt    where testWeb is my root app folder in my htdoc dir  in windows  using xampp  or in  var www html directory  as for some reason I do not know yet    lt script type  text javascript  src  scripts inline 31e1fb380eb7cf3d75b1 bundle js  gt  lt  script gt    not loading while html index file beside scripts folder in same directory

User · Answer

Add type  quot text css quot   to your link tag While this may no longer be necessary in modern browsers the HTML4 specification declared this a required attribute   type   content-type  CI  This attribute specifies the style sheet language of the element s contents and overrides the default style sheet language  The style sheet language is specified as a content type  e g    quot text css quot    Authors must supply a value for this attribute  there is no default value for this attribute

User · Answer

Not sure this is valuable  but I will leave this here for others  Making sure that  Anonymous Authentication  was set to  Enabled  loaded my CSS file correctly   To do that in Visual Studio 2019    Select your solution s name  right click  and hit  properties  Navigate to the  Properties  frame  typically in the bottom right corner Ensure that  Anonymous authentication  is set to  Enabled  as shown below

User · Answer

With HTML5 all you need is the rel  not even the type    lt link href  custom css  rel  stylesheet  gt  lt  link gt

User · Answer

As per you said your both files are in same directory  1  index html and 2  style css  I have copied your code and run it in my local machine its working fine there is no issues   According to me your browser is not refreshing the file so you can refresh reload the entire page by pressing CTRL   F5 in windows for mac CMD   R   Try it if still getting problem then you can test it by using firebug tool for firefox    For IE8 and Google Chrome you can check it by pressing F12 your developer tool will pop-up and you can see the Html and css   Still you have any problem please comment so we can help you

User · Answer

This may be a  special  case but was fiddling with this piece of code    ForceType application x-httpd-php SetHandler application x-httpd-php   As a quick test for extentionless file handling  when a similar problem occurred   Some but not all php files thereafter treated the css files as php and thus succesfully loaded the css but not handled it as css  thus zero rules were executed when checking f12 style editor   Perhaps something similar might occur to any-one else here and this tidbit might  help

User · Answer

I had a similar problem and tested different ways to solve it   Eventually I understood that my index htm file had been saved with  Unicode  encoding  for using Farsi characters in my page  while my  css file had been save with  ANSI  format   I changed the encoding of my  css file to  Unicode  with Notepad and the problem got solved

User · Answer

Here is another cause to add to the collection on this page  In this code      lt link rel  stylesheet  type  text css  href  styles styles css  media  screen  gt       I misspelled rel as ref

User · Answer

Use the following steps to load  CSS file its very simple    lt link rel  stylesheet  href  path here css  gt    note  1--  don t forget to write  stylesheet  in rel attribute        2--  use correct path e g  D  folder1 forlder2 folder3 file css   Now where ever directory you are in  you can load your  css file exactly path you mention   Regards  Muhammad Majid

User · Answer

x000D   x000D   lt link href  style css  rel  stylesheet  type  text css   gt  x000D   x000D   x000D

User · Answer

Add type  text css  It worked for me

User · Answer

I had similar problem   my code was working fine but suddenly css sheets stopped working   after some detection I found out that somehow the MIME of style sheet was changed from type  text css  to  text-css    Idk how they were changed since the code was working few hours ago but however I changed it and it worked fine  hope this helps

User · Answer

I had been facing the same issue   For Chrome and Firefox but everything was working how it should in internet explorer  I found that making the CSS file UTF-8 made it work for chrome

User · Answer

Check both files in the same directory  and then try this   lt link href  style css  rel  stylesheet  type  text css   gt

User · Answer

I have struggled with this same problem  Ubuntu 16 04  Bluefish editor  FireFox  Google Chrome   Solution   Clear browsing data in Chrome  Settings   Advanced Settings   Clear Browsing Data    In Firefox   Open Menu image top right tool bar  Preferences    Advanced    look for this image in the menu  Cached Web Content click the button  Clear Now   Browser s cache the  css file and if it has not changed they usually won t reload it   So when you change your  css file clear this web cache and it should work unless a problem exists in your  css file  Peace   Stan

User · Answer

HTML was not loading my css because i had placed the style css in template folder rather it should be in static folder   After replacing my file to static folder it worked for me

[css] HTML not loading CSS file

Examples related to css

Examples related to html

Examples related to stylesheet