At-rules

Meta-data Information

@charset

@charset "utf-8";

p {
  color: green;
}

@import

@import
├── css
│   ├── _color.css
│   ├── _text.css
│   └── main.css
└── index.html

@import/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <h1 class="text-center">Lorem ipsum dolor</h1>
  <p class="blue">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</body>
</html>

@import/css/main.css

@import url('_color.css');
@import url('_text.css');

@import/css/_color.css

.blue {
  color: blue;
}

.red {
  color: red;
}

.green {
  color: green;
}

@import/css/_text.css

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

Output:

Lorem ipsum dolor

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Conditional Information

(nested statements / conditional group rules / rulesets)

@media

p {
  text-align: center;
}

@media print {
  p {
    text-align: left;
  }
}

@document

Functions:

@document url(http://www.w3.org/) {
  p {
    color: red;
  }
}

@support

@supports (--main-color: green;) {
  :root {
    --main-color: green;
  }

  body {
    color: var(--varName);
  }
}

Descriptive Information

@font-face

reference:

@font-face {
  font-family: 'Roboto';
  src: url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
}

p {
  font-family: 'Roboto', sans-serif;
}

References