Responsive Web Design with HTML5 and CSS3, Second Edition

Using media queries to alter a design

By their very nature, styles further down a cascading style sheet (CSS file to you and me) override equivalent styles higher up (unless styles higher up are more specific). We can therefore set base styles at the beginning of a style sheet, applicable to all versions of our design (or at least providing our 'base' experience), and then override relevant sections with media queries further on in the document. For example, we might choose to set navigation links as text alone in limited viewports (or perhaps just smaller text) and then overwrite those styles with a media query to give us both text and icons at larger viewports where more space is available.

Let's have a look at how this might look in practice ...