Understanding CSS Media Types and Queries

CSS Web Development Front End Technology

CSS Media Types and Queries help the user to define certain styles in accordance with a device’s general type (screen, print, etc.) or its characteristics (screen resolution, viewport dimensions, etc.)

Syntax

Following is the syntax for media queries −

@media not | only mediatype and (expressions) {
   CSS-Code;
}

Here, media query is applied if −

mediatype matches the device type on which document is rendered.
not/only operators are not defined then media query applies to all mediatypes.
not/only operators are specified then media query is not/only applied to certain mediatype respectively.

A user can have different stylesheets each corresponding to a different media. For example, a user can have a different stylesheet for print and screen media.

<link rel="stylesheet" media="print and|not|only (expressions)" href="print.css">

and,

<link rel="stylesheet" media="screen and|not|only (expressions)" href="screen.css">

Following are the media types listed in CSS3 −

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

Following are the methods to create media dependent stylesheets −

Using @media At-rules
Using @import At-rules
Using HTML <link> element with media attribute

Example

Let’s see an example for CSS media query −

Live Demo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
   box-sizing: border-box;
}
.col {
   float: left;
   width: 20%;
   padding: 40px;
}
body {
   background-color: lemonchiffon;
   margin: 20px;
}
@media screen and (max-width: 850px) {
   .col {
      width: 50%;
   }
   body {
      background-color: mediumseagreen;
   }
}
@media screen and (max-width: 550px) {
   .col {
      width: 100%;
   }
   body {
      background-color: powderblue;
   }
}
</style>
</head>
<body>
<div class="row">
<div class="col" style="background-color:#373;"> </div>
<div class="col" style="background-color:#363;"> </div>
<div class="col" style="background-color:#353;"> </div>
<div class="col" style="background-color:#343;"> </div>
<div class="col" style="background-color:#333;"> </div>
</div></body></html>

Output

This will produce the following output −

When screen size is above 850px −

When screen size is between 550px and 850px −

When screen size is below 550px −

Example

Let’s see another example for CSS media query: HTML Document −

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