From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Using media queries - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Using media queries
Media queries allow you to determine which styles are applied to pages based on specific media properties, such as screen width, color, or resolution. Now, if you're familiar with using the media attribute to apply styles for screen devices, print, projection, that sort of thing, then media queries are going to feel very natural to you, because they're just an extension of existing media capabilities. So to kind of show you what media queries are capable of, I have the media-queries.htm file open from the 07_02 folder. And I want to preview this page in the browser real quick, so we can do a quick rundown of the syntax before we actually start using them. So the basic syntax you can see in the first block of code here, basically after whatever media declaration you are doing, you can put before it, you can put two keywords, optional keywords: not or only. Not will negate everything that comes after it, so it's sort of testing to see what isn't true, and then only is designed basically…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
(Locked)
Responsive layout overview3m 49s
-
(Locked)
Using media queries7m 16s
-
(Locked)
Organizing styles8m 39s
-
(Locked)
Making content responsive8m 33s
-
(Locked)
Mobile design considerations7m 32s
-
(Locked)
Building responsive layouts: Lab4m 23s
-
(Locked)
Building responsive layouts: Solution9m 24s
-
(Locked)
-
-