Using Css media queries

With the advent of different technological devices being introduced today and used for accessing the internet, this poses a challenge to developers because there is no very good way of determining the kind of device being used to enter your website and this devices have various screen sizes and so you must make your website look good on various devices and also on print outs from your webpage and css helps us to achieve these feat. Here are the different ways to prepare different styling rules for various devices using css

First method:

This is the use of the @media rules to style a webpage differently on different devices in one style sheet. While this could be easy to implement more than other methods, I personally do not recommend it and this is because as a programmer, I like to make my coding life easier and so this method stands against one of our popular programming approaches known as “Modular Programming” meaning “Divide And Conquer Approach” to solving problems programmatically. But never the less, here is how to use it

@media  screen{

Body {color:red;

Font-family:Arial black;

Font-size: 20px;

Background-color:green;

}

}

@media print{

Body{color:black;

Font-family: times, times new roman;

Font-size: 14px;

Background-color: white;

}

}

Now using the above code does not mean these are the only styling rules you can apply when using the @media rule but this is just an illustration.

Second Method:

This method is what I prefer than the other method described earlier but again, I don’t personally recommend this method as this is placed inside a single stylesheet that will reference all other stylesheets rather than directly in your html page but nonetheless, It follows our precious “Divide and Conquer Approach” which makes it better and make debugging a little bit easier and this is the use of the @import statement. Below is how to use it;

@import url(“css/scree.css”) screen;

@import url(“css/print.css”) print;

The above code should be placed inside the major style sheet of the webpage that is referenced with your <link> tag and then you can go ahead and create the above stylesheets which are screen.css for screens and print.css for prints.

Third method

This is the method I personally recommend for every one including myself and these includes taking advantage of certain other attributes of the html <link> tag to customize your website for various devices. To use this method, in your head section add the following code to it;

<link rel=”stylesheet”  type=”text/css”  media=”all” href=”styles.css”/>

<link rel=”stylesheet” type=”text/css” media=”screen” href=”forscreen.css”/>

<link rel=”stylesheet”  type=”text/css” media=”print” href=”forprint.css”/>

Now next time we would be showing you how to use these same method for applying different styles to both various mobile phones and devices. Just stay tuned But with the above you can apply different styles to a print from your website and a different style to any screen viewing your website.