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
Different Media Types in CSS
CSS Media Types are device types on which a document is rendered, allowing you to define specific styles for different output devices. This enables you to create optimized layouts for screens, printers, and other media.
Syntax
/* Using @media rule */
@media media-type {
/* CSS rules */
}
/* Using @import rule */
@import url("stylesheet.css") media-type;
/* Using link element */
<link rel="stylesheet" media="media-type" href="stylesheet.css">
Media Types
| Media Type | Description |
|---|---|
| all | Stylesheet applies to all media type devices |
| Stylesheet applies to printers | |
| screen | Stylesheet applies to computer screens, tablets, smart-phones etc. |
| speech | Stylesheet applies to screen readers that "reads" the page out loud |
Note: Several media types (such as aural, braille, embossed, handheld, projection, ttv and tv) are deprecated in Media Queries 4 and shouldn't be used. The aural type has been replaced by speech media type.
Example 1: Using Link Element
The following example demonstrates linking separate stylesheets for screen and print media −
<!DOCTYPE html>
<html>
<head>
<style>
/* Screen styles */
@media screen {
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
.box {
width: 200px;
height: 100px;
background-color: #4CAF50;
border: 2px solid blueviolet;
border-radius: 10px;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
}
/* Print styles */
@media print {
body {
background-color: white;
color: black;
}
.box {
width: 200px;
height: 100px;
background-color: white;
border: 2px solid black;
border-radius: 0;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: black;
}
}
</style>
</head>
<body>
<h1>Media Types Demo</h1>
<div class="box">Sample Box</div>
<p>This content will appear different on screen vs print. Try printing this page to see the difference.</p>
</body>
</html>
On screen: A light blue background page with a green rounded box with purple border. When printed: A white background page with a white box having black border (no rounded corners).
Example 2: Screen-Specific Styling
This example shows styles that only apply to screen devices −
<!DOCTYPE html>
<html>
<head>
<style>
@media screen {
body {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
font-family: 'Helvetica', sans-serif;
margin: 0;
padding: 20px;
}
.content {
background-color: rgba(255, 255, 255, 0.9);
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
max-width: 600px;
margin: 0 auto;
}
h2 {
color: #333;
text-align: center;
}
}
@media print {
body {
background: white;
font-family: 'Times', serif;
}
.content {
background: none;
padding: 10px;
box-shadow: none;
border: 1px solid black;
}
}
</style>
</head>
<body>
<div class="content">
<h2>Responsive Design</h2>
<p>This content uses different styles for screen and print media. The screen version has colorful gradients and shadows, while the print version uses simple black and white styling to save ink.</p>
</div>
</body>
</html>
On screen: A colorful gradient background with a white rounded card containing the content with shadows. When printed: Plain white background with black text in a simple bordered box.
Conclusion
CSS media types allow you to create device-specific styles, ensuring optimal presentation across different output devices. Use screen media for colorful, interactive designs and print media for ink-efficient, readable layouts.
210 Views
