Web Development

Media Types as Selectors

Media Type as Selectors
Written by Sandeep Likhar

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;
}
}
[/code]

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.

WHAT’S NEXT?

Let’s explore Attribute Selector.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

3 Comments on "Media Types as Selectors"

Notify of
avatar
Sort by:   newest | oldest | most voted
Rony
Guest

Great info. Lucky me I came across your website by accident (stumbleupon).

I have book-marked it for later!

Kenneth Fernando
Guest

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.
Cheers!

Brandi Bounds
Guest

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.

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW