Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS Media Queries

10 mintues

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS Media Queries

The @media rule, first introduced in CSS2, enables the definition of distinct style rules for various media types.

In CSS3, media queries expanded upon the concept of CSS2 media types by focusing on the capabilities of the device rather than its type.

Media queries offer versatile checks, including viewport width and height, viewport orientation (landscape or portrait), and resolution.

Employing media queries is a widely adopted strategy for delivering customized style sheets tailored to desktops, laptops, tablets, and mobile phones, including devices such as iPhones and Android phones.

CSS Media Types

Value	Description
all	Applies to all media type devices.
print	Applies to print preview mode.
screen	Applies to computer screens, tablets, smartphones, etc.

CSS Common Media Features

Below are several frequently utilized media features:

Value	Description
orientation	The orientation of the viewport: landscape or portrait.
max-height	The maximum height of the viewport.
min-height	The Minimum height of the viewport
height	The height of the viewport, including the scrollbar.
max-width	The Maximum width of the viewport
min-width	The Minimum width of the viewport
width	The Width of the viewport (including scrollbar)

Media Query Syntax

A media query comprises a media type and may encompass one or more media features, each of which evaluates to either true or false.

@media not|only mediatype and (media feature) and (media feature) {
CSS-Code;
}

The media type in a media query is not mandatory; if left out, it defaults to “all”. Nevertheless, when using “not” or “only“, a media type must also be specified.

The query yields true if the declared media type aligns with the device type displaying the document and if all media features within the query evaluate to true. Upon a true media query, the associated style sheet or rules are applied in accordance with standard cascading principles.

Explanation of the keywords: not, only, and and:

not: The “not” keyword reverses the interpretation of an entire media query.

only: The “only” keyword serves to prevent older browsers lacking support for media queries from applying the designated styles, without affecting modern browsers.

and: The “and” keyword merges a media type with one or more media features.

You have the option to associate distinct stylesheets with various media types and varying browser viewport widths.

Media Queries Simple Examples

An approach to employ media queries involves incorporating an alternate CSS section directly within your stylesheet.

In the given example, the background-color is modified to light green when the viewport width is 480 pixels or wider. Conversely, if the viewport is less than 480 pixels, the background-color switches to pink.

Example

@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

In the provided example, a menu is positioned to the left of the page when the viewport width is 480 pixels or wider. Conversely, if the viewport is less than 480 pixels, the menu is positioned on top of the content.

Example

@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}