CSS Intro

CSS Intro Quiz

CSS Intro Exercise

CSS Basic

CSS Basic Quiz

CSS Basic Exercise

CSS Advance

CSS Advance Quiz

CSS Advance Exercise


CSS3 Quiz

CSS3 Exercise

CSS Properties

CSS Functions

CSS Selectors

CSS @media Rule

CSS @media Rule



The @media rule is applied in media queries to apply different styles for different media types and devices. It is used to check many things like:-

  1. width and height of the device
  2. width and height of the viewport
  3. resolution
  4. orientation

By this, we can customize style sheets for responsive web design for desktops, laptops, tablets, and mobile phones. We can also use it for printed documents purposes.




Its syntax is:-
@media not|only mediatype and (mediafeature and|or|not mediafeature) {


List of Media Types are:-


Value Description
all Default. Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, etc.
speech Used for screenreaders that reads the page out loud

Code Explanation

All Tutorials related to CSS Properties

All Sections related to CSS