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

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css" media="screen">
    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;
    }
</style>
<meta name="viewport" content="width=1100">
</head>
<body>
    <div id="main"> Hello </div>
</body>
</html>

Are both files in the same directory? Can you access both files by simply changing the filename (e.g. example.com/index.html -> example.com/style.css)? Have you tried an absolute path (/style.css) instead? — Zeta
– Zeta, Commented Feb 28, 2012 at 11:10
Which browser are you using? have you already checked the file permission of style.css? Have you tried to validate the css so to check for parsing issues? — Fabrizio Calderan
– Fabrizio Calderan, Commented Feb 28, 2012 at 11:10
Add a type="text/css" if it still fails F12 developer tools, look at the network monitor, it the .css url requested? is it 200 ok? — Alex K.
– Alex K., Commented Feb 28, 2012 at 11:11

Community · Accepted Answer · 2020-06-20 09:12:55Z

26

Add

type="text/css"

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., "text/css"). Authors must supply a value for this attribute; there is no default value for this attribute.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 28, 2012 at 11:10

Simon West

3,7881 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fabrizio Calderan Over a year ago

boilerplate (h5bp) doesn't use that attribute and it works fine too.

Th 00 mÄ s Over a year ago

type="text/css" is the default. Its not needed to add it.

Simon West Over a year ago

The type attribute was non-optional in HTML4 link and so some olders browsers may treat it as such.

Isuru Bandara Over a year ago

I new to web devolopment, and recently im facing a issue with type="text/css". My problem is when I entered type="text/css" stylesheet my web page does not work with components which i used to build the webpage. but when i removed the type="text/css" it works perfectly. Anyone knows why I'm facing the issue when i use type="text/css"?

Ghost Answer · Accepted Answer · 2012-02-28 11:26:21Z

16

Check both files in the same directory and then try this

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

answered Feb 28, 2012 at 11:26

Ghost Answer

1,4982 gold badges18 silver badges41 bronze badges

Comments

w3uiguru · Accepted Answer · 2012-02-28 11:51:29Z

13

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.

answered Feb 28, 2012 at 11:51

w3uiguru

5,9152 gold badges24 silver badges25 bronze badges

Comments

hayonj · Accepted Answer · 2013-05-20 05:25:34Z

10

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

answered May 20, 2013 at 5:25

hayonj

1,4493 gold badges21 silver badges30 bronze badges

5 Comments

Francisco Corrales Morales Over a year ago

I don´t know why, but adding the dot help me.

user2943111 Over a year ago

This can happen especially on Linux. You also need to write ./ in front of a program or script you want to run in your current directory, unless that happens to be in your path, e.g. ./myscript, to execute myscript. Linux will not look by default in the current dir. I think it may be a security issue to add the current directory (.) to $PATH. It is best to always add ./ for files in current directory, so it will work on Windows and Linux.

Arthur Kasparian Over a year ago

Working on a Mac and the dot helped me too. Tried everything for hours and turns out the problem was a simple ./

Huyen Over a year ago

Thank you all for the dot comments! I'm on a Mac and the dot ./ helped me too.

Neph Over a year ago

I want to use a .css file (same folder as the .html file) with a servlet but href="mystyle.css" (with or without dot) didn't load it and no suggestion here worked. Solution: Use the full path inside the webcontent folder ("webapp" for me), in my case that's "html/mystyle.css", then clear your browser's cache. Also check the webdev tools in your browser if the file shows up correctly, it might even display a "resource not found" error there.

Stan Ralph · Accepted Answer · 2017-01-28 16:23:39Z

6

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

answered Jan 28, 2017 at 16:23

Stan Ralph

611 silver badge1 bronze badge

Comments

ziligy · Accepted Answer · 2018-12-16 06:03:17Z

5

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

@charset "UTF-8";

answered Dec 16, 2018 at 6:03

ziligy

1,49716 silver badges10 bronze badges

1 Comment

Arash.Zandi Over a year ago

When I entered website url like this [www.someURL.com] some parts of css didn't loaded but without [www] worked fine, after setting [@charset "UTF-8";] It works great for both of them, thanks alot dude.

sharkySharks · Accepted Answer · 2017-05-10 05:38:19Z

4

With HTML5 all you need is the rel, not even the type.

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

answered May 10, 2017 at 5:38

sharkySharks

4,6541 gold badge12 silver badges8 bronze badges

1 Comment

user13944038 Over a year ago

The </link> closing tag is not required.

rbashish · Accepted Answer · 2018-06-13 11:23:47Z

4

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!

answered Jun 13, 2018 at 11:23

rbashish

2,1532 gold badges28 silver badges37 bronze badges

Comments

Azzaz · Accepted Answer · 2018-06-30 16:40:04Z

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.

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.
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.

Koen Peters · Accepted Answer · 2012-02-28 11:12:09Z

3

You could try this:

<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/>

Make sure that the browser actually makes the request and doesn't return a 404.

answered Feb 28, 2012 at 11:12

Koen Peters

12.9k6 gold badges40 silver badges62 bronze badges

Comments

MapGurl · Accepted Answer · 2020-06-13 15:09:53Z

3

