CSS @Rules


In CSS, the @ symbol is used to indicate an at-rule. At-rules are used to include or exclude styles based on certain conditions, or to import or include styles from other style sheets.

Here are some common at-rules that you might use in CSS:

  • @import: imports a style sheet into the current style sheet.
  • @media: applies styles based on media types (e.g., screen, print) or media queries (e.g., width, height).
  • @font-face: defines a custom font to be used on the page.
  • @keyframes: defines a set of keyframes for an animation.
  • @supports: applies styles based on whether a browser supports a particular feature.

Here’s an example of how you might use an at-rule:

@import url("style.css");

This would import the style sheet style.css into the current style sheet.

At-rules can also have additional parameters or rules within them. For example:

@media screen and (max-width: 600px) {
    body {
        font-size: 14px;

This at-rule would apply the styles within it only when the screen has a width of 600 pixels or less.