What is the "at rules" in CSS

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

1@<identifier> <rule>;
2
3@<identifier> {
4  <rule>;
5  <rule>;
6  /* . . . */
7}
8
9@<identifier> <name> {
10  <rule>;
11  <rule>;
12  /* . . . */
13}

It is difficult to summarize exactly what @ rules are because different rules have different purposes in CSS. For example, the @charset rule specifies the character encoding method used in the CSS file.

1@charset "utf-8";

@import is used to import external CSS files.

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

url() is a CSS function used to load external files. Later, we are also going to use it to load background images and other resources.

@font-face is used to specify custom fonts used to display the texts.

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

@keyframes defines the keyframes in an animation effect.

1@keyframes changecolor {
2  from {
3    color: red;
4  }
5
6  to {
7    color: blue;
8  }
9}

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