Media Types as Selectors

Media Type as Selectors

Media Types as Selectors is the section 25 of Beginner’s Guide to CSS.

We are back with digging into CSS selectors. This time what we are discussing is, setting the content for different kind of media devices and publications. Simply making the same content with different layouts for different media appropriately. To make it  more clarify I would say a website can have a different layout for screen, print, mobile phone, tablet, etc. And we are making the same content for all those layouts in the same HTML document. 

Some CSS properties are only designed for a certain media. For example the “voice-family” property is designed for aural user agents. Screen readers used by blind people is a one kind of aural user agent. This voice family property will not be useful to people who just view the web page through a web browser.

Some other properties can be used for different media types. For example, the “font-size” property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.

Media Rule

The CSS @media rule allows different style rules for different media in the same style sheet. The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 20 pixels font, and in a red color. To see the printed version view this page through the print preview. You will see that the text will be displayed in a larger font size, and in red color.

[code language=”css”] @media screen {
p.my_media_para {
font-family: verdana,sans-serif;
font-size: 14px;

@media print {
p.my_media_para {
font-size: 20px;
color: red;

See the difference of this paragraph in the web browser screen and the print preview.

Following are the different kind of media rules that can be added into a HTML web page.

Media Type Description
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices

We covered a important topic in this section. Really very useful information if you are a content developer for multiple user device base. Next section will be our last topic in CSS selectors as well as the last section in our CSS Tutorial.


Let’s explore Attribute Selector.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.


Leave a Reply
  1. Hi there, I found your website via Google at the same time as
    searching for a comparable topic, your website got here up, it appears to be like great.
    I have bookmarked it in my google bookmarks.
    Hello there, simply became alert to your weblog via Google, and located that it’s really informative.
    I am gonna watch out for brussels. I will be grateful should you proceed
    this in future. A lot of folks might be benefited from your writing.

  2. I’m very happy to discover this great site. I wanted to thank you for your time due to this wonderful read!!

    I definitely liked every little bit of it and I have you saved
    as a favorite to check out new things on your site.

Comment Below