CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Media Queries

Media queries are a popular technique for delivering a tailored stylesheet to desktops, laptops, tablets, and mobile phones.

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

Syntax:
@media not|only mediatype and (expressions) {
    css code
}

In the following example when the width of the viewport is 768 pixels or greater, the background-color will be "lightgreen":

Run code

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (landscape or portrait)
  • resolution

You can also have different stylesheets for different screen sizes:


Media Types

Value Description
all Suitable for all devices (This is default)
print Used for printers
screen Intended primarily for screens
speech Intended for speech synthesizers

Media Query Examples

Hide an element when the browser's width is 600px wide or less:

Run Code

Comma separated list: add an additional media query to an already existing one, using a comma (this will behave like an OR operator):

Run Code

Create a responsive website template using media queries:

To learn more about Media Queries, visit: CSS Media Queries for Responsiveness Chapter.