External CSS is not working when linked with HTML

Question

I'm new to programming and I've encountered some trouble linking external CSS with my HTML file. I've looked around and it appears that there may be a problem with the hierarchy of my index.html and css file/folder, but I've played around with it and don't know how to fix my problem. Any suggestions would be great!

enter image description here

../css/styles.css is the path you need because your index.html is in a directory. — disinfor
– disinfor, Commented Jun 7, 2021 at 22:01
@lou415, the comments here are correct, but please check my answer for a more detailed explanation — user14550434
– user14550434, Commented Jun 7, 2021 at 22:25
@lou415: Welcome to stackoverflow! Please do not include your code in images. Use code blocks for that. — Klaassiek
– Klaassiek, Commented Jun 8, 2021 at 0:40

user14550434 · Accepted Answer · 2021-06-07 22:24:46Z

0

In your HTML file, you link to the relative path css/styles.css as your stylesheet. This is an explanation of how to get the right path.

A relative path links to a file relatively to the current file. Think of it like a physical path - you need to follow it to get from one place to another. These are how you navigate a relative path:

folder/aaaa - Enter the directory called "folder" and look for "aaaa".
../ - Go back one directory - if I'm in folder1/folder2/, I'm going to folder1/.

(this is somewhat oversimplified)

Your directory structure looks like this:

Web Development/
├─ Bouldering/
│  ├─ ContactMe.html
│  ├─ index.html
├─ css/
│  ├─ styles.css

Again, think of the path as a route to your destination. In this case, you are coming from Web Development/Bouldering/index.html to Web Development/css/styles.css.

Go from Web Development/Bouldering/ to Web Development/ - Your path is ../
Go from Web Development/ to Web Development/css/ - Your path is ../css/
Look for styles.css - Your final, complete relative path is ../css/styles.css.

Lastly, change your link element from your HTML:

...
<head>
  <meta charset="UTF-8">
  <title>Bouldering Website</title>
  <link rel="stylesheet" href="../css/styles.css"> <!-- Fixed it! -->
</head>
...

answered Jun 7, 2021 at 22:24

user14550434

Sign up to request clarification or add additional context in comments.

1 Comment

disinfor Over a year ago

This is good information, but there's already an answer with this info: stackoverflow.com/questions/27218879/…

Collectives™ on Stack Overflow

External CSS is not working when linked with HTML

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related