Articles
Introduction to CSS
CSS `@` Rules

CSS `@` Rules

This article explains CSS @ rules.

You can learn about the usage and how to write @ rules like @import and @media.

YouTube Video

HTML for Preview

css-at-rule.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS At Rules</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-at-rule.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS At(@) Rules</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS At(@) Rules</h2></header>
 19        <article>
 20            <h3>@import</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24@import url('styles.css');
 25</pre>
 26            </section>
 27        </article>
 28        <article>
 29            <h3>@media</h3>
 30            <section>
 31                <header><h4>CSS</h4></header>
 32<pre class="sample">
 33@media screen and (max-width: 600px) {
 34    body {
 35        background-color: lightblue;
 36    }
 37}
 38</pre>
 39            </section>
 40        </article>
 41        <article>
 42            <h3>@media Example(Screen Width)</h3>
 43            <section>
 44                <header><h4>CSS</h4></header>
 45<pre class="sample">
 46@media (min-width: 600px) {
 47    body {
 48        background-color: lightblue;
 49    }
 50}
 51@media (max-width: 599px) {
 52    body {
 53        background-color: lightpink;
 54    }
 55}
 56</pre>
 57            </section>
 58        </article>
 59        <article>
 60            <h3>@media Example(Orientation)</h3>
 61            <section>
 62                <header><h4>CSS</h4></header>
 63<pre class="sample">
 64@media (orientation: portrait) {
 65    body {
 66        font-size: 18px;
 67    }
 68}
 69@media (orientation: landscape) {
 70    body {
 71        font-size: 16px;
 72    }
 73}
 74</pre>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>@media Example(Resolution)</h3>
 79            <section>
 80                <header><h4>CSS</h4></header>
 81<pre class="sample">
 82@media (min-resolution: 2dppx) {
 83    body {
 84        background-image: url('high-res-image.png');
 85    }
 86}
 87</pre>
 88            </section>
 89        </article>
 90        <article>
 91            <h3>@media Example(AND Condition)</h3>
 92            <section>
 93                <header><h4>CSS</h4></header>
 94<pre class="sample">
 95@media (min-width: 600px) and (orientation: portrait) {
 96    body {
 97        background-color: lightgreen;
 98    }
 99}
100</pre>
101            </section>
102        </article>
103        <article>
104            <h3>@media Example(OR Condition)</h3>
105            <section>
106                <header><h4>CSS</h4></header>
107<pre class="sample">
108@media (max-width: 400px), (orientation: landscape) {
109    body {
110        color: gray;
111    }
112}
113</pre>
114            </section>
115        </article>
116        <article>
117            <h3>@media Example(NOT Condition)</h3>
118            <section>
119                <header><h4>CSS</h4></header>
120<pre class="sample">
121@media not all and (min-width: 600px) {
122    body {
123        font-size: 14px;
124    }
125}
126</pre>
127            </section>
128        </article>
129        <article>
130            <h3>@font-face</h3>
131            <section>
132                <header><h4>CSS</h4></header>
133<pre class="sample">
134@font-face {
135  font-family: 'CustomFont';
136  src: url('customfont.woff2') format('woff2'),
137       url('customfont.woff') format('woff');
138}
139</pre>
140            </section>
141        </article>
142        <article>
143            <h3>@keyframes</h3>
144            <section>
145                <header><h4>CSS</h4></header>
146<pre class="sample">
147@keyframes slidein {
148    from {
149        transform: translateX(100%);
150    }
151    to {
152        transform: translateX(0%);
153    }
154}
155
156div {
157    animation: slidein 2s ease-in-out;
158}
159</pre>
160            </section>
161        </article>
162        <article>
163            <h3>@supports</h3>
164            <section>
165                <header><h4>CSS</h4></header>
166<pre class="sample">
167@supports (display: grid) {
168    .container {
169        display: grid;
170    }
171}
172</pre>
173            </section>
174        </article>
175        <article>
176            <h3>@page</h3>
177            <section>
178                <header><h4>CSS</h4></header>
179<pre class="sample">
180@page {
181    size: A4;
182    margin: 2cm;
183}
184</pre>
185            </section>
186        </article>
187        <article>
188            <h3>@charset</h3>
189            <section>
190                <header><h4>CSS</h4></header>
191<pre class="sample">
192@charset "UTF-8";
193</pre>
194            </section>
195        </article>
196        <article>
197            <h3>@layer</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201@layer reset {
202    h1 {
203        margin: 0;
204    }
205}
206@layer base {
207    h1 {
208        font-size: 24px;
209        color: blue;
210    }
211}
212@layer theme {
213    h1 {
214        color: red;
215    }
216}
217</pre>
218                <header><h4>HTML</h4></header>
219<pre>
220&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
221&lt;p&gt;
222    This page demonstrates how to apply styles to
223    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
224&lt;/p&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <h1>CSS Layer Test</h1>
229                    <p>
230                        This page demonstrates how to apply styles to
231                        the <code>&lt;h1&gt;</code> element using CSS layers.
232                    </p>
233                </section>
234            </section>
235        </article>
236        <article>
237            <h3>@layer with order</h3>
238            <section>
239                <header><h4>CSS</h4></header>
240<pre class="sample">
241@layer theme, base, reset;
242
243@layer reset {
244    h1 {
245        margin: 0;
246    }
247}
248@layer base {
249    h1 {
250        font-size: 24px;
251        color: blue;
252    }
253}
254@layer theme {
255    h1 {
256        color: red;
257    }
258}
259</pre>
260                <header><h4>HTML</h4></header>
261<pre>
262&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
263&lt;p&gt;
264    This page demonstrates how to apply styles to
265    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
266&lt;/p&gt;
267</pre>
268                <header><h4>HTML+CSS</h4></header>
269                <section class="sample-view">
270                    <h1>CSS Layer Test</h1>
271                    <p>
272                        This page demonstrates how to apply styles to
273                        the <code>&lt;h1&gt;</code> element using CSS layers.
274                    </p>
275                </section>
276            </section>
277        </article>
278        <article>
279            <h3>@import &amp; @layer</h3>
280            <section>
281                <header><h4>CSS</h4></header>
282<pre class="sample">
283@import url('css/reset.css') layer(reset);
284@import url('css/base.css') layer(base);
285@import url('css/theme.css') layer(theme);
286</pre>
287                <header><h4>HTML</h4></header>
288<pre>
289&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
290&lt;p&gt;
291    This page demonstrates how to apply styles to
292    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
293&lt;/p&gt;
294</pre>
295                <header><h4>HTML+CSS</h4></header>
296                <section class="sample-view">
297                    <h1>CSS Layer Test</h1>
298                    <p>
299                        This page demonstrates how to apply styles to
300                        the <code>&lt;h1&gt;</code> element using CSS layers.
301                    </p>
302                </section>
303            </section>
304        </article>
305    </main>
306</body>
307</html>

CSS @ Rules

CSS @ rules (at-rules) are special instructions used to control the behavior and application conditions of stylesheets. Unlike normal CSS properties, @ rules conditionally apply styles or import external resources. Representative @ rules include @media, @import, and @keyframes, among others.

Types of Exemplary @ Rules

@import 

1@import url('styles.css');

@import is used to import other CSS files into the current stylesheet. This allows for easy reuse of external CSS files.

Points:

  • @import must be written at the beginning of the stylesheet.
  • It should be avoided in large projects due to its impact on performance.

@media 

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}
  • @media uses media queries to apply styles based on specific conditions (like screen width, resolution, etc.). It is frequently used in implementing responsive design.

Commonly Used Conditions

The following are common conditions frequently used in media queries.

Conditions Based on Width 
 1@media (min-width: 600px) {
 2    body {
 3        background-color: lightblue;
 4    }
 5}
 6@media (max-width: 599px) {
 7    body {
 8        background-color: lightpink;
 9    }
10}
  • Minimum width (min-width) applies styles when the width is equal to or greater than the specified value.
  • Maximum width (max-width) applies styles when the width is equal to or less than the specified value.
Device Orientation (orientation) 
 1@media (orientation: portrait) {
 2    body {
 3        font-size: 18px;
 4    }
 5}
 6@media (orientation: landscape) {
 7    body {
 8        font-size: 16px;
 9    }
10}
  • Device orientation (orientation) can be set to portrait or landscape.
Resolution (resolution) 
1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}
  • Styles can be applied based on resolution (resolution).
  • In this example, a high-resolution background image is specified for high-resolution displays.

Combining Conditions

Media queries can also combine multiple conditions.

AND Condition (and) 
1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}
  • The AND condition applies styles when all conditions are met.
  • In this example, when the screen width is 600px or greater and in portrait orientation, the body background color is set to light green.
OR Condition (,) 
1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}
  • The OR condition applies styles when any condition is met.
  • In this example, when the screen width is 400px or less, or in landscape orientation, the body text color is set to gray.
NOT Condition (not) 
1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}
  • The NOT condition applies styles when the condition is not met.
  • In this example, for all devices, when the screen width is not 600px or greater, the body font size is set to 14px.

@font-face 

1@font-face {
2  font-family: 'CustomFont';
3  src: url('customfont.woff2') format('woff2'),
4       url('customfont.woff') format('woff');
5}

@font-face is used to define web fonts. With this rule, external fonts can be downloaded and applied to a webpage.

  • Custom fonts can be used instead of relying on standard fonts.
  • Attention to font file size is necessary.

@keyframes 

 1@keyframes slidein {
 2  from {
 3    transform: translateX(100%);
 4  }
 5  to {
 6    transform: translateX(0%);
 7  }
 8}
 9
10div {
11  animation: slidein 2s ease-in-out;
12}

@keyframes is used to create CSS animations. Styles can be specified at each step of an animation.

  • It allows for detailed control of animations.
  • It is used in conjunction with the animation property.

@supports 

1@supports (display: grid) {
2  .container {
3    display: grid;
4  }
5}

@supports checks whether certain CSS features are supported by the browser and applies styles based on the result.

  • It helps maintain compatibility between older and newer browsers.
  • Fallbacks can be applied through feature detection.

@page 

1@page {
2  size: A4;
3  margin: 2cm;
4}

@page is used to control styles for printing. It's useful for setting page size and margins.

Points:

  • It is used for setting styles for print media.
  • You can also customize the styles of specific page elements such as headers and footers.

@charset 

1@charset "UTF-8";

@charset specifies the character encoding of a CSS file. UTF-8 is mainly specified.

  • It must be specified at the beginning of the style sheet.
  • It is particularly used for multilingual websites.

@layer

@layer is a new @ rule used to organize the precedence of stylesheets in CSS, allowing multiple CSS rules to be grouped and managed by layers. This rule is particularly useful in large stylesheets or projects involving multiple external stylesheets to make it easier to avoid CSS conflicts.

In CSS stylesheets, precedence is usually determined by the 'cascade', but by using @layer, you can control style precedence more flexibly and explicitly.

Basic Syntax 

1@layer <layer-name> {
2  /* Styles within this layer */
3}
  • When defining styles using @layer, the syntax would be like this.
 1@layer reset {
 2    h1 {
 3        margin: 0;
 4    }
 5}
 6@layer base {
 7    h1 {
 8        font-size: 24px;
 9        color: blue;
10    }
11}
12@layer theme {
13    h1 {
14        color: red;
15    }
16}
  • For example, you can define styles in different layers like this:
  • In this case, the reset layer, base layer, and theme layer are defined respectively, and the final h1 style is determined by the theme layer contents, resulting in color: red; being applied.

Priority of multiple layers

The powerful feature of @layer is that it allows managing the priority of styles between layers. In the example above, because the theme layer is defined last, it overwrites styles defined in other layers.

Additionally, @layer can be used to manage the priority cascade in external stylesheets or CSS files loaded from other libraries.

Global priority 
 1@layer theme, base, reset;
 2
 3@layer reset {
 4    h1 {
 5        margin: 0;
 6    }
 7}
 8@layer base {
 9    h1 {
10        font-size: 24px;
11        color: blue;
12    }
13}
14@layer theme {
15    h1 {
16        color: red;
17    }
18}
  • The order of layers is prioritized within the CSS cascade, with styles defined later taking precedence. For example, you can explicitly specify the order of layers by writing them like this.
  • This ensures that styles are applied in the order of theme, base, and reset, even if the theme layer was defined first.

Using @import with @layer 

1@import url('css/reset.css') layer(reset);
2@import url('css/base.css') layer(base);
3@import url('css/theme.css') layer(theme);
  • By combining @import and @layer, it is also possible to manage layers in external stylesheets.
  • This allows external stylesheets to be placed in different layers, managing their priority.

Key points of @layer

@layer is a powerful tool in CSS style management, providing a convenient method to avoid style conflicts in large projects. It is particularly notable for managing style precedence concisely when dealing with multiple style sources. It would be good to keep the following points in mind.

  • By separating styles by layers, you can control the cascade precedence.
  • By using it alongside @import, you can include external CSS files in layer management.
  • Defining multiple layers can prevent style conflicts.

This minimizes style collisions and allows efficient design even in projects requiring complex style management.

Examples of using @layer

When using @layer, you can consider points such as layer naming conventions, import order, and the number of layers appropriate to the scale of the project.

Layer Naming

Layer names are determined based on the structure and purpose of the project. Common examples of layer naming include the following:.

1@layer base, layout, components, utilities;
  • base: A layer that defines basic styles such as resets and typography.
  • layout: A layer that defines the styles for page layout and grid systems.
  • components: A layer that defines the styles for reusable UI components like buttons and cards.
  • utilities: A layer that defines styles for utility classes (e.g., margin, padding, text-center).
Clear Import Order 
1@import url('base.css') layer(base);
2@import url('layout.css') layer(layout);
3@import url('components.css') layer(components);
4@import url('utilities.css') layer(utilities);
  • When handling multiple CSS files, it is important to set a clear order using @import. This order ensures the intended priority is maintained.
Layer Consolidation and Simplification 
 1@layer common {
 2  body {
 3    margin: 0;
 4    padding: 0;
 5    box-sizing: border-box;
 6  }
 7
 8  .container {
 9    max-width: 1200px;
10    margin: 0 auto;
11  }
12}
  • In small-scale projects, limiting the number of layers can reduce complexity.

Summary

CSS @ rules are powerful tools that support flexible style application and performance enhancement in web design. @media, @keyframes, and @supports make it easy to style considering device differences and browser compatibility. Additionally, @import and @font-face allow efficient incorporation of external resources for richer expression.

Understanding and properly using these @ rules enables more effective CSS coding.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS Pseudo-classes and Pseudo-elements