CSS3 Media Queries

You are all now well aware of the usage of CSS, and how to style this all with just small amout of code. For example to add the margins to the body element you just write this

body {
   margin: 10px; /* comment: or what so ever the value */
}

Now, what CSS3 includes is a new thing, that is known as Media Query. Media is something that is being a medium in between you and the object. You’re using a Laptop, then your media is Screen, you’re reading the text on the Page in a Hard Copy form. Your media is Printed page.

It is just what is providing you with the facility to read the information that has to be sent to you.

Using CSS3, you can manage to style the document according to the Media the user would have access to. For example some people would have wide screen monitors (well LDCs in today’s world) and some would be using Mobile Phones, all of these are Screens but have different screen sizes. You can use the code to check for them.

@media type and (anyparam: value) {
   /* all the CSS properties you want to alter for different objects */
}

Using this code, you can change the properties of the objects depending on the media that is being used and the properties of the media. Please note you can only get the properties for the screen as you won’t be able to get the properties of a paper like how much wide it is or how much height it has.

Lets begin the coding

Ok, first of all we try to add a background-color, margin, color, text-decoration to the body element. We use this:

body {
  background-color: rgba(255, 0, 0, .2); /* red and a slightly visible */
  margin: 10px; /* 10 pixels margin to all the sides */
  color: #f00; /* red colored text */
  text-decoration: underline;
}

Now if we want the user on a mobile device to be able to see the text clearly as there was no style, and the margins should go away. We can do that using CSS3 media query. Have a look at the stuff below:

@media only screen and (max-width: 500px) { 
   /* for screened media with screen size only 500px */
   background-color: transparent;
   color: #fff; /* white */
   margin: 0; /* none */
   text-decoration: none;
}

If we add this code to the end of the CSS file, we will see that if the screen size if just 500px (a mobile device off course) then the website would lack all of the features and styles that were visible to the desktop version of the website such as background color, color of the text, margins, text decoration of the underline etc. Now, there is another thing about the printed copy too. CSS3 allows us to change the properties for the copy of our document that would be in the printed form. Have a look below:

@media print {
   /* note that the paper won't provide its dimensions */
   background-color: rgba(0, 0, 255, .2); /* blue but slightly visible */
   color: #00f;
   margins: 2px; /* 2px margin around the sides */
   text-decoration: italic; /* same as the italic */
}

Now, go ahead and print the page, using the above code you will see that the document that was in desktop mode, was never the same as it is in the printed form, and you’ll be like what the… How did that all go so different?

That is because of the CSS3 Media Query. In this you can change the view of the HTML document for every different media, and the properties of the media. You can change the view of the document if the screen size is not enought then you can hide some of the elements or lessen down the size of all the elements to fill the elements in the screen, if the user’s screen is very short, then you can try to change the layout using the media query. And if you want the user to get a whole new design while he prints the copy, then use

@media print {
  /* all the css properties that are to be used, would be here */
}

Viola! You just changed the look of the document. Go ahead give it a try!