CSS at-rules start with the @ character and are followed by a keyword or identifier. They always have to end with a semicolon (;) character.
Some of the most popular at-rules are @font-face, which is used to declare custom fonts; @import that is used to import external CSS files (not recommended by the way for performance reasons), and it is also used in some CSS preprocessors to bring external partial files that will eventually get compiled into a single CSS file (recommended method); @media is used to declare media queries in our responsive projects or print style sheets and so on; @keyframes is used to create animations and so on.
At-rules, let's see where they're at.