I found myself out here looking for an answer and figured out that my issue was a missing character - spelling is important.

<link href="tss_layout.css" rel=styleheet" />

once I put the s in the middle of stylesheet - worked like a charm.

answered Jun 13, 2020 at 15:09

MapGurl

311 bronze badge

Comments

Self Dot · Accepted Answer · 2020-03-22 13:37:16Z

2

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"

answered Mar 22, 2020 at 13:37

Self Dot

3713 silver badges16 bronze badges

Comments

Maximilian Lever · Accepted Answer · 2018-04-08 14:30:57Z

1

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.

answered Apr 8, 2018 at 14:30

Maximilian Lever

212 bronze badges

Comments

Tejas · Accepted Answer · 2018-04-09 10:59:30Z

1

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

answered Apr 9, 2018 at 10:59

Tejas

4510 bronze badges

Comments

Hadi · Accepted Answer · 2018-05-31 05:22:38Z

1

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.

answered May 31, 2018 at 5:22

Hadi

112 bronze badges

Comments

Zizzipupp · Accepted Answer · 2019-11-28 16:22:52Z

1

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

answered Nov 28, 2019 at 16:22

Zizzipupp

1,3611 gold badge14 silver badges33 bronze badges

Comments

Wallace · Accepted Answer · 2020-01-22 16:26:13Z

1

Here is another cause to add to the collection on this page. In this code...

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

...I misspelled rel as ref.

answered Jan 22, 2020 at 16:26

Wallace

18k9 gold badges62 silver badges86 bronze badges

1 Comment

Wallace Over a year ago

What does rel stand for? The relationship that the linked file has to the current parent file.

Heila Al-Mogren · Accepted Answer · 2020-03-27 16:11:13Z

1

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.

answered Mar 27, 2020 at 16:11

Heila Al-Mogren

2371 silver badge11 bronze badges

Comments

Poode · Accepted Answer · 2018-03-29 15:57:42Z

0

Well I faced this issue today and as workaround (not the best) I did below

<script type="text/javascript" src="testWeb/scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>

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

<script type="text/javascript" src="scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>

not loading while html index file beside scripts folder in same directory.

answered Mar 29, 2018 at 15:57

Poode

1,7521 gold badge15 silver badges20 bronze badges

Comments

user10496917 · Accepted Answer · 2018-10-12 19:25:16Z

0

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.

answered Oct 12, 2018 at 19:25

user10496917

1

Comments

pv abhilash · Accepted Answer · 2018-10-15 04:17:24Z

0

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

answered Oct 15, 2018 at 4:17

pv abhilash

11 bronze badge

Comments

Fares Ars · Accepted Answer · 2020-06-02 21:26:34Z

0

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

answered Jun 2, 2020 at 21:26

Fares Ars

72 bronze badges

2 Comments

Jason Aller Over a year ago

Can you explain why this might have worked for you? Could it have been caching an attempt on the file before it was loaded and changing the name bypassed that? Adding explanation will help make it clear if this answer is applicable to the eight year old question.

Fares Ars Over a year ago

i think that not all of us have the same issue, but my little solution will make in evidence that the problem is caused by cache

user14962543 · Accepted Answer · 2021-01-08 00:02:30Z

0

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

answered Jan 8, 2021 at 0:02

user14962543

11

Comments

Tea Master · Accepted Answer · 2024-06-16 09:09:18Z

0

My code looked nearly identical, and I've fixed it by modifying the server code not to return the Content-Type: text/plain header. I made it return no Content-Type header, but modifying it to return text/css would probably work too. I also didn't need to add type="text/css" to the link tag for this to work.

answered Jun 16, 2024 at 9:09

Tea Master

1511 silver badge14 bronze badges

Comments

John · Accepted Answer · 2017-08-26 20:04:53Z

-1

Use the following steps to load .CSS file its very simple.

<link rel="stylesheet" href="path_here.css">

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.

edited Aug 26, 2017 at 20:04

John

1

answered Jul 29, 2016 at 5:58

Muhammad Majid

72 bronze badges

1 Comment

Parth Mehrotra Over a year ago

Can't think of a good reason to use absolute paths though. Probably a better way to navigate whatever situation causes you to do that.

Za3tar 212 · Accepted Answer · 2020-09-20 17:00:25Z

-2

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

answered Sep 20, 2020 at 17:00

Za3tar 212

12 bronze badges

2 Comments

user6063698 Over a year ago

Sharing answers should be by code for such questions.

MkMan Over a year ago

Hi @Za3tar , it's fair to assume that the user has attempted this. It's also not a permanent solution that end users can apply.

Mandla Vasavi · Accepted Answer · 2017-01-25 12:20:14Z

-4

Add type="text/css" It worked for me.

answered Jan 25, 2017 at 12:20

Mandla Vasavi

1

1 Comment

JJJ Over a year ago

This same answer has already been given three times 5 years ago. What extra value does this answer provide?

Collectives™ on Stack Overflow

HTML not loading CSS file

27 Answers 27

4 Comments

Comments

Comments

5 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

1 Comment

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

27 Answers 27

4 Comments

Comments

Comments

5 Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

1 Comment

2 Comments

1 Comment

Linked

Related