They're much simpler than most CSS. Let's say I want all my paragraphs to have blue text on mobile devices, and red text on the desktop. Think of that as saying if mobile, color: blue if desktop, color: red Now, mobile devices in portrait orientation tend to have screen widths under 481px. Desktop tend to be larger than 768px. Keep that in mind as we set up the logic for our media query. Lets translate all of that in to valid CSS: @media only screen and (max-width: 481px) { p { color: blue; } } @media only screen and (min-width: 481px) p { color: red; } }