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 Edward Hong
Edward Hong
15,431 Points

id selectors in CSS

Here's my code:

        <section id="portfolio">
          <ul id="gallery">
            <li>
                <a href="../Random_Quote_Generator/Random_Quote_Generator.html">
                   <img src="Images/rqmThumb.jpg" alt="Random Quote Machine">
                   <p>Random Quote Machine</p>
               </a>
            </li>
            <li>
                <a href="Images/Placeholder Gallery Thumbnail.jpg">
                   <img src="Images/Placeholder Gallery Thumbnail.jpg" alt="Placeholder Thumbnail" alt="Placeholder Thumbnail">
                   <p>Placeholder caption</p>
               </a>
            </li>
            <li>
                <a href="Images/Placeholder Gallery Thumbnail.jpg">
                   <img src="Images/Placeholder Gallery Thumbnail.jpg" alt="Placeholder Thumbnail" alt="Placeholder Thumbnail">
                   <p>Placeholder caption</p>
               </a>
            </li>
            <li>
                <a href="Images/Placeholder Gallery Thumbnail.jpg">
                   <img src="Images/Placeholder Gallery Thumbnail.jpg" alt="Placeholder Thumbnail" alt="Placeholder Thumbnail">
                   <p>Placeholder caption</p>
               </a>
            </li>
            <li>
                <a href="Images/Placeholder Gallery Thumbnail.jpg">
                   <img src="Images/Placeholder Gallery Thumbnail.jpg" alt="Placeholder Thumbnail" alt="Placeholder Thumbnail">
                   <p>Placeholder caption</p>
               </a>
            </li>
            <li>
                <a href="Images/Placeholder Gallery Thumbnail.jpg">
                   <img src="Images/Placeholder Gallery Thumbnail.jpg" alt="Placeholder Thumbnail" alt="Placeholder Thumbnail">
                   <p>Placeholder caption</p>
               </a>
            </li>
          </ul>
        </section>
        <section id="about">
            <p>
                Hi I'm Edward and I'm currently studying HTML, CSS and Javascript to become a web designer/developer
            </p>
        </section>

and the css:

#portfolio {
  background: black;
}

#about {
  background: blue;
}

}

For some reason both sections have blue backgrounds. Can anyone please help?

Clayton Perszyk
Clayton Perszyk
Treehouse Moderator 49,057 Points
Clayton Perszyk
Clayton Perszyk
Treehouse Moderator 49,057 Points

Hey Edward,

I'm unsure why your code isn't doing what you expect; the only error with the code is the extra curly brace at the the end of your CSS code. Where are you currently testing that your code works (e.g. the browse, workspace, etc.).? When I open the following code in the browser, even if I include the additional curly brace, it produces the desired result (i.e. a blue and a black background): 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      #portfolio {
        background: black;
      }

      #about {
        background: blue;
      }
    </style>
  </head>
  <body>
    <section id="portfolio">
       <ul id="gallery">
         <li>
             <a href="../Random_Quote_Generator/Random_Quote_Generator.html">
                <img src="Images/rqmThumb.jpg" alt="Random Quote Machine">
                <p>Random Quote Machine</p>
            </a>
         </li>
         <li>
             <a href="Images/Placeholder Gallery Thumbnail.jpg">
                <img src="Images/Placeholder Gallery Thumbnail.jpg" alt="Placeholder Thumbnail" alt="Placeholder Thumbnail">
                <p>Placeholder caption</p>
            </a>
         </li>
         <li>
             <a href="Images/Placeholder Gallery Thumbnail.jpg">
                <img src="Images/Placeholder Gallery Thumbnail.jpg" alt="Placeholder Thumbnail" alt="Placeholder Thumbnail">
                <p>Placeholder caption</p>
            </a>
         </li>
         <li>
             <a href="Images/Placeholder Gallery Thumbnail.jpg">
                <img src="Images/Placeholder Gallery Thumbnail.jpg" alt="Placeholder Thumbnail" alt="Placeholder Thumbnail">
                <p>Placeholder caption</p>
            </a>
         </li>
         <li>
             <a href="Images/Placeholder Gallery Thumbnail.jpg">
                <img src="Images/Placeholder Gallery Thumbnail.jpg" alt="Placeholder Thumbnail" alt="Placeholder Thumbnail">
                <p>Placeholder caption</p>
            </a>
         </li>
         <li>
             <a href="Images/Placeholder Gallery Thumbnail.jpg">
                <img src="Images/Placeholder Gallery Thumbnail.jpg" alt="Placeholder Thumbnail" alt="Placeholder Thumbnail">
                <p>Placeholder caption</p>
            </a>
         </li>
       </ul>
     </section>
     <section id="about">
         <p>
             Hi I'm Edward and I'm currently studying HTML, CSS and Javascript to become a web designer/developer
         </p>
     </section>
  </body>
</html>

Best,

Clayton

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Edward,

Is there more css? Are you floating your list items?

1 Answer

jared eiseman
jared eiseman
29,023 Points
jared eiseman
jared eiseman
29,023 Points

What Jason hinted at asking about the rest of your CSS and if you have floated objects. I wonder the same thing. Your portfolio section could be collapsing due to lack of clearfix.