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 How to Make a Website CSS: Cascading Style Sheets What is CSS?

Posted by Ben Witkins
Ben Witkins
469 Points

Preview Is Not Working

When I preview my work, it is not reflecting the changes I make.

For example, when I attempt to change the background to orange using main.css and/or remove the underlines (text-decoration: none;), the changes are not being reflected on my preview.

Further, my footer is still orange despite having deleted the corresponding HTML code from index.html.

Any suggestions appreciated. i'm totally confused.

6 Answers

Kristen Law
Kristen Law
16,244 Points
Kristen Law
Kristen Law
16,244 Points

Can you post your code? Are you saving your file after each edit you make?

Ben Witkins
Ben Witkins
469 Points
Ben Witkins
Ben Witkins
469 Points

Thanks for the reply, Kristen. Yes, I am saving after each edit.

Here is my index.html code (main.css code follows):

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ben Witkins | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Ben Witkins</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <a href="IMG/numbers-01.jpg"> <img src="IMG/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="IMG/numbers-02.jpg"> <img src="IMG/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="IMG/numbers-06.jpg"> <img src="IMG/numbers-06.jpg" alt=""> <p>Trying to create an 80's-style of glows.</p> </a> </li> <li> <a href="IMG/numbers-09.jpg"> <img src="IMG/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="IMG/numbers-12.jpg"> <img src="IMG/numbers-12.jpg" alt=""> <p>Creating shapes using repitition.</p> </a> </li>

  </ul>
</section>
<footer>
  <a href="http://twitter.com"><img src="IMG/twitter-wrap.png" alt="Twitter Logo"></a>
  <a href="http://facebook.com"><img src="IMG/facebook-wrap.png" alt="Facebook Logo"></a>
  <p>&copy; 2014 Ben Witkins.</p>
</footer>

</body> </html>

Here's my main.css code:

a { text-decoration: none; }

Kristen Law
Kristen Law
16,244 Points

Use this to format your code: https://teamtreehouse.com/forum/posting-code-to-the-forum

Kristen Law
Kristen Law
16,244 Points

Use the formatting for code blocks, three back ticks before and after your code: (the back tick key is the same is the ~ key.. it should be underneath the esc key)

```
your code here
```

Ben Witkins
Ben Witkins
469 Points
Ben Witkins
Ben Witkins
469 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ben Witkins | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Ben Witkins</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <ul>
        <li>
          <a href="IMG/numbers-01.jpg">
            <img src="IMG/numbers-01.jpg" alt="">
            <p>Experimentation with color and texture.</p>
          </a>
        </li>
        <li>
          <a href="IMG/numbers-02.jpg">
            <img src="IMG/numbers-02.jpg" alt="">
            <p>Playing with blending modes in Photoshop.</p>
          </a>
        </li>
        <li>
          <a href="IMG/numbers-06.jpg">
            <img src="IMG/numbers-06.jpg" alt="">
            <p>Trying to create an 80's-style of glows.</p>
          </a>
        </li>
        <li>
          <a href="IMG/numbers-09.jpg">
            <img src="IMG/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
          </a>
        </li>
        <li>
          <a href="IMG/numbers-12.jpg">
            <img src="IMG/numbers-12.jpg" alt="">
            <p>Creating shapes using repitition.</p>
          </a>
        </li>

      </ul>
    </section>
    <footer>
      <a href="http://twitter.com"><img src="IMG/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="http://facebook.com"><img src="IMG/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2014 Ben Witkins.</p>
    </footer>
  </body>
</html>
Ben Witkins
Ben Witkins
469 Points
Ben Witkins
Ben Witkins
469 Points

Sorry about that... Here is main.css

a {
  text-decoration: none;
}
Kristen Law
Kristen Law
16,244 Points
Kristen Law
Kristen Law
16,244 Points

I don't see any issues with your code. Did you make sure your main.css file is inside the css folder? Are you pressing the preview button after each code change and file save? Have you tried refreshing the webpage? What browser are you using?

Ben Witkins
Ben Witkins
469 Points
Ben Witkins
Ben Witkins
469 Points

You are fantastic, Kristen! I was using a browser (Safari) which wasn't compatible. I switched to FireFox and everything looks good.

Thanks so much!

Kristen Law
Kristen Law
16,244 Points

No problem, glad you got it figured out! Happy coding!