How to Use CSS with Different Media Types
See CSS: Tips and Tricks for similar articles.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
- screen
- speech
In the following example, we'll create style rules for screen and print using CSS.
- Create a
style
element with themedia
set toscreen
:
The text will look like this:<style type="text/css" media="screen"> .warning { color: #ff0000; } h1.warning { text-decoration: underline; } p.warning { font-weight: bold; } .printDisplay { display: none; } </style>
- Create a
style
element with themedia
set toprint
:
The text will look like this:<style type="text/css" media="print"> .warning { color: #660000; } h1.warning { text-decoration: underline; font-size: 1in; } p.warning { font-weight: bold; font-size: .5in; } .screenDisplay { display: none; } </style>
- The final markup will look like this:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>CSS Media</title> <style type="text/css" media="screen"> .warning { color: #ff0000; } h1.warning { text-decoration: underline; } p.warning { font-weight: bold; } .printDisplay { display: none; } </style> <style type="text/css" media="print"> .warning { color: #660000; } h1.warning { text-decoration: underline; font-size: 1in; } p.warning { font-weight: bold; font-size: .5in; } .screenDisplay { display: none; } </style> </head> <body> <h1 class="warning">WARNING</h1> <p class="warning">Don't go there!</p> <p class="printDisplay">This is the print version.</p> <p class="screenDisplay">This is the screen version.</p> </body> </html>
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types (this article)
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3