Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website CSS: Cascading Style Sheets Use ID Selectors

main.css isn't "working".

I'm following the course, and we've created main.css in our css folder. Then we added the code for using the main.css file

<html> <head> <meta charset="utf-8"> <title>Cheryl Zuckerman</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">

The next step was in main.css to set the background-color: orange; and save the file, then refresh the browser page. For me, nothing happened.

Then we took out the orange background, and changed our anchor links to not have an underline-- (in the main.css file) a { text-decoration: none; }

OK... did that, saved the file (made sure index.html was saved too), and previewed, nothing happened. I'm following along as he goes, and typing exactly what he types. Wondering what I've missed here!!

Owa Aquino
Owa Aquino
19,277 Points

Hi Cheryl!

I was wondering where you have added the "background-color: orange;" rule? Inside a class or ID? or any html elements?

If you could share your code here. That would be great.

Owa

2 Answers

Very strange... I continued to follow the tutorial, and centered the text, and now it's working the way it should have been! And the quiz has me doing the exact same things as I did while watching the tutorial, and 100%.

Owa, Thanks for whatever you did (or didn't do) :)

Our first task was to take out the underlines in our anchor links. That's when I realized I had a problem (underlines are still there). I kept following (to keep up) and created the <div id="wrapper"> and closed it at the bottom after the footer as instructed. I'm not getting any of this to work. main.css is spelled the same both in my folder tree on the left, and in my index.html code. That would be the obvious error, but I'm not seeing where the error is.

Here's what I have in main.css:

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  background: orange;
}

=========== Below is the complete index.html code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cheryl Zuckerman</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Cheryl Zuckerman</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>
    <div id="wrapper">
      <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 80s style of glows.</p>
            </a>
          </li><li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created with Photoshop brushes.</p>
            </a>
          </li><li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/cztech"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="https://www.facebook.com/cheryl.zuckerman"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2016 Cheryl Zuckerman.</p>
      </footer>
    </div>
  </body>
</html>