We now have a youtube channel. Subscribe!

Css Media types


Hello guys!! afternoon, welcome to this new tutorial on Css. In today's tutorial i want to talk about 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 the paper, with a speech synthesizer, with a braille device, etc.

Here are currently the two ways to specify media dependencies for style sheets:
  • Specify the target medium from a style sheet with the @media or @import at-rule.
  • 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.

Below is a short example:

<style   type="text/css">
     <!--
          @media print  {       
                 body { font-size: 12pt }    
          }

          @media screen  {       
                 body { font-size: 14pt }    
          }

          @media screen, print  {      
                 body { line-height: 1.4 }    
          }
     -->
</style>

You can also read our tutorial post on: Html Formating

The document language:

In HTML 4.0, the media attribute on the link element specifies the target media of an external style sheet:

Below is a short example:

<style   type="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="nova.css">
               </head>

               <body>
                    <p>The body of the document</p>
          </html>
     -->
</style>

You can practice the above code using the Notepad++ for better understanding.

You can also read our tutorial post on: Html Document Structure

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. Following is the 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.

projection

Intended for projected presentations, for example projectors or print to transparencies.

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.

Alright guys we have come to the end of this tutorial on Css media types. Always feel free to ask questions in areas that you don't understand very well and your questions will be attended to as soon as possible.

Also appreciate this wonderful information shared on this blog by commenting below. Like our facebook page, follow us on google+, and subscribe with us to get our tutorial posts sent directly to your email.

Am also happy to inform you all that very soon i will start my tutorials on javascript, always check up on our updates and invite your friends to this great blog. See you in my next tutorial post, bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain