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

Posted by Dylan Clark
Dylan Clark
2,854 Points

Footer ID not working.

EDIT: I figured it out, leaving the discussion for those experiencing similar problems

I am trying to get the footer id to include the padding and border, when I preview the work space nothing changes on the footer. Here's the HTML:

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

And here is the CSS:

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

Thanks!

Dylan Clark
Dylan Clark
2,854 Points

<footer id="main-footer"> in the HTML, figured it out myself.

Sometimes it's a good idea to look at your code outside of your text editor/workspace.

Dwayne Kutz
Dwayne Kutz
1,397 Points

padding has a shorthand notation as follows;

padding: 60px;
/* top right bottom left all will be 60px */
padding: 60px 0px;
/* top and bottom will be 60px left and right will be 0px */

This way you dont need to use 2 rules to change one property. (https://www.w3schools.com/css/css_padding.asp) Margin and border also work using shorthand notation.

1 Answer

Brendon Butler
Brendon Butler
4,254 Points
Brendon Butler
Brendon Butler
4,254 Points

As you said, you have already resolved your own issue, and checking your work externally can usually help identify your issues. I use this CSS Validator to check for issues. Just copy and paste your CSS into the box and click "Check." Then it will spit out any errors or issues neatly and with a short description.

Dylan Clark
Dylan Clark
2,854 Points

I'll definitely be adding that to my toolbox!! Thanks.