What are @ Rules

The @ rules are special statements in CSS. They have the following syntax:

@<identifier> <rule>;

@<identifier> {
  <rule>;
  <rule>;
  /* . . . */
}

@<identifier> <name> {
  <rule>;
  <rule>;
  /* . . . */
}

It is difficult to summarize exactly what @ rules are, because they serve different purposes in CSS.

For example, the @charset rule specifies the character encoding method used in the CSS file.

@charset "utf-8";

@import is used to import external CSS files.

@import url("/path/to/external-styles.css");

url() is a CSS function used to load external files.

@font-face rule is used to specify custom fonts used to display the textual content in the webpage.

@font-face {
  font-family: "Trickster";
  src: url("/path/to/trickster.woff") format("woff");
  /* . . . */
}

@keyframes defines the keyframes in an animation effect.

@keyframes changecolor {
  from {
    color: red;
  }
 
  to {
    color: blue;
  }
}

Of course, there are other @ rules available in CSS, and we will discuss them in future lessons. For now, you only need to be familiar with the syntax.