The CSS Series: Part 11 - Custom Properties

Once you pick a color palette for your website, you can imagine how often you'll write those color values in your stylesheet. You could have the same color listed as a property value in thirty or more places! Now imagine if your client or team suddenly needs to change your site's color palette? You'd have to go through the entire document and change each of those 30+ values!

One way to avoid this is to use CSS custom properties, also known as CSS variables. CSS custom properties are variables defined by CSS authors that contain specific values to be reused throughout a document. This tutorial will show you how to create and use CSS variable.

Understanding CSS Custom Properties

Let's say our client thinks they'd like their website background to be gray. And all borders are black. Font colors should be white, they say. But you've worked with enough people to know that this will change a few times before finishing your project, so you decide to set up custom properties. You would create custom properties for each of these colors like so:

/ stylesheet.css

:root {
    --background: gray;
    --border: black;
    --font: white;
    }

By declaring the CSS custom properties inside of the root pseudo-class, these custom properties are globally available throughout your entire project. Assigning a custom value to a div declaration means that the custom variable would only be available to div types. This is due to a process referred to as scoping, which you'll learn more about as you dive into a language like JavaScript. But for now, let's carry on with our website design stylesheet, inserting these custom properties into your project like so:

/ stylesheet.css

:root {
    --background: gray;
    --border: black;
    --font: white;
    }

div .header {
    background-color: var(--background);
    border: 5px solid var(--border);
    color: var(--font);
    }

h1,
h2,
h3,
h4 {
    color: var(--font);
    }

body {
    background-color: var(--background);
    color: var(--font);
    }

Now your html is styled with the property values assigned to your custom properties of --background, --border, and --font. As you can see, if you needed to change the color palette of the entire website, all you would need to do is change the property value assigned to your custom property declarations inside of the root pseudo-class.

The benefits of CSS custom properties are not limited to colors and you're really only limited by your imagination.

You can catch up on the rest of the series at the links below:
Part 1: An Intro to CSS
Part 2: How to Link a Stylesheet to Your index.html File
Part 3: Selectors
Part 4: Properties
Part 5: The Box Model
Part 6: CSS Units
Part 7: Flexbox
Part 8: CSS Grid
Part 9: Display Property
Part 10: Specificity