Html Not Loading CSS File

CSS file not loading in basic HTML

The .name in the css file indicates it is styling a class, but the classes are not used in the HTML file. So .button means it styles the button class instead of the button element.
Two options:

1. Style the element instead of the class by removing the dot

2. Add the class to the css file, for example on the button:

     <button class="button" type="submit" name="submit">SEND</button>
   

HTML not loading CSS

I can't give you a specific answer as I don't know what your local file structure is like (if you post it in the question, I might be able to give you a direct answer).

The issue stems from how you use the path. I'll explain all options you've tried and what they actually do:

---

1 - No starting dots, no starting slash

href="css/style.css"

If there is no prefixed character, you're working in the same directory as your html file.

For the above example, I'd expect the structure to be as follows:

- CSS (folder)
    - STYLE.CSS (file)
- PAGE.HTML (your HTML file)

That means the HTML file and the CSS folder should be siblings.

2 - Starting dots and slash

href="../css/style.css"

Now you're working in the parent directory of the HTML file's location. Suppose your folder structure is as follows:

- CSS (folder)
    - STYLE.CSS (file)
- WEBSITE (folder)
    - PAGE.HTML (your HTML page)

In this structure, the HTML page and the CSS folder are not siblings. But the CSS folder and the HTML page's parent are siblings. So, you need to go up one level, which you accomplish by adding ../ like in the example.

*Note: This can stack. You could put href="../../../css/style.css", and then you'd be working from the parent of the parent of the parent of your HTML page.

3 - Starting slash

href="/css/style.css"

Now you're working in the root directory of your website (not your page!)

Suppose your webpage is accessible via the following URL:

http://my.website.com/myapplication/newversion/page.html

Using the leading slash means that the working folder is set to the highest possible parent (which is always the web domain). So for the given example, the css file will be searched on the following location:

http://my.website.com/css/style.css

This type of notation is better used when using an absolute path. Generally speaking, and I think this applies in your case, you'd want a relative path. Options 1 and 2 are much better suited for that.

---

Like I said, I can't give you the specific answer if I don't know your folder structure. If you update your question, I could update my answer further.

Complete list of reasons why a css file might not be working

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

2. (If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?

Github not loading css file when deployed by github pages

Maybe because the folder is CSS/styles.css and your declaration in index.html is css/styles.css?

---

Related Topics