CSS Custom Properties

CSS custom properties or CSS Variables are the entities that are defined by CSS authors itself in order to obtain the feature of reusability all over the document.

by Poonam Baveja

HTML

<p>This text is inside the paragraph</p>
<div>This is the text of div whose color is set to be green.</div></br>
<div id="red-text">
  This text is place inside a div with id - 'red-text'. That's why I am red in color.
  <p>This paragraph is place inside red-text div, that's why red in color because of inheritance.</p>
</div>
Just to test color of the body content.

CSS

:root { --text-color: blue; }
div { --text-color: green; }
#red-text { --text-color: red; }
* { color: var(--text-color); }