Google Choice: CSS - Media Types

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.
💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.
🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.
🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.
✔ Latest world News

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

Wednesday, February 15, 2017

CSS - Media Types

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.
We have currently two ways to specify media dependencies for style sheets −

Specify the target medium from a style sheet with the @media or @import at-rules.
Specify the target medium within the document language.

The @media rule

An @media rule specifies the target media types (separated by commas) of a set of rules.
Given below is an example −

<style tyle="text/css">
   <!--
   @media print {
      body { font-size: 10pt }
   }
 
   @media screen {
      body { font-size: 12pt }
   }
   @media screen, print {
      body { line-height: 1.2 }
   }
   -->
</style>

The Document Language

In HTML 4.0, the media attribute on the LINK element specifies the target media of an external style sheet −
Following is an example −

<style tyle="text/css">
   <!--
   <!doctype html public "-//w3c//dtd html 4.0//en">
 
   <html>
 
      <head>
         <title>link to a target medium</title>
         <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
      </head>
  
      <body>
         <p>the body...
      </body>
  
   </html>
   -->
</style>

Recognized Media Types

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. They give a sense of what device the media type is meant to refer to. Given below is a list of various media types −

Value	Description
all	Suitable for all devices.
aural	Intended for speech synthesizers.
braille	Intended for braille tactile feedback devices.
embossed	Intended for paged braille printers.
handheld	Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
print	Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.
projection	Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media.
screen	Intended primarily for color computer screens.
tty	Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
tv	Intended for television-type devices.

NOTE − Media type names are case-insensitive.

পৃষ্ঠাসমূহ

Labels

Search Your Article

CS