<main>

**Browser Support Alert:** At the time of coding, this feature was only supported in Chrome 85 and above. If you don't see any text in DeepPink, your browser doesn't support `@property` at-rule.

<h1 class="title">Preview</h1>
<article class="stage">

   <h1>The spectacle before us was indeed sublime</h1>
   <p>Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.</p>
</article>

<h1 class="title">Explanation</h1>

The `@property` at-rule is used to declare custom properties (a.k.a. CSS variables) with acceptable type, initial value and inheritance behavior.

In this CodePen, the property `--brandColor` is declared not to be inherited with initial value of `DeepPink`. Therefore, `p` tag inside `article` element does not inherit `RoyalBlue` value set in `article` element. This is because modified value of `RoyalBlue` is only valid in `article` tag; further down it will reset to its initial value declared in `@property` declaration - `DeepPink`.

Another subtle point to note is that once we used `--brandColor` to set `color` in `article` tag, `color` property’s computed value was inherited in `h1` tag. The `color` property inherit naturally as computed value and this fact can’t be influenced by `@property` at-rule.

</main>
View Compiled
@property --brandColor {
   syntax: "<color>";
   initial-value: DeepPink;
   inherits: false;
}

body {
   // Backward compatibility for browsers
   // without @property support
   --brandColor: DeepPink;
}

article {
   --brandColor: RoyalBlue;
}

.stage {
   // RoyalBlue
   color: var(--brandColor);
   font-size: 14px;

   p {
      //Resets to DeepPink
      color: var(--brandColor);
   }
}

// Demo Styles follows
// Irrelevant for the explanation
body {
   font-family: Georgia, serif;
   font-size: 16px;
   line-height: 1.5;
}

main {
   max-width: 50em;
   margin: 1rem auto 5rem;
   padding-left: 10px;
   padding-right: 10px;
}

.title {
   font-size: 1rem;
   text-decoration: underline;
   text-transform: uppercase;
}

code {
   background: papayawhip;
   color: chocolate;
   padding: 1px 3px;
   border-radius: 2px;
   font-size: 0.8em;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.