Exploring Variables in CSS (custom properties)

#css #html #webdev

Variables in CSS (custom properties)

Like most programming languages, native CSS now has support for variables. If you have knowledge of programming languages, you will know variables are used to store values.

CSS variables (officially known as custom properties) are entities defined by a user. They allow you to store values in your CSS files, which other parts of your stylesheet can then use. This makes it easier for teams working on large projects and allows developers to change values without repeating the change to every element style. They can be used as a value for any property, including, color margin and padding (eg., — primary-color: red; ).

Prerequisite:

Basic knowledge of styling HTML documents using CSS.

Basic Usage — how to declare a custom property

To declare a variable in CSS, come up with a name for the variable, then append double hyphens (-) as the prefix.

It is best practice to define all of your variables at the top of your stylesheet. You could declare them in the :root element.

:root {
--primary-color: #FF5733;
--mypadding: 2rem;
}

Note: The custom property isn’t just for declaring color property. It could be used to house different CSS style properties.

Here is a working example:

Here’s an HTML boilerplate with a couple of HTML tags. We’ll be styling these tags with CSS variables.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="hello.css" />
</head>
<body>
<h1>Welcome to Medium</h1>
<h2>Using CSS custom properties</h2>
</body>
</html>

I decided to center the text and change the background color with my predefined variable (--body-color). I defined five variables at the top of the stylesheet.

Lastly, I applied those variables to my tags using the var() function.

CSS part:

:root {
  --body-color: rgb(33, 47, 108);
  --primary-color: #ff5733;
  --secondary-color: #ebb41f;
  --H1font-size: 4em;
  --H2font-size: 2em;
}
body {
  background-color: var(--body-color);
  text-align: center;
}
h1 {
  color: var(--primary-color);
  font-size: var(--H1font-size);
}
h2 {
  color: var(--secondary-color);
  font-size: var(--H2font-size);
}

Handling invalid variables with fallbacks:

In some cases, you might reference a custom property that isn’t defined in the document. This is the case when you misspell a variable name. You can specify a fallback value to be used in place of that value. The syntax for providing a fallback value is still the var() notation. Add a comma and then give the values that come as a substitute. You could suggest multiple fallbacks.

:root {
  --primary-color: #33ffd3;
}
h1 {
  color: var(--priary-color, #ff0000, #ffffff); /* if --priary-color doesn't work, then the next fallbac*/
}

Did you notice that I misspelled the value — primary-colour? This should cause the value to be undefined, in which case the browser would use the first fallback value (red). If, for some reason, the first fallback doesn’t show, the next value would kick in(white), and so on. The browser will use the initial default color if it can’t find any of the provided values.

Building a button variation — applying custom properties

We’ll be applying the knowledge of custom properties to create different buttons. Buttons are an important part of a website. The appearance of a button is necessary for any website. I created three buttons and styled them with the predefined variables.

Here is the Html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="hello.css" />
</head>
<body>
<section>
<h2>Button variation</h2>
<button class="Success">Submit</button>
<button class="Cancel">Cancel</button>
<button class="Back">Back</button>
</section>
</body>
</html>
Here I gave each of the buttons different class names which I will style in the CSS section.
:root {
--back: #353434;
--cancel: #ce0606;
--success: #138b71;
--white: #ffffff;
}
.Back {
background: var(--back);
color: var(--white);
padding: 1rem 20px;
border-radius: 10px;
color: var(--white);
font-weight: 700;
cursor: pointer;
outline: none;
font-weight: 700;
}
.Success {
background: var(--success);
color: var(--white);
padding: 1rem 20px;
border-radius: 10px;
color: var(--white);
font-weight: 700;
cursor: pointer;
outline: none;
font-weight: 700;
}
.Cancel {
background: var(--cancel);
padding: 1rem 20px;
border-radius: 10px;
color: var(--white);
font-weight: 700;
cursor: pointer;
outline: none;
font-weight: 700;
}

The variables are defined in the :root element with various colors. These variables are then added to the various background and colors using their variable names.

The output:

Variables are a great way to add flexibility to your CSS. They allow you to change the value of a property at runtime, and they’re also helpful for easily testing different values. Variables are an essential part of modern CSS development, but they can be hard to understand for beginners. This article is to walk you through how they work and how you can use them in your own projects.