CSS MEDIA TYPES | Learn How To Specify Media Types Using CSS

In this short tutorial we will be discussing about CSS MEDIA TYPES and how developers can specify the media type they are targeting using CSS. In our previous tutorial we looked at CSS EFFECTS and how you can add special effects to objects on the web document. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS EFFECTS | Add Special Effect To Web Documents Using CSS


CSS allows developers to specify how a document type is been presented on different media type. You can use CSS styles to specify how you want your web document to display on screen, on print, projection, television, colored computers or using a speech synthesizer.

There are two basic ways of specifying media types and they include:

  1. Specifying the media type from the style sheet using the @media or @import rules
  2. Specifying the target media within the document language

The @media rule

We can use the @media rule to specify the media type either print, screen or both separated by a comma sign. Example shown below

<style tyle = "text/css">
      @media print {
         body { font-size: 90pt }
      @media screen {
         body { font-size: 70pt }
      @media screen, print {
         body { line-height: 1.7 }

The Document language

The illustration below shows how to specify the media type within the document language

<style tyle = "text/css">
      <!doctype html public "-//w3c//dtd html 4.0//en">
            <title> illustration of target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print, 
               handheld" href = "dogo.css">

            <p>the body...

Basic Media Types

When developers choose media types they usually have a target media in mind where the web document will be displayed on. Below are they list of media types we have in CSS.

S/N Media type Description
1 all This is used when targeting all media types
2 projection This is used for projected presentations such with the use of devices like projector
3 screen This is used when targeting colored computers
4 print This is used for documents that will be viewed on print view mode
5 tty This is used for media having a fixed pitch character grid
6 tv This is used for television type of devices
7 handheld Used for handheld devices
8 embossed This is used for page braille printers
9 aural This is used for speech synthetizing equipment
10 braille This is used for braille tactile feedback devices


Specifying CSS media types is very important to developers when building web documents but before doing that you have to be aware of the kind of devices such document will be viewed on. Lets move on to the next topic on CSS PAGED MEDIA

What do you think?

css effects

CSS EFFECTS | Add Special Effect To Web Documents Using CSS

CSS paged media

CSS PAGED MEDIA | Introduction To CSS @page Rules