I had a similar issue, I believe the problem was coming from the name of my CSS folder in which I had the CSS file. The folder was named "CSS", I'm not sure why it was causing issues but when I put my css file into my "js" folder it worked perfectly fine. Then I created a new folder named "myCSS" and it worked still. This is a weird workaround but it solved my issue and it may be useful to someone else.
also for the link I just had <link rel="stylesheet" href="myCSS/style.css" />
I had a similar issue, I believe the problem was coming from the name of my CSS folder in which I had the CSS file. The folder was named "CSS", I'm not sure why it was causing issues but when I put my css file into my "js" folder it worked perfectly fine. Then I created a new folder named "myCSS" and it worked still. This is a weird workaround but it solved my issue and it may be useful to someone else.
also for the link I just had <link rel="stylesheet" href="myCSS/style.css" />
Can you check your network tab that your style.css is fetched from server and there is no 404 not found.
I would say try "/styles.css"
Videos
Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.
(If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?
Firefox can reject a stylesheet if it is not served with a content type of "text/css". (This is separate from the 'type="text/css"' declaration in the HTML.)
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.
Check both files in the same directory and then try this
<link href="style.css" rel="stylesheet" type="text/css"/>
LPChip suggested me to use the debugger/inspector of Firefox and there, the head is greyed out. On further investigation, I noticed it said "css was not loaded because its mime type "text/html" is not "text/css"
That made me check something...
I got the solution:
I had an apache mod_rewrite activated. While the path was correct, it seems that this mod_rewrite or the dedicated php for the redirection somehow told the browser that the file was html not css.
I had a similar issue. Was setting up a NGINX from scratch and all the styles for my project were not applied. But they existed and I did not had any other error.
I found out that I had to apply the correct mime types to all files served by NGINX. Before the fix it was text/plain and this did not worked.
I fixed it by adding those lines to NGINX configuration:
http {
# other config before ...
include /etc/nginx/mime.types;
default_type application/octet-stream;
# rest of config ...
}
I have two files in the same folder.
index.html and style.css
When the CSS is inside the HTML code itself, it works just fine.
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="style.css"> <title>Title</title> </head> <body> <div class="header"> <h1> Heading </h1> </div> </body> </html>
What's wrong then? I've removed <style> and every other HTML code from the CSS as it should be, yet nothing works.
I tried replacing
hrefwithsrc- still nothing happens.
Appreciate any help!