Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Media types and media queries

From: CSS Fundamentals

Video: Media types and media queries

One of the great benefits of using HTML and CSS to separate presentation and structure is the ability to present the same content in different ways to different devices. CSS allows us to do that through the use of media types. In this movie, I want to take a closer look at media types and their recent extension, media queries. Media types allow you to control which styles are served to a user agent, based on that user agent's device type. This means that you can send one set of styles to screen devices, another set to a printer, and yet another set to a screen reader.

Media types and media queries

One of the great benefits of using HTML and CSS to separate presentation and structure is the ability to present the same content in different ways to different devices. CSS allows us to do that through the use of media types. In this movie, I want to take a closer look at media types and their recent extension, media queries. Media types allow you to control which styles are served to a user agent, based on that user agent's device type. This means that you can send one set of styles to screen devices, another set to a printer, and yet another set to a screen reader.

This ability allows you to change the design of your site based on the context of where it's viewed, or restrict the use of certain media-specific styles, like page breaks, to the devices that understand them. You can choose between three different types of syntax when declaring media types. First, you can use the @media blocks to group media-specific styles together. This allows you to have multiple sets of styles within a single style sheet. You can also use media types with the @import rule.

You simply declare the media type after the location of the external style. The third and probably most common syntax for declaring media types is actually part of HTML. When using a link tag to link to an external style sheet, you can use the media attribute to specify which media type, or types, that you want to styles to apply to. Now, as you can see in the syntax, you can assign more than one media type of styles through using a comma-separated list. So what media types are available? Well, currently, we have all, which tells all user agents to apply the styles; braille for tactile feedback devices; embossed, which is intended for paged Braille printers; handheld for mobile devices; print for printers; projection for projected presentation devices; screen for screen devices; speech for speech synthesizers, such as screen readers; tty for teletypes or terminals; and finally, tv for televisions.

Now truthfully, you probably won't use very many of these and support for the media types isn't universal. Many mobile devices, for example, choose to support the screen media type, rather than handheld, due to the browsing capabilities of those devices. Still, being able to have your site display one way on screen while controlling how the content prints and giving extra information to assisted devices is an amazingly powerful capability for designers to have. The other benefit we gain from media types is their forward-looking nature.

As new devices come online, those media types can be added to the specification, and media specific properties can be created to help control how content is displayed or presented on those devices. As I mentioned earlier though, sometimes media types alone can't give us the control we need over how content displays on various devices. The rise of smartphones and tablets have created a segment of mobile devices that are increasingly being used to consume online content but that only offer inconsistent support for the handheld media type, preferring to support the screen media type.

That means that these devices with their much smaller screen sizes would render the page using the same styles that are used for desktop browsers. To help deal with this, CSS3 introduced media queries. Media queries combine with media types and allow you to apply a little conditional logic along with the media type itself, so that you can filter when styles are applied, based on things like width and height, orientation, and color. Let's dig into media queries a little deeper by taking a look at the syntax. First, you can use the optional "only" or "not" keywords to filter out your media queries.

"Only" is simply used to filter out media queries from being applied by non-supporting devices. Conforming agents are just told to ignore it, so you're only going to use it if you're trying to hide the media query styles from older browsers. The "not" keyword negates the entire media query, so the styles would apply to devices that do not meet the media query expression. From there, you move on to declaring the media type as normal. You can then use the "and" keyword to add as many as expressions as you'd like.

Now these expressions allow you to check for certain media features, and even allow you to check for ranges of values. Here is a list of the current media features. Time is going to prevent me from going into all of these media types in more detail in this course, but it's worth noting that many of them deal with techniques that we're likely to use in the future, or deal with features that aren't widely supported yet. Other features, like width and height, are supported currently, and even allow you add a minimum and a maximum prefix to set upper or lower limits on those values.

Let's take a look at a more specific example of syntax to see how you might use this in action. So here we have the media query that's to be applied if the media device type is screen and the width of the screen is between 0 and 480 pixels. This would be ideal for targeting mobile devices for smaller screens, as it would limit those styles from being applied unless these conditions were met. Although media queries are still relatively new, they are widely supported among modern browsers and mobile devices, so many designers are beginning to add them to their styles right now.

So media types allow us to control when styles are applied based on the type of device being used by the client. Media queries allow us to further refine that process by creating a more narrow focus for when styles are used by various media types. What this means for you as a designer is that now you have an amazing amount of control over how your site is viewed by multiple devices and how the user sees and interacts with your content.

Show transcript

This video is part of

Image for CSS Fundamentals
CSS Fundamentals

36 video lessons · 67989 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.