13 14 /* Style rules for body */ 15 body { 16

Tablet Media Query

ln Chapter 6, you learned how to create a media query for a tablet viewport and style webpage content for a tablet viewport.

background-color: O#fe9972; 17 }

18

Desktop Media Query

In Chapter 6, you learned how to create a media query for a desktop viewport and style webpage content for a desktop viewport.

19 /* Style rules for mobile viewport */ 20 21 /* Style rule for the header element */ 22 header { 23 24 25 26 27 } |28 29 /* Style rules for the main content 30 main { 31 32 } 1

2

font-family: Verdana, Arial, sans-serif;

Other Media Queries

In Chapter 6, you learned how to create a media queries for large desktop viewports and for print.

margin: 1em; text-align: center;

color: I#341509;

Modify Breakpoints

ln Chapter 6, you learned how to use developer tools to determine an ideal breakpoint for a media query.

*/

padding: 1%;

Dynamic Pseudo-Classes

ln Chapter 6, you learned how to use dynamic pseudo-classes to style navigation links based on their current state.

33 34 article { 35 36 37 38 39 |40 } 41 |42 /* Style rule for the footer element */ |43 footer { 44 45 46 47 }

background-color: I#a22c®2; color: O#ffe5dc;

Gradients

In Chapter 6, you learned how to create a linear gradient. You also learned about radial gradients.

padding: 2%; margin: 2% 1%;

border: 1px solid |#خ0;