CSS At-Rules

At-rules are standard CSS statements that instruct CSS how to behave. They begin with an at sign (@), followed by an identifier and (if it's a block statement) a pair of braces {}.

1. @import

Used to import a style sheet into another style sheet. @import url("navigation.css");

2. @media

Used to apply styles based on the result of one or more media queries (e.g. screen width, print, etc.).

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

3. @font-face

Used to define custom fonts to be used in the document.

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

4. @keyframes

Used to specify the intermediate steps in a CSS animation sequence.

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

5. @charset

Specifies the character encoding used in the style sheet. @charset "UTF-8";