Before CSS was a thing, the only way to style HTML was to add styling information to each and every HTML element that you wanted to style. If you decided that you wanted all your H1 headings to be blue and all your H2 headings to be green, you had to add that information to each and every <code>h1</code> and <code>h2</code> element in your page. If you later decided to change your H1 headings to dark blue and your H2 headings to medium blue, you had to go through your code, line by line, and change each and every <code>h1</code> and <code>h2</code> element.
</p>
<p>
CSS changed all that. Now it was possible to add a simple <code><style></code> element to your document's head and declare all your style choices there. By putting this information in a separate stylesheet, you could easily ensure that all the pages across a website would have identical styling.
</p>
<p>
CSS is amazingly powerful. You can group selectors together, and you can use CSS classes to style multiple selectors or multiple elements, and use CSS ids to style a single element. However, it can still be difficult to change a group of elements.
</p>
<p>
That's where CSS variables come into play.
</p>
<h1>Basic Usage</h1>
<p>
A css variable can be declared in either a page's <code><style></code> element, or in an external stylesheet. Its scope will extend to wherever that stylesheet is referenced. A basic definition looks like this:
</p>
<pre>
element {
--variable-name: value;
}
</pre>
<p>
A real-life defintion might look like this in the css for the definition:
</p>
<pre>
ul {
--bg-color: #000000;
}
</pre>
<p>
…and like this in the use of that variable:
</p>
<pre>
.main {
background-color: var(--bg-color);
}
</pre>
<p>
And like this in the html:
</p>
<pre>
<ul class="main">
<li>First list item</li>
<li>Second list item</li>
</ul>
</pre>
<p>
The above variable works because we defined the <code>--bg-color</code> variable to operate under the scope of the <code><ul></code> element. To make a variable avaialable to <em>all</em> elements, define it under the <code>root</code> element:
</p>
<pre>
:root {
--bg-color: #000000;
}
</pre>
<h2>What use is this?</h2>
<p>
While CSS classes make it easy to change the style of a number of different elements at once, CSS variables make it easy to change the style of a number of different selectors at once. This is valuable if you are still developing the overall appearance of a website, or if you know that the appearance will change later, and you want certain elements to share a particular style.
</p>
<h2>A Few Important Things to Note:</h2>
<ol>
<li>Variable names <strong>must</strong> be prefaced by two hyphens (<code>--</code>).</li>
<li>Varialbe names are case-sensive. <code>--bg-Color</code> is not the same as <code>--bg-color</code>.</li>
<li>Variables are invoked using the <code>var(--variable-name)</code> construct.</li>
<li>Variables must be defined for a given element, which is then their scope.</li>
<li>To make a variable available to multiple elements, define it under the <code>root</code> element (:root). Note the leading colon.</li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate a erat id vehicula. Vestibulum viverra pulvinar velit non cursus. Curabitur euismod ullamcorper pellentesque. Quisque ac purus faucibus, dapibus diam suscipit, euismod enim. Curabitur aliquet enim sed metus rhoncus tempus. Etiam eget faucibus quam.
Phasellus vitae convallis nibh. Quisque laoreet nulla tempus accumsan fermentum. Duis consequat velit vel enim cursus, efficitur lobortis enim ultricies. Aliquam vel lacinia turpis, vel eleifend libero. Aenean interdum eros tincidunt congue malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
