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

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:

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:

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