An **at-rule** is a CSS statement that instructs CSS how to behave. It should always start with an @ symbol.
These rules are fundamental to modern web development.
| Rule | Description |
|---|---|
@media |
Defines styles based on device characteristics (Respnsive Design). |
@keyframes |
Defines the intermediate steps in a CSS animation. |
@font-face |
Allows you to use custom web fonts not installed on the user's computer. |
@import |
Includes external CSS files within another style sheet. |
@charset |
Specifies the character encoding used in the style sheet. |
/* Responsive Viewport */
@media (max-width: 600px) {
body { font-size: 14px; }
}
/* Custom Font Definition */
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2');
}
/* Animation Steps */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}@charset at the very first line of your CSS file if you are using it. @import should also come before any standard selectors.