@rules can be used to serve different purposes in CSS. They can be some already existing rules or custom rules. These are basically some specific commands preceded by the “at” (@) symbol.
Here are some @rules:
@import: Comes handy when you want to import some CSS code into current style sheet.
@charset: This rule tells the character set which is being used in the CSS.
@font-face: Describes the font face that will be used in the document.
Just like properties, rules also take values. We will now learn more about these @rules in detail
@import rule
@import rule has to appear in the very beginning of the style sheet. You can give the URL of the style sheet/CSS code to be used as its value. The use of @import ensures the modularity in CSS. Once written, the code or style sheet can be used anywhere as long as it is accessible.
@charset rule
Use of this rule gets necessary in case you’re using any charset other than ASCII or ISO-8859. The value can be any standard character sets in quotes.
@font-face rule
You can set the font-face by giving the location of the font or by any available font-face. This rule is mostly used by someone expert in font metrics.
!important rule
The general priority of rules is in the order they are in the document. However, the !important rule ensures that your rule is always applied no matter the priority. The rule can be present anywhere in the document but will be followed all the same.
Apart from these, CSS supports customised rules also. Some of the other @rules supported by CSS are:
@keyframes: used to specify the animation could
@font-feature-values: For keeping a common name in the font-variant-alternate property
@media: Setting rules for the media devices.