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 Responsive Web Design and Testing Adding Breakpoints for Devices

Matt Varner
Matt Varner
5,373 Points
Posted by Matt Varner
Matt Varner
5,373 Points

Why is the syntax 'background: navy;' and not 'background-color: navy;' in the responsive design body color example?

@media screen and (min-width: 480px) {
  body {
    background: navy;
  }
}

I want to make sure I'm not missing something other than a (seemingly) obvious "well, it was just a throwaway code to help you see the difference when coding for different layout widths and we weren't thinking you were going to get hung up on it, especially since we told you we'd be deleting it later."

I mean, is there one kind of CSS syntax for @media queries and one for all other CSS declarations...or does it just seem like there could be two separate sets?

1 Answer

Andrew Dushane
Andrew Dushane
9,264 Points
Andrew Dushane
Andrew Dushane
9,264 Points

background is shorthand for several background properties, including color, url, repeat, position etc. You can define them one at a time using background-color: background-repeat: etc. Or you can combine them all into one using background: This works for CSS inside or outside a media query.

The official documentation is at: http://www.w3.org/TR/CSS21/colors.html#background