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
Selected Reading
Different Media Types in CSS
CSS Media Types are the device types on which the document is rendered and specific styles can be defined for every media type.
The following are the Media Types in CSS3 and Media Queries −
| Sr.No | Value & Description |
|---|---|
| 1 |
all Stylesheet applies to all media type devices |
| 2 |
print Stylesheet applies to printers |
| 3 |
screen Stylesheet applies to computer screens, tablets, smart-phones etc. |
| 4 |
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.
Style Screen and Print Media Type by Importing a Stylesheet
Let?s see an example for styling screen and print media types. Here, we have set the media to screen and print −
Example
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </head> <body> <div></div> </body> </html>
CSS document (screen.css)
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;
}
CSS document (print.css):
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 Screen and Print Media Types Using the @Import Rule
Here, we have used the @import rule to import a stylesheet −
Example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
</style>
</head>
<body>
<p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p>
<p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p>
<p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p>
</body>
</html>
CSS document (screen.css)
p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew;}
CSS document (print.css):
p { color: red; font-style: italic;}
.two { color: #989898; font-size: 40px; }
Updated on: 2023-11-01T16:09:29+05:30
192 Views
Advertisements