css file path is right, css code is valid, but it doesn't work

html css include stylesheet

10,394

Solution 1

The relative URL is likely wrong. To help you further we need to know two things:

What is the full (absolute) URL with which you open the HTML page? Check browser address bar.
What is the full (absolute) URL with which you can open the CSS file individually in your browser?

Once you know both, you can do the math to get the right relative path for use in link tag.

Solution 2

Probably not served as text/css. Did you check your server config?

Solution 3

Try using the format of:
<link rel="stylesheet" href="/css/file_name_here.css" type="text/css" media="screen">
etc. Though it shouldn't, it may be the order of the parameters that is causing it. This is the order i use and it has always worked for me. I also noticed that you have three <!DOCTYPE> declarations, is this necassery and could it be the cause of this? I have researched and
found that only one is permitted...

Whether or not they are the causes or not, i hope you find the solution soon!

Solution 4

Normally for this kind of problem, I would do:

add a style like body {border:10px solid red !important;} into the css file and refresh the html file.
Check if there is any typo in the path and file names, double check again, use copy/paste the names if necessary.
Use versions, like ... href="css/reset.css?001" ...
Check the folder and files permissions on the server.
Try load it on a different browser or "private mode".

Hope it helps!

Solution 5

Try to use Firebug/Chrome Web Inspector and see if the files load. It might be that the web user has no access rights to the CSS files, in this case you should see that the files can't be loaded and they return a 401 HTTP status. In this case try to set the correct permissions (through CHMOD if it's a Unix server, 0644 should be sufficient).

View more solutions

10,394

Author by

designer-trying-coding

Updated on June 04, 2022

Comments

designer-trying-coding almost 2 years

I have a weird, annoying problem. I have a css/ folder and index.html at the root. I load css files in the header as follows:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>blabla</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="keywords" />
    <meta name="description" content="desc" />

    <!-- style files -->
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
</head>

but the css is not working: I see a plain index.html. I'm sure the css path is right; when I click "view source" and copy/paste the css files path, it shows the css files.

Also, when I copy the css directly into index.html, it works. What could be the problem?