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
Creating Media Dependent Style Sheets using CSS
Media dependent stylesheets are stylesheets that apply to an HTML document only when the media type matches the device type on which the document is displayed. This allows you to create different styles for different devices like screens, printers, or mobile devices.
Syntax
/* Method 1: Using @media at-rule */
@media media-type and (condition) {
selector {
property: value;
}
}
/* Method 2: Using @import at-rule */
@import url("stylesheet.css") media-type;
/* Method 3: Using HTML link element */
<link rel="stylesheet" media="media-type" href="stylesheet.css">
Methods for Creating Media Dependent Stylesheets
You can create media dependent stylesheets using the following methods −
- Using
@mediaat-rules - Using
@importat-rules - Using HTML
<link>element with media attribute
Method 1: Using HTML Link Element
The following example demonstrates creating separate stylesheets for screen and print media −
<!DOCTYPE html>
<html>
<head>
<style>
/* Screen styles */
@media screen {
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid blueviolet;
box-shadow: 22px 12px 3px 3px lightblue;
position: absolute;
left: 30%;
top: 20px;
}
}
/* Print styles */
@media print {
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid #dc3545;
box-shadow: 22px 12px 3px 3px #dc3545;
position: absolute;
left: 30%;
top: 20px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
A rounded rectangle appears with blue-violet border and light blue shadow on screen. When printed, the same element displays with red border and red shadow.
Method 2: Using @media with Responsive Design
The following example shows how to create responsive styles based on screen width −
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 3px black;
padding: 20px;
font-size: 16px;
color: white;
background-color: #333;
}
@media screen and (max-width: 900px) {
p {
background-color: #4CAF50;
color: #fff;
font-size: 18px;
}
}
@media screen and (max-width: 500px) {
p {
background-color: #f44336;
color: white;
font-size: 14px;
}
}
</style>
</head>
<body>
<p>This paragraph changes appearance based on screen size. Resize your browser window to see the effect. The background color and font size adapt to different screen widths for better readability across devices.</p>
</body>
</html>
The paragraph displays with dark background on large screens, green background on medium screens (below 900px), and red background on small screens (below 500px). Font sizes also adjust accordingly.
Common Media Types
| Media Type | Description |
|---|---|
screen |
For computer screens, tablets, phones |
print |
For printers and print preview |
all |
For all media types (default) |
speech |
For speech synthesizers |
Conclusion
Media dependent stylesheets provide powerful control over how your content appears on different devices. Use @media rules for responsive design and separate stylesheets for distinct media types like print and screen.
Updated on: 2026-03-15T14:08:48+05:30
368 Views
Advertisements