Different Media Types in CSS

CSS Web Development Front End Technology

CSS Media Types are the device types on which the document is rendered and specific styles can be defined for every media type.

Following are the Media Types in CSS3 and Media Queries 4 −

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.

Let’s see an example for styling screen and print media types −

HTML Document

Example

Live Demo

<!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;
}

Output

When document is visible in a screen mediatype −

When document is visible in a print mediatype −

Let’s see another example for styling screen and print media types −

HTML Document

Example

Live Demo

<!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; }