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 Matthew Saul
Matthew Saul
11,354 Points

index.html not linking to main.css

I am unable to get the index.html doc to link to my main.css doc within Workspaces. I've checked the code multiple times and can't seem to figure out where I'm going wrong. Here's what I have in Workspaces: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Matthew | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Matthew Saul</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portforlio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>One of the numbers pic</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>The Beautiful Bay Bridge</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Big Sur</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Golden Gate - Unique View</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Sunset - Sailing</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://www.facebook.com/matthew.saul.3"><img src="img/facebook-wrap.png" alt"Facebook Link"></a>
        <p>&copy; 2014 Matthew Saul.</p>
      </footer>
  </div>
</body>
</html>

Any feedback or clarification would be extremely helpful! Thanks!

4 Answers

Scott Magdalein
Scott Magdalein
1,667 Points

Hello Matthew! In your Workspaces, your CSS directory was using all capital letters, but your HTML referenced "css" with all lowercase letters. Not all browsers are case-agnostic, so we've made Workspaces require that you match the case of your directory with the case of your reference.

In this case, the solution would be to change your "CSS" directory name to "css". I've gone into your account, made the change, and verified that the change works.

Hope that helps clarify some things. Cheers!

Brandon Fallin
PLUS
Brandon Fallin
Courses Plus Student 4,055 Points
Brandon Fallin
Brandon Fallin
Courses Plus Student 4,055 Points

All you need to do is have the following code within the head of your html document. It should look something like this:

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='main.css'/>
</head>
<body>
</body>
</html>

Make sure that the "href" attribute is set to the name of your css file. Happy Coding!

Jonathan Sibley
PLUS
Jonathan Sibley
Courses Plus Student 5,437 Points
Jonathan Sibley
Jonathan Sibley
Courses Plus Student 5,437 Points

Can you post the code in the forum?

Matthew Saul
Matthew Saul
11,354 Points

I posted the code in the forum...I can see can see that it didn't carry over. Here it is again below:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Matthew | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Matthew</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portforlio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>One of the number pics</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>The Beautiful Bay Bridge</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Big Sur</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Golden Gate - Unique View</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Sunset - Sailing</p> </a> </li> </ul> </section> <footer> <a href="https://www.facebook.com/matthew.saul.3"><img src="img/facebook-wrap.png" alt"Facebook Link"></a> <p>© 2014 Matthew</p> </footer> </div> </body> </html>

Matthew Saul
Matthew Saul
11,354 Points
Matthew Saul
Matthew Saul
11,354 Points

Great! Thanks for doing that! Problem solved.