HTML5 Digital Classroom

Lesson 13: CSS3 Media Queries and New CSS3 Page Layout Options

In this lesson, you will learn to use CSS3 Media Queries to deliver a variety of page layouts depending on the device or screen width used. Additionally, you’ll gain an understanding of evolving CSS3 techniques that may change the way web pages are designed.

What you’ll learn in this lesson:

• • How to use CSS3 Media Queries
• • Using the CSS3 Grid property
• • Understanding CSS3 Multi-columns and Flexboxes

Starting up

You will work with several files from the HTML5_13lessons folder in this lesson. Make sure you have loaded the HTML5lessons folder onto your hard drive from www.digitalclassroombooks.com/HTML5. See “Loading lesson files” in the Starting Up section of this book.

The role of CSS3 media queries

All web browsers, whether on desktops or mobile devices, communicate with the servers that host the websites you visit and identify themselves with a user agent String. In most cases, this information is never used by the website, but you can add user agent detectors to your web pages. Typically, these detectors are JavaScript code that identify the user agent, for example, Internet Explorer 9, and then change the default behavior of the page based on this information. This lesson does not focus on JavaScript detectors, but on a more recent form of detectors, called CSS3 media queries.

A CSS3 media query examines the ...