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. http://example.com/index.html -> http://example.com/style.css)? Have you tried an absolute path (`/style.css`) instead? — Zeta, Feb 28 '12 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, Feb 28 '12 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., Feb 28 '12 at 11:11

score 25 · Answer 1 · edited Jun 20 '20 at 09:12

25

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 '20 at 09:12

Community

1
1

answered Feb 28 '12 at 11:10

Simon West

3,708
1
26
28

1

boilerplate (h5bp) doesn't use that attribute and it works fine too. – Fabrizio Calderan Feb 28 '12 at 11:16
type="text/css" is the default. Its not needed to add it. – Th 00 mÄ s Feb 28 '12 at 11:39
1

The type attribute was non-optional in HTML4 [link](http://www.w3.org/TR/html4/present/styles.html#h-14.2.3) and so some olders browsers may treat it as such. – Simon West Feb 28 '12 at 12:11
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"? – Isuru Bandara Oct 15 '20 at 10:54

score 16 · Answer 2 · answered Feb 28 '12 at 11:26

16

Check both files in the same directory and then try this

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

answered Feb 28 '12 at 11:26

Ghost Answer

1,458
1
17
41

score 11 · Answer 3 · answered Feb 28 '12 at 11:51

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.

score 9 · Answer 4 · answered May 20 '13 at 05:25

9

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

answered May 20 '13 at 05:25

hayonj

1,429
3
21
28

2

I don´t know why, but adding the dot help me. – Francisco Corrales Morales Jan 17 '14 at 23:05
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. – user2943111 Dec 14 '19 at 19:14
Working on a Mac and the dot helped me too. Tried everything for hours and turns out the problem was a simple ./ – Arthur Kasparian Feb 12 '23 at 13:48

score 6 · Answer 5 · answered Jan 28 '17 at 16:23

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

score 5 · Answer 6 · answered Dec 16 '18 at 06:03

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 '18 at 06:03

ziligy

1,447
16
10

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. – Arash.Zandi Apr 07 '19 at 20:27

score 4 · Answer 7 · answered May 10 '17 at 05:38

4

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

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

answered May 10 '17 at 05:38

sharkySharks

4,254
1
10
7

The `` closing tag is not required. – Aug 26 '21 at 18:38

score 4 · Answer 8 · answered Jun 13 '18 at 11:23

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!

score 4 · Answer 9 · answered Jun 30 '18 at 16:40

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.

score 3 · Answer 10 · answered Jun 13 '20 at 15:09

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 '20 at 15:09

MapGurl

31
1

score 3 · Answer 11 · answered Feb 28 '12 at 11:12

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 '12 at 11:12

Koen Peters

12,798
6
36
59

score 2 · Answer 12 · answered Mar 22 '20 at 13:37

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"

score 1 · Answer 13 · answered Apr 08 '18 at 14:30

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 08 '18 at 14:30

Maximilian Lever

21
2

score 1 · Answer 14 · answered Apr 09 '18 at 10:59

1

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

answered Apr 09 '18 at 10:59

Tejas

45
9

score 1 · Answer 15 · answered May 31 '18 at 05:22

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.

score 1 · Answer 16 · answered Nov 28 '19 at 16:22

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

score 1 · Answer 17 · answered Jan 22 '20 at 16:26

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 '20 at 16:26

Wallace Kelly

15,565
8
50
71

What does `rel` stand for? The _**rel**ationship_ that the linked file has to the current parent file. – Wallace Kelly Jan 22 '20 at 16:26

score 1 · Answer 18 · answered Mar 27 '20 at 16:11

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.

score 0 · Answer 19 · answered Mar 29 '18 at 15:57

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.

score 0 · Answer 20 · answered Oct 12 '18 at 19:25

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.

score 0 · Answer 21 · answered Oct 15 '18 at 04:17

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

score 0 · Answer 22 · answered Jun 02 '20 at 21:26

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 02 '20 at 21:26

Fares Ars

7
2

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. – Jason Aller Jun 02 '20 at 22:30
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 – Fares Ars Jun 03 '20 at 12:44

score 0 · Answer 23 · answered Jan 08 '21 at 00:02

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 08 '21 at 00:02

user14962543

11

score -1 · Answer 24 · edited Aug 26 '17 at 20:04

-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 '17 at 20:04

John

1
13
98
177

answered Jul 29 '16 at 05:58

Muhammad Majid

7
2

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. – Parth Mehrotra May 23 '18 at 21:24

score -2 · Answer 25 · answered Sep 20 '20 at 17:00

-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 '20 at 17:00

Za3tar 212

1
2

1

Sharing answers should be by code for such questions. – Sep 20 '20 at 19:44
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. – MkMan Sep 20 '20 at 22:14

score -4 · Answer 26 · answered Jan 25 '17 at 12:20

-4

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

answered Jan 25 '17 at 12:20

Mandla Vasavi

1

4

This same answer has already been given three times 5 years ago. What extra value does this answer provide? – JJJ Jan 25 '17 at 12:27

HTML not loading CSS file

26 Answers26

Linked

Related