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

Reza Sorasti
Reza Sorasti
491 Points

One more question on the course How To Make A website.

At the end of this video: https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/adding-breakpoints-for-devices, the instructor says, "By taking advantage of style cascades, we can write only the CSS that’s different from the previous size, rather than rewriting everything." Do you guys know what he means by that?

1 Answer

Michael Hulet
Michael Hulet
47,912 Points

In this case, he's talking about overriding styles based on media queries. By taking advantage of the way CSS is rendered, we can write code for one size and then just change what we need for different sizes. Say we have lots of styles for all the div elements on a page:

style.css
div{
    height: 500px;
    width: 500px;
    color: #000;
    background-color: #fff;
    font-family: sans-serif;
    position: absolute;
    top: 50px;
    left: 100px;
    margin: 20px;
    margin-right: 5px;
    padding: 50px;
    padding-top: 10px;
    padding-bottom: 5px;
    border: 5px solid #f00;
}

If the viewport's width is greater than 750px, we want all the div elements to be exactly the same, except we want it to be 100px wider. With a poorly-written CSS file, it's possible that we'd have to write all that again. However, if we take advantage of the fact that CSS is rendered from top to bottom, and only the bottommost style that applies gets rendered, we can change only the property we want without having to type anything else again. Using this fact, the task I described can be accomplished just by putting this under everything above:

style.css
@media(min-width: 750px){
    div{
        width: 600px;
    }
}