Learn CSS

"If you want to learn how to style and design web pages, you need to master CSS. CSS stands for Cascading Style Sheets, and it is the language that defines the appearance and layout of HTML elements. In this course, you will learn the basics of CSS, such as selectors, properties, values, units, and colors. You will also learn how to use CSS to create responsive web design, animations, transitions, and more. By the end of this course, you will be able to create beautiful and functional web pages using CSS."

CSS Media Queries

CSS Media Queries allow developers to apply different styles to web pages based on the device or screen size being used to access the page. This allows for responsive web design, which adapts the layout and design of a website to fit the device being used to access it.

 

Syntax

The syntax for a media query is as follows:


@media mediatype and (media feature) {
 CSS rules;
}


The @media rule is followed by a set of parentheses containing mediatype and one or more media features. 

The mediatype can be all, screen, print, speech, or other media types, while the media feature can be any number of different attributes, such as the width or height of the device screen or the resolution of the display.

Media features are used to specify the characteristics of the device that you want to target, such as max-width, min-width, orientation, resolution, and others.

Example

Here is an example of how to use a media query to apply different styles to a web page based on the width of the device screen:


/* Styles for devices with a width of 600px or less */
@media only screen and (max-width: 600px) {
 body {
   font-size: 16px;
 }
}

/* Styles for devices with a width of more than 600px */
@media only screen and (min-width: 601px) {
 body {
   font-size: 20px;
 }
}

In this example, the @media rule is used to apply different font sizes to the body element of a web page based on the width of the device screen. For devices with a screen width of 600 pixels or less, the font size is set to 16 pixels. For devices with a screen width of more than 600 pixels, the font size is set to 20 pixels.

You can also use media queries to apply styles based on other characteristics of the device, such as its orientation:


@media screen and (orientation: landscape) {
 /* CSS rules go here */
}

This media query targets screens in landscape orientation.

Media queries are an important part of modern web design, as they allow developers to create responsive and flexible layouts that adapt to a wide range of devices and screen sizes.

For more detailed on CSS media queries you can follow the official documentation: Media Query Documentation