Layout Techniques - Jump Start CSS - page 45

@media (max-width: 1500px) {
}
@media (max-width: 1200px) {
}
@media (max-width: 900px) {
}
What you see above are referred to in CSS as at-rules . There are other at-rules (identified by
the @ symbol,) such as the @font-face rule, which we'll talk about in Chapter 4 .
The @media at-rules are used to define different CSS styles depending on certain media fea-
tures, such as the width of the browser window. Inside the @media blocks, (each of which
starts and ends with the opening and closing curly braces,) you can include full rule sets. You
can even repeat certain rule sets in separate media query blocks in order to override existing
styles.
In Chapter 5 , once we have the bulk of the site done, we'll add some custom media queries
to make the RecipeFinder website responsive.
Using box-sizing for Intuitive Sizing
Normally, when an element is given a specified width—for example, our .main element has
a width of 1020px—if you add left or right padding to that element, the width of the element
would increase by the amount of left and right padding that was added. Look at the following
example:
.box {
width: 400px;
padding-left: 20px;
padding-right: 20px;
}