CSS - @ Rules

CSSat-rulesare special instructions or statements beginning with the”@“symbol. They are used to control or modify the behavior of the stylesheet and are typically used for tasks such as defining media queries, importing external stylesheets, or specifying font faces.

CSS at-rules improves the CSS capabilities beyond basic selectors and property-value pairs. An at-rule begins with anat (@)sign, followed by an identifier, and further includes everything up to the next semicolon (;) or next CSS block.

Syntax

/* General structure */

@identifier (RULE);

Types of @ Rules

Regular

CSS provides different regular at-rules, based on the identifier and each has a different syntax.

• @charset: Specifies the character encoding of an external stylesheet.
• @import: Used to import an external CSS file into the current stylesheet.
• @namespace: Used to declare and define XML namespaces within a CSS stylesheet.

Nested

A subset of nested statements that serve as both standalone style sheet statements and components within conditional group rules.

• @media: Content of conditional group rule gets applied, if the device meets the criteria of the condition defined usingmedia query.
• @supports: Content of conditional group rule gets applied, if the given condition is met by the browser.
• @page: Defines the layout of printed pages.
• @font-face: Defines custom fonts to be used in a web page.
• @keyframes: Defines the aspect of intermediate steps in a CSS animation sequence.
• @counter-style: Defines the different custom counter styles that are not predefined.
• @font-feature-values: Defines the common names in font-variant-alternates for feature activated in OpenType. It deals with the usage of alternate glyphs and these glyphs are defined in@font-feature-values
• @property: Defines the usage of custom properties and variables.
• @layer: Defines a layer and sets the order of precedence, when there are multiple cascade layers.

CSS @ Rules - @page Example

Here is an example of usage of@page:

CSS @ Rules - @keyframes Example

Here is an example of usage of@keyframes:

CSS @ Rules - @property Example

Here is an example of usage of@property:

CSS @ Rules - Rule List

The table given below lists all the CSS @ Rules:

@RuleExample@charset@charset “UTF-8”;@container@container (width > 400px) { h1 {font-size: 2em;} }@counter-style@counter-style sample {}@font-face@font-face { font-family: “CustomFont”; src: url(“customfont.woff2”) format(“woff2”); }@font-feature-value@font-feature-values “CustomFont” {@swash { fancy: 2; }}@font-palette-values@font-palette-values One { font-family: “Bungee Spice”;}@import@import ur();@keyframes@keyframes sample-slide { from { transform: translateY(100%) } }@layer@layer sample-layer{ .margin-lg { margin: 5px; } }@media@media screen and (max-width: 600px) {}@namespace@namespace svg url();@page@page { size: 5in 6in; margin-left: 4in }@property@property sample-property { rules }@supports@supports (transform-origin: 10% 10%) {}