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 CSS: Cascading Style Sheets Use ID Selectors

Posted by Cheryl Zuckerman
Cheryl Zuckerman
2,188 Points

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
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

Cheryl Zuckerman
Cheryl Zuckerman
2,188 Points

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) :)

Cheryl Zuckerman
Cheryl Zuckerman
2,188 Points
Cheryl Zuckerman
Cheryl Zuckerman
2,188 Points

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>