As a developer, the languages I have encountered so far have had a system of pointing to something in memory and giving it a name so that I could reference it later. As a student, you may have encountered this first in math class as a pre-algebra or algebra. This system is called variables, and we encounter them pretty much everywhere in computer science.
CSS is no exception. This article’s purpose is to introduce you to CSS Variables and show you how to implement them in your project to streamline your CSS.
Why Do We Need Variables?
This question comes up a lot with newer coders: Why do we need variables if the CSS works fine as it is? That’s a fantastic question! The answer will become clearer as you deal with large documents and more complex codebases.
The same color or the same font-size might need to be used in 100 different places. On the initial setup, one wouldn’t necessarily think of having to change a font or a color down the road, but it does happen!
Setting up your design system – the font-sizes, font-families, and color-scheme(s) – you will need for your project might save you time down the road if those colors needed to be changed because a company adopts a new color scheme or font-family. You would only need to change the system in one place as opposed to 100 different places!
Creating CSS Variables
CSS Variables are also known as CSS custom properties. We can name them what we would like as long as it’s introduced by two (2) hyphens (–) at the beginning of the property name. The most common use case is to set color-schemes and and design-system properties globally using the :root pseudo-class:
:root {
--main-bg-color: lightblue;
--secondary-bg-color: royalblue;
--main-color: black;
--secondary-color: purple;
--main-font-family: 'Roboto';
--heading-font-family: fantasy;
--font-xs: 1rem;
--font-sm: 1.1rem;
--font-md: 1.4rem;
--font-lg: 1.7rem;
--font-xl: 2.1rem;
--font-xxl: 2.8rem;
}The root element represents our <html> tag since it’s at the base of our document. Inside the code block are CSS custom properties or variables that can be used in our style sheet. The format of a CSS variable is this:
--<custom-property-name>: <css value>;
The property name can be whatever you’d like after you start your variable name with the two dashes. It is a good idea though to name it something fairly generic so that it might be able to be used in multiple spots. In this illustration, I used property names that describe what the value’s purpose is in our document. Having these variables allows us to streamline our CSS so that we keep font-sizes and colors consistent in our code.
Using CSS Variables
Using our variables that we created in the :root pseudo-element at the beginning of our CSS is fairly simple. Create a CSS selector with the property name you want to use your variable in. The syntax for using that variable is:
.sample-css-selector {
<property name> : var(<variable name>);
}The variable name refers to any one of the variables that were created in the root. The variable name does need the two hyphens at the beginning so don’t forget to include it!
One important thing to note is that these variables follow all of the same standard cascade rules. Basically, what this means is that you can have @media queries that assign different values to the same variable name! This defeats the need for media queries further down in your CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Variables</title>
<style>
:root {
--main-bg-color: lightblue;
--secondary-bg-color: royalblue;
--main-color: black;
--secondary-color: purple;
--main-font-family: 'Roboto';
--heading-font-family: fantasy;
--font-size-1: 1rem;
--font-size-2: 1.1rem;
--font-size-3: 1.4rem;
--font-size-4: 1.7rem;
--font-size-5: 2.1rem;
--font-size-6: 2.8rem;
}
@media screen and (max-width: 992px) {
:root {
--main-bg-color: green;
--secondary-bg-color: darkgreen;
--main-color: black;
--secondary-color: white;
--main-font-family: 'Roboto';
--heading-font-family: fantasy;
--font-size-1: .8rem;
--font-size-2: 1rem;
--font-size-3: 1.2rem;
--font-size-4: 1.4rem;
--font-size-5: 1.8rem;
--font-size-6: 2.1rem;
}
}
* {
box-sizing: border-box;
}
body {
font-size: 62.5%;
max-width: 800px;
width: 100%;
margin: 0 auto;
font-family: var(--main-font-family);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--heading-font-family);
font-weight: bold;
}
a {
font-size: var(--font-size-2);
}
h1 {
font-size: var(--font-size-6);
}
h2 {
border-bottom: 1px solid black;
font-size: var(--font-size-5);
}
h3 {
color: var(--secondary-color);
font-size: var(--font-size-4);
}
p {
font-size: var(--font-size-2);
}
header {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
background: var(--secondary-bg-color);
}
.logo {
font-variant: small-caps;
width: 50%;
padding: 0 20px;
color: var(--secondary-color);
}
nav {
width: 50%;
display: flex;
justify-content: space-around;
}
main {
padding: 20px;
display: flex;
flex-flow: row wrap;
width: 100%;
background: var(--main-bg-color);
}
section {
width: 50%;
padding: 10px;
}
ul {
border: 1px solid black;
padding: 20px;
}
</style>>
<body>
<header "main-container">
<h1 class="logo">logo here</h1>
<nav>
<a href- "">Link 1</a>
<a href- "">Link 2</a>
<a href- "">Link 3</a>
<a href- "">Link 4</a>
</nav>
</header>
<main>
<section>
<h2>Section heading here</h2>
<p>Webtwo ipsum joukuu dogster kazaa doostang, kippt. Tivo foodzie reddit hojoki zynga blekko, gooru yammer cloudera octopart zillow, weebly imvu kiko woopra. Foodzie sifteo airbnb balihoo mog dopplr,
convore vimeo xobni. oovoo movity bitly. Eduvant handango wesabe prezi appjet zinch, oooooc whrrl kiko. Xobni mzinga
balihoo lala, waze.</p>
<p>Oovoo boxbe meevee sifteo cuil zapier, joukuu sifteo yammer. imeem. Edmodo oooooc insala zoodles shopify, convore
Rovio. Jabber ifttt waze hojoki nuvvo lala, tivo skype bebo dopplr. Wufoo greplin ebay convore, blekko movity</p>
<h3>Section subheading</h3>
<p>
Twones lala qeyno. Bebo dogster hojoki doostang, cloudera. Hulu sclipo zanga
lala, lijit babblely. Voki kiko dogster, tumblr.
</p>
</section>
<section>
<h2>Section heading here</h2>
<p>Webtwo ipsum joukuu dogster kazaa doostang, kippt. Babblely whrrl chegg sifteo cloudera zinch sococo zoosk, ebay zoosk
convore stypi zoho. trulia. Eduvant tivo voxy dopplr blyve ifttt, chartly gsnap weebly zoosk. Tivo foodzie reddit hojoki
zynga blekko, gooru yammer cloudera octopart zillow, weebly imvu kiko woopra. Foodzie sifteo airbnb balihoo mog dopplr,
convore vimeo xobni. oovoo movity bitly. Eduvant handango wesabe prezi appjet zinch, oooooc whrrl kiko. Akismet sifteo
zimbra joukuu spock tumblr twitter, hipmunk grockit blekko flickr grockit, mzinga geni empressr hulu omgpop. Xobni mzinga
balihoo lala, waze.</p>
<p>Oovoo boxbe meevee sifteo cuil zapier, joukuu sifteo yammer. imeem. Edmodo oooooc insala zoodles shopify, convore
rovio. Imvu tivo zanga gsnap jumo sifteo, chartly cloudera bitly. Revver chartly mzinga sococo octopart, tumblr wufoo.
Jabber ifttt waze hojoki nuvvo lala, tivo skype bebo dopplr. Wufoo greplin ebay convore, blekko movity</p>
<h3>Section subheading</h3>
<p>
Vuvox boxbe babblely sifteo gsnap yammer bubbli, kazaa convore ideeli eskobo. mozy. Lala balihoo dropio etsy vimeo dogster
bebo, unigo shopify babblely skype wesabe. twones lala qeyno. Bebo dogster hojoki doostang, cloudera. Hulu sclipo zanga
lala, lijit babblely. Voki kiko dogster, tumblr.
</p>
</section>
<section>
<h2>Section heading here</h2>
<p>Webtwo ipsum joukuu dogster kazaa doostang, kippt. Babblely whrrl chegg sifteo cloudera zinch sococo zoosk, ebay zoosk
convore stypi zoho. trulia. Eduvant tivo voxy dopplr blyve ifttt, chartly gsnap weebly zoosk. Tivo foodzie reddit hojoki
zynga blekko, gooru yammer cloudera octopart zillow, weebly imvu kiko woopra. Foodzie sifteo airbnb balihoo mog dopplr,
convore vimeo xobni. oovoo movity bitly. Eduvant handango wesabe prezi appjet zinch, oooooc whrrl kiko. Akismet sifteo
zimbra joukuu spock tumblr twitter, hipmunk grockit blekko flickr grockit, mzinga geni empressr hulu omgpop. Xobni mzinga
balihoo lala, waze.</p>
<p>Oovoo boxbe meevee sifteo cuil zapier, joukuu sifteo yammer. imeem. Edmodo oooooc insala zoodles shopify, convore
rovio. Imvu tivo zanga gsnap jumo sifteo, chartly cloudera bitly. Revver chartly mzinga sococo octopart, tumblr wufoo.
Jabber ifttt waze hojoki nuvvo lala, tivo skype bebo dopplr. Wufoo greplin ebay convore, blekko movity</p>
<h3>Section subheading</h3>
<p>
Nuvvo babblely chartly mobly prezi, heroku akismet yammer skype zappos, weebly mobly blippy. Divvyshot dopplr imvu skype
omgpop jaiku, akismet jibjab squidoo lala. Boxbe sclipo prezi kaboodle oovoo yuntaa fleck, divvyshot foodzie zapier
scribd.
</p>
</section>
<section>
<h2>Section heading here</h2>
<p>Webtwo ipsum joukuu dogster kazaa doostang, kippt. Babblely whrrl chegg sifteo cloudera zinch sococo zoosk, ebay zoosk
convore stypi zoho. trulia. Eduvant tivo voxy dopplr blyve ifttt, chartly gsnap weebly zoosk. Tivo foodzie reddit hojoki
zynga blekko, gooru yammer cloudera octopart zillow, weebly imvu kiko woopra. Foodzie sifteo airbnb balihoo mog dopplr,
convore vimeo xobni. oovoo movity bitly. Eduvant handango wesabe prezi appjet zinch, oooooc whrrl kiko. Akismet sifteo
zimbra joukuu spock tumblr twitter, hipmunk grockit blekko flickr grockit, mzinga geni empressr hulu omgpop. Xobni mzinga
balihoo lala, waze.</p>
<p>Oovoo boxbe meevee sifteo cuil zapier, joukuu sifteo yammer. imeem. Edmodo oooooc insala zoodles shopify, convore
rovio. Imvu tivo zanga gsnap jumo sifteo, chartly cloudera bitly. Revver chartly mzinga sococo octopart, tumblr wufoo.
Jabber ifttt waze hojoki nuvvo lala, tivo skype bebo dopplr. Wufoo greplin ebay convore, blekko movity</p>
<h3>Section subheading</h3>
<p>
Vuvox boxbe babblely sifteo gsnap yammer bubbli, kazaa convore ideeli eskobo. mozy. Lala balihoo dropio etsy vimeo dogster
bebo, unigo shopify babblely skype wesabe. twones lala qeyno. Bebo dogster hojoki doostang, cloudera. Hulu sclipo zanga
lala, lijit babblely. Voki kiko dogster, tumblr.
</p>
</section>
</main>
</body>
</html>Conclusion
CSS has features that include variables – referenced custom properties that can be used as values to CSS properties in your selectors. Those variables follow the traditional cascading rules as regular CSS. This helps to make media queries a little simpler to construct when constructing responsive websites.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
