CSS Beginners Guide part 12 - CSS Media Types

CSS @media types are very useful. a media define a rule for different web screen layouts like PC, mobile, tabs and etc, we define the different rules using @media in same style sheet, we use it for responsive web sites, we use different type of rules for different media usages. this is very important feature that they specify how the document is to be display on different media screens  

Syntax of  Media rules
ex:

<style>

// type screen is used for PC Screens

@media screen{

p{font-size:20px;}

}

// type print is used for Printers

#media print{

p{font-size:18px;}

}

// type all is used for all Layouts

#media all{

p{font-size:18px;}

}


// type projection is used for projected presentations, like power-point slides

#media projection{

p{font-size:18px;}

}


// type tv is used for television devices

#media tv{

p{font-size:18px;}

}

</style>