CSS Operators with @

The @ operators are used to establish some rules in CSS. The most commonly used in addition to the @media that has already been described in your last question, are:

@import: used to import a style sheet into the current sheet. This helps to modularize the code, but it is important to mention that each import generates a new HTTP request, which can decrease the application's performance if there are too many imports. Some frameworks like Angular 4 solve this problem, however, using their own import guidelines.

<style type="text/css">
   @import "mystyle.css";
   @import url("mystyle.css");
</style>

@Keyframes: Basically, it makes it possible to establish animation intervals, with the style or placement changes that will occur in each interval. An example of the animation (and its code) can be found here .

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}

@charset: identifies what character encoding will be used, most common being UTF-8 and ISO-8859-1. However, character encoding is usually declared in a meta tag in HTML itself.

<style type="text/css">
   @charset "UTF-8"
</style>

OR, in HTML5:

<meta charset="UTF-8">

@ font-face: Used to describe in more detail a font used in the document.'

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

According to documentation this is called at-rule (probably rule-in Portuguese)

There are several at-rules , designated by their identifiers, each with a different syntax:

• @charset - Defines the charset used by css
• @import - Add an external CSS
• @namespace - Style is applied to elements which has XML namespace prefixes, according to the rule.

Nested At-Rules

Is a subset of nested declarations, which can be used as a statement of a style sheet, as well as within conditional group rules:

• @media - A conditional group rule that will apply its content if the device meets the condition criteria defined using a media query.

• @supports - A conditional group rule that will apply its content if the browser meets the criteria of the given condition.

• @document < - A conditional group rule that will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. (Level 4 of the CSS specification)

• @page - Describes the layout changes that will be applied to document printing.

• @font-face - Describes the appearance of an external source to be downloaded.

• @keyframes - Describes the aspect of intermediate steps in a CSS animation sequence.

• @viewport <

• @counter-style - Defines specific counter styles that are not part of the default style set.

• @font-feature-values (add @swash , @ornaments , @annotation , @stylistic , @styleset and @character-variant ) - Define common names in variants of source-variant for feature activated differently in OpenType (only implemented no Gecko - Firefox)

Group rules conditions

As with property values, each rule has a different syntax. However, a number of them can be grouped into a special category called conditional group rules.

If the condition evaluates to true, all declarations within the group are applied.

Group rule conditions are defined in CSS Conditionals Level 3 , they are:

• @media

• @supports

• @document ( CSS Level 4)

A @import : import another stylesheet into the current style sheet

A @charset : indicates which encoding the style sheet will use

A @font-face : Used to describe the type of font that will be used

A !important : Indicates that a user-defined rule must take precedence over the author's style sheets.

Examples:

@import:

<style tyle="text/css">
   <!--
   @import "mystyle.css";
   or
   @import url("mystyle.css");
   .......other CSS rules .....
   -->
</style>

@charset:

<style tyle="text/css">
   <!--
   @charset "iso-8859-1"
   .......other CSS rules .....
   -->
</style>

@ font-face

<style tyle="text/css">
   <!--
   @font-face {
      font-family: "Scarborough Light";
      src: url("http://www.font.site/s/scarbo-lt");
   }
   @font-face {
      font-family: Santiago;
      src: local ("Santiago"),
      url("http://www.font.site/s/santiago.tt")
      format("truetype");
      unicode-range: U+??,U+100-220;
      font-size: all;
      font-family: sans-serif;
   }
   -->
</style>

! important:

<html>
   <head>

      <style tyle="text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>

   </head>
   <body>
      <p>Tutorialspoint.com</>
   </body>
</html> 

For examples and more information:

link