HTML Not Loading CSS

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)?

Live-server not loading css file

The reason this happens we can see from the live-server docs:

The server is a simple node app that serves the working directory and
its subdirectories.

If a file is stipulated instead of a directory, or the directory does not contain the assets to be loaded by live-server, it will result in a 404. However, in the default settings for live-server, in the event of a 404, it will default to trying to read index.html which causes a MIME type error that it is trying to load "text/html" for many people facing this confusion.

In general, when using live-server, try to create a public or dist directory that you plan to hold all your static content. Here is an example directory structure that is compiling typescript to a dist/js directory and sass to a dist/css directory:

.
├── dist
│   ├── css
│   │   └── index.css
│   ├── index.html
│   └── js
│       └── index.js
├── package.json
├── src
│   ├── app.ts
│   ├── index.ts
│   └── sass
│       └── main.scss
└── yarn.lock

You can then run "live-server dist" -- the key factor being I'm not asking live-server to look outside of the directory it is serving.

Here is the live-server documentation for more information about configuration options

---

Related Topics