Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS media types
CSS media types allow you to specify how a document should be formatted for different output devices. They enable you to apply different styles for screen displays, printers, handheld devices, and other media types.
Syntax
@media media-type {
/* CSS rules */
}
/* Or in link element */
<link rel="stylesheet" media="media-type" href="stylesheet.css">
CSS Media Types
| Media Type | Description |
|---|---|
all |
Suitable for all devices (default) |
print |
Intended for printed pages and print preview mode |
screen |
Intended primarily for computer screens |
speech |
Intended for speech synthesizers (replaces aural) |
Note: Most media types from CSS2 like handheld, tv, projection are deprecated. Modern web development uses media queries with features like max-width instead.
Example: Screen vs Print Styles
The following example demonstrates different styles for screen and print media −
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles for all media */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
/* Styles for screen only */
@media screen {
body {
background-color: #f0f0f0;
color: #333;
}
.screen-only {
background-color: #4CAF50;
color: white;
padding: 15px;
border-radius: 5px;
}
.print-only {
display: none;
}
}
/* Styles for print only */
@media print {
body {
background: white;
color: black;
}
.screen-only {
display: none;
}
.print-only {
border: 2px solid black;
padding: 10px;
}
}
</style>
</head>
<body>
<h1>Media Types Example</h1>
<div class="screen-only">This appears only on screen</div>
<div class="print-only">This appears only when printed</div>
<p>This paragraph appears on both screen and print.</p>
</body>
</html>
On screen: A page with light gray background showing a green box with "This appears only on screen" and a paragraph below. When printed: A white page with black border box containing "This appears only when printed" and the same paragraph.
Example: External Stylesheet with Media Types
You can also specify media types in HTML link elements −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="screen" href="/css/screen-styles.css">
<link rel="stylesheet" media="print" href="/css/print-styles.css">
</head>
<body>
<h1>Content styled differently for screen and print</h1>
</body>
</html>
The page loads different CSS files based on the media type - screen-styles.css for display and print-styles.css for printing.
Conclusion
CSS media types provide basic device targeting, with screen and print being the most commonly used. For responsive design, modern CSS media queries with feature detection are preferred over media types alone.
Updated on: 2026-03-15T11:34:56+05:30
139 Views
Advertisements