CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities
All CSS Properties
align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing caption-side caret-color @charset clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-kerning font-size font-size-adjust font-stretch font-style font-variant font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap z-index

CSS @media Rule

The CSS @media rule can be used to apply part of a style sheet based on the result of one or more media queries.

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

Run code

Media queries are useful when you want to modify your site depending on a device's general type (such as print or screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

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

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

CSS Syntax:

@media not|only mediatype and (media feature and|or|not mediafeature) {
    CSS code;
}

The not keyword reverts the meaning of an entire media query.

The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. It has no effect on modern browsers.

The and keyword combines a media feature with a media type or other media features.

They are all optional. However, if you use not or only, you must also specify a media type.

The mediatype describe the general category of a device.

The media features describe specific characteristics of the browser.

Examples

You can also have different stylesheets for different screen sizes:

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

Run code

Create a responsive website template using media queries:

Comma separated list: add an additional media query to an already existing one:

Run code

Browser compatibility

The numbers in the table specify the first browser version that fully supports the @media rule:

Rule
@media 21 3.5 9 4 9

Media Types

Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type will be implied.

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 Features

Media features describe specific characteristics of the browser. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.

Value Description
max-width Maximum width of the viewport
min-width Minimum width of the viewport
max-height Maximum height of the viewport
min-height Minimum height of the viewport
width Width of the viewport
height Height of the viewport
any-hover Does any available input mechanism allow the user to hover over elements?
any-pointer Is any available input mechanism a pointing device?
aspect-ratio Width-to-height aspect ratio of the viewport
color Number of bits per color component of the output device, or zero if the device isn't color
color-gamut Approximate range of colors that are supported by the user agent and output device
color-index Number of entries in the output device's color lookup table, or zero if the device does not use such a table
grid Does the device use a grid or bitmap screen?
hover Does the primary input mechanism allow the user to hover over elements?
inverted-colors Is the browser or underlying OS inverting colors?
light-level Current ambient light level
max-aspect-ratio Maximum ratio between the width and the height of the display area
max-color Maximum number of bits per color component for the output device
max-color-index Maximum number of colors the device can display
max-monochrome Maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution Maximum pixel density of the output device
min-aspect-ratio Minimum Width-to-height aspect ratio of the viewport
min-color Minimum number of bits per color component for the output device
min-color-index Minimum number of colors the device can display
min-monochrome Minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution Minimum pixel density of the output device
monochrome Number of bits per "color" on a monochrome (greyscale) device
orientation Orientation of the viewport (landscape or portrait)
overflow-block How does the output device handle content that overflows the viewport along the block axis?
overflow-inline Can content that overflows the viewport along the inline axis be scrolled?
pointer Is the primary input mechanism a pointing device, and if so, how accurate is it?
resolution Pixel density of the output device
scan Scanning process of the output device
scripting Is scripting (e.g., JavaScript) available?
update How frequently the output device can modify the appearance of content

See also

CSS Media queries