Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Melissa Wright
Melissa Wright
4,726 Points

I want to make an html folder to hold all of my html files, but the css style no longer recognizes them.

I have about 10 html files, so I wanted to make an html folder just like my img folder to stay organized. I did not put the index.html file into the folder but I put all of my other html files in it. The CSS style no longer shows up when I click on links via my site. How can I organize my html files and get them to still show CSS styling?

<nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="html/about.html" class="selected">About</a></li> <li><a href="html/contact.html">Contact</a></li> <li><a href="html/resume.html">Resume</a></li> </ul> </nav>

Melissa Wright
Melissa Wright
4,726 Points

I've referenced them like this.....

"html/about.html"

4 Answers

Alejandra Cuesta Monrroy
Alejandra Cuesta Monrroy
11,447 Points

I think that it because, since you change the position of the html files, now you have to change the href in the link inside of the html files. If you have the CSS style in a folder too, should be:

So you need to put ../nameofthefolder/cssstylefile

Cody Coats
Cody Coats
7,469 Points
Cody Coats
Cody Coats
7,469 Points

You'll need to use relative file paths.

If your structure is like this:

index.html foo.css html about.html css bar.css

in your index.html to reference the css files it would be: foo.css css/bar.css

in your about.html to reference the css files it would be: ../foo.css ../css/bar.css

Melissa Wright
Melissa Wright
4,726 Points
Melissa Wright
Melissa Wright
4,726 Points

In my about page I have linked to the css page like this

// link rel="stylesheet" href="css/main.css" // (obviously without the dashes)

From the index.html I have linked to my about page like this

// a href="html/about.html">About</a> //

Are you saying I need to write code to get out of the folder I'm in.... go back to the root folder and then into the html folder using ../ like this??

a href="../html/about.html">About</a>

Melissa Wright
Melissa Wright
4,726 Points
Melissa Wright
Melissa Wright
4,726 Points

Awesome, got it.... so EVERY time I reference another folder I have to put ../ in front in order to 'get out of the folder I'm in and back to the root folder. Thanks, it's working!