CSS Academy · Lesson

Adding Styles to Layers

Assign CSS rules to specific layers using @layer blocks and imported stylesheets.

Two Ways to Add Styles to Layers

You can add styles to a layer inline (inside an @layer block) or via @import (to assign an imported stylesheet to a layer).

Wrap rules inside an @layer block with the layer name:

@layer components {
  .button {
    padding: 10px 20px;
    background: royalblue;
    color: white;
    border-radius: 4px;
  }
}