Media Types

Contact Us or call 1-877-932-8228
Media Types

Media Types

Styles can be defined for different media. For example, you may want to style a page one way for viewing with a browser and a different way for viewing in print. The media type is defined in the <link> tag for external style sheets and in the <style> tag for embedded style sheets.

If the media is undefined then the style rules will apply to all media. Possible values for media are:

  • all
  • print
  • screen
  • speech

We will look later at how to extend the concept of targeting various media with media queries, a relatively new feature of CSS that allows us to target not just the type of media but also aspects of the user's device: screen width, orientation, color depth, etc. Perhaps most importantly, media queries allow us to craft pages that are responsive, presenting different layouts for desktop computers, tablet devices, and smartphones.

The following code sample illustrates how you can use CSS to design for different media:

Code Sample:

CrashCourse/Demos/Media.html




CSS Media




WARNING

Don't go there!

This is the print version.

This is the screen version.

As shown below, the screen output of the file above is different from the print output.

The screen output will look like this:

The print output will look like this:

In the video that follows, at about 15 seconds into the presentation, the instructor refers to an "embedded style sheet" as an "inline style". "Embedded style sheet" is what is meant.

Next