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 m

Answer 1

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

Answer 2

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:

1. Select your solution's name, right click, and hit "properties"
2. Navigate to the "Properties" frame, typically in the bottom right corner
3. Ensure that "Anonymous authentication" is set to "Enabled" as shown below

Answer 3

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.

<link rel="stylesheet" href="./style.css" media="1">

That's why it was giving error. There are three main attributes on which the css style loading depends.

1. Make sure that your link tag's relation rel attribute's value must be valid for a css file i.e. stylesheet.
   
2. 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.
   
3. Make sure that your link tag's media attribute should be one of the following.
   1. For every device you can use the all keyword as your media attributes's value.
   2. For PC's and laptops only you can use the screen as your media attribute's value.
   3. 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.
   4. 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.

Answer 4

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.

Answer 5

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.

Answer 6

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.