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 Daniel Wilson
Daniel Wilson
2,327 Points

Stylesheets aren't linking to my HTML

Hello,

My CSS stylesheet isn't linking to my HTML anymore and the icon on my page is broken. I've been having folder path problems, but I don't think that is wrong since my code checks out. I have no idea what's wrong here. Here is my code so far.

<!DOCTYPE html> <html> <head> Camp Cedar Knoll <meta charset="utf-8"> <title> Camp Cedar Knoll</title> <link rel="stylesheet" href="camp cedar knoll/css/normalize.css"> <link rel="stylesheet" href="camp cedar knoll/css/main.css"> </head> <body> <nav> <ul> <li> About</li> <p>A Christ-Centered Overnight Summer Camp Owned and Operated by the Bethany Baptist Association of Southern NJ Accredited by the American Camping Association

                        We treat our campers to awesome lifetime experiences in a wholesome Christian environment! We have four weekly programs that include Christian Education for children ages 6 to14. We explore a variety of activities such as: youth church services, arts & crafts, swimming, canoeing, kayaking, paddle boats, archery, sports, and off-site adventures!

                        Children will arrive Sunday afternoon and get an orientation for the week ahead. Children will spend their nights in air-conditioned dorms for a comfortable sleep. They will   also have three nutritious meals a day plus snacks. Each session ends with a Friday evening closing service featuring the children and staff.
                            On the campsite, we have trained counselors, certified lifeguards, and a wellness center with a licensed nurse.</p>
                    <li> Phone</li>
                        <p>(609) 933-5399</p>
                    <li>Email</li>
                        <p>campcedarknoll@hotmail.com</p> 
                    <li>Activities</li> 
                        <p>WEEKLY CAMP THEMES
                    <li>JULY 13-18: Splashing At Clementon</li>
                    <li>JULY 20-25: We’re Climbing the Walls</li>
                    <li>JULY 27- AUGUST 1: A Strike Down the Alley</li>
                    <li>AUGUST 3-8: Up On Your High Horse</li>

                    <p>REGISTER YOU CHILD NOW! For only $250 a week per camper or $200 a week per camper if you register 5 children or more. You can pick whichever of the above listed weeks that you prefer.
                    </p>

                    FRIEND US ON: Camp Cedar Knoll Bethany</p>
                </ul>
                <footer>
                    <a href="http://facebook.com/BethanyCampCedarKnoll/"><img src="camp cedar knoll/img/facebook-wrap.png" alt="Facebook Logo"></a>
                    <p> &copy; 2016 Bethany Baptist Association</p>
                </footer>
            </nav>
        </body>
        </html>

And here is my CSS

body{ background-color: #6ab47b;

}

footer{ background-color:gold; padding-bottom:110px;

}

3 Answers

Vince Brown
Vince Brown
16,249 Points

Hey Daniel,

After looking over your code looks like you are having file path issues.

This seems to be how you are linking to your css 

<link rel="stylesheet" href="camp cedar knoll/css/normalize.css"> 
<link rel="stylesheet" href="camp cedar knoll/css/main.css">

Those spaces between camp cedar knoll is my guess on what is causing your problem. If your directory is currently named camp cedar knoll try renaming it to camp-cedar-knoll

and then link to your stylesheets with that new directory name

<link rel="stylesheet" href="camp-cedar-knoll/css/normalize.css"> 
<link rel="stylesheet" href="camp-cedar-knoll/css/main.css">
Daniel Wilson
Daniel Wilson
2,327 Points

Thank you for replying Vince. I renamed the file path and it still isn't working.

<!DOCTYPE html> <html> <head> Camp Cedar Knoll <meta charset="utf-8"> <title> Camp Cedar Knoll</title> <link rel="stylesheet" href="camp-cedar-knoll/css/normalize.css"> <link rel="stylesheet" href="camp-cedar-knoll/css/main.css">

And my footer logo still isn't showing up. <footer> <a href="http://facebook.com/BethanyCampCedarKnoll/"><img src="camp-cedar-knoll/img/facebook-wrap.png" alt="Facebook Logo"></a> <p> © 2016 Bethany Baptist Association</p> </footer>

Vince Brown
Vince Brown
16,249 Points

Daniel, Is there a way you can post a snapshot of your folder structure ?

Ex. ) here is a screenshot of the folder structure for my current project. http://cl.ly/3i0l1D1b1i15

Daniel Wilson
Daniel Wilson
2,327 Points
Daniel Wilson
Daniel Wilson
2,327 Points

Vince,

Here is the link to the screenshot http://i.imgur.com/ljaASlP.png

Vince Brown
Vince Brown
16,249 Points

ahh I see now.

Start by renaming your html file CampCedarKnoll to index.html

index.html is the default file that your server will look for.

Once the file is renamed to index.html

Then your link tags will change to

<link rel="stylesheet" href="css/normalize.css"> 
<link rel="stylesheet" href="css/main.css">

your image tag will change to.

<img src="img/facebook-wrap.png" alt="Facebook Logo">

your index, css directory, and img directory should sit in a project directory .

Your final file structure should look something like this

http://cl.ly/1k3G2s0D0P3j

Vince Brown
Vince Brown
16,249 Points

This article regarding file paths is something I highly suggest reading, File paths are something you have to wrap your head around at the beginning of your programming journey so now is a good time you are going to use them everyday.

https://www.kirupa.com/html5/all_about_file_paths.htm

Daniel Wilson
Daniel Wilson
2,327 Points
Daniel Wilson
Daniel Wilson
2,327 Points

Vince,

Thank you so much! I was really struggling with this and you came through in a great way. Also thank you for the article as it is very helpful. I learned a very humbling lesson today. Take things slow and learn bit by bit. Don't rush the process. Thanks again. Maybe in the future, we can collaborate on some great projects.

Vince Brown
Vince Brown
16,249 Points

Daniel,

No problem at all! It is always great to give some time back, I can recall when I was in the exact same position just starting off.

You will find It takes hundreds/thousands hours to start to feel like you are getting the hang of development which seems daunting but if you look closer you will find that you are improving every day you code.

You will notice no matter how much you grow you find yourself looking back at work from a month ago thinking Did I really do that ! What was I thinking ?

It definitely is a fun process, don't forget to enjoy the little wins along the way and give back to the community when you can.

cheers.