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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Corey Dineen
Corey Dineen
481 Points

Why is my CSS showing up in my preview? I thought I was following along to a T what Nick was displaying in the lessons.

Even though I moved along a few lessons after my css stopped showing up, I found that was a huge mistake. I've gone back to what main.css looked like before adding in new fonts and tags. my html is displayed below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Corey Dineen | Eater of Pizza</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Corey Dineen</h1>
        <h2>Eater of Pizza</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</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 id="gallery">
          <li>
            <a href="img/oldschooljoe.jpg">
              <img src="img/oldschooljoe.jpg" alt="">
              <p>This man may be eating an iced cream dessert but he is an American hero.</p>
            </a>
          </li>
          <li>
            <a href="img/playoffdirk.jpg">
              <img src="img/playoffdirk.jpg" alt="">
              <p>Some people say that I look like this man. All of these people are correct.</p>
            </a>
          </li>
          <li>
            <a href="img/eatingfoodswithbecca.jpg">
              <img src="img/eatingfoodswithbecca.jpg" alt="">
              <p>I'm getting some help eating here only because I have two slices of some bomb pizza in my hands.</p>
            </a>
          </li>
          <li>
            <a href="img/FFBdraftboard.jpg">
              <img src="img/FFBdraftboard.jpg" alt="">
              <p>How you are supposed to do every fantasy football draft.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>This is Nick's favorite photo so I kept it.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/cdineen"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/corey.dineen"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2015 CMFD.</p>
      </footer>
    </div>
  </body>
</html>

Any help at all would be greatly appreciated. I hope that one day when I get to a certain level, I can help other students starting out as well. Thanks in advance!

-cpd

Shawn Manning
Shawn Manning
2,775 Points
Shawn Manning
Shawn Manning
2,775 Points

I'm sorry I'm not too sure what it is that you're asking. Try and go into more detail.

Corey Dineen
Corey Dineen
481 Points

I have a main.css file that I have worked on, has styling but when I preview, none of the styling that I added in my main.css file shows up at all. I figured that it is probably an html issue but cannot seem to figure out what that issue would be. I had a problem properly posting my question before but I think I should be fixed now

3 Answers

Nikhil Rai
Nikhil Rai
15,391 Points
Nikhil Rai
Nikhil Rai
15,391 Points

Hey,

Please check if the documents are saved in the correct folder and are in the correct syntax.

For example: your index.html is in folder named ABC, therefore, the address is ABC/index.html. Now if you create a folder named CSS, it should be saved in the same area where index.html is saved (in order to use the relative path.) which is ABC.

So, now you can see both index.html and CSS folder in the same place. Now you can save somthing.css in the CSS folder and can access it as follows:

ABC/index.html & ABC/css/something.css

both are at same level. If this is the case, only then you will be able to use the relative paths as described in the tutorials. Hope it helped. Let us know if you still have issues.

Also, while practicing I have notices that if we make any mistake, the page won't be messed up as error. So, you need to make sure that everything is correct according to syntax.

Keep learning, Nikhil Rai

Zach Patrick
Zach Patrick
19,209 Points
Zach Patrick
Zach Patrick
19,209 Points

As long as your css files are in a folder called css everything in the head looks correct. Double check your css to make sure all your styles are in the correct format. It's easy to accidentally end a line without a semi-colon, or spell something wrong, etc.

Paul Ogden
Paul Ogden
7,709 Points
Paul Ogden
Paul Ogden
7,709 Points

Is main.css in the css directory?