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 CSS Basics (2014) Basic Selectors ID Selectors

Spencer Renfro
PLUS
Spencer Renfro
Courses Plus Student 11,133 Points
Posted by Spencer Renfro
Spencer Renfro
Courses Plus Student 11,133 Points

When I write in the CSS page for the ID selector, the selector value stays red. EX: #primary-content

I could not get the red border to appear, nor could I get the bottom border on the footer to appear. The content I write in the CSS page stays red on the ID selector, for the selector value. Below is what I wrote out but the #primary-content, and the #main-footer are highlighted red. I have matched the ID selectors in HTML with the same names.

#primary-content{ border: 3px solid red; }

#main-footer { padding-top: 60px; padding-bottom: 60px; border-bottom: solid 10px orange; }

Mark Sebeck
Mark Sebeck
Treehouse Moderator 38,105 Points
Mark Sebeck
Mark Sebeck
Treehouse Moderator 38,105 Points

Could you post all of your style.CSS? What you have looks right but you may have a typo above that is causing an error. Like maybe forgot to close a bracket?

Spencer Renfro
Spencer Renfro
Courses Plus Student 11,133 Points
Spencer Renfro
Spencer Renfro
Courses Plus Student 11,133 Points

body{ color: #878787; margin: 0; }

.main-header { background-color: orange; }

h1{ font-size: 90px; color: white; }

h2{ font-size: 53px; }

h3{ font-size: 20px; color: #48525c;

.primary-content{ text-align: center; }

.secondary-content { border-top: 2px solid lightgrey; }

#main-footer { padding-top: 60px; padding-bottom: 60px; border-bottom: solid 10px orange; }

Spencer Renfro
Spencer Renfro
Courses Plus Student 11,133 Points
Spencer Renfro
Spencer Renfro
Courses Plus Student 11,133 Points

This is the HTML for the related footer.

<footer id="main-footer">
        <p>All rights reserved to the state of <a href="#">California</a>.</p>
        <a href="#top">Back to top &raquo;</a>
    </footer>

</body> </html>

1 Answer