CSS Variables Tutorial
Tags: css, webdev, tutorial, writing
Published: 2022-07-27 13:04:00

**Custom Properties** (commonly known as **CSS Variables**) are a modern addition to CSS. If you’ve worked with programming languages such as JavaScript, Python, etc, you’ll know that variables are extremely useful.

A **variable** is a name which refers to a value, and by using variables in CSS we greatly reduce code repetition & create much more easily maintainable stylesheets.

## Defining a CSS Variable
We define a variable by using a name beginning with a double hyphen (`--variable-name`), followed by a colon and a value (any valid CSS value):
```css
:root {
  --main-color: green;
}
```
The `:root` pseudo-class is a special selector, that applies the style globally to the HTML document. More on this later!

The variable can be accessed using `var()`:
```css
p {
  color: var(--main-color)
}
```

## Defining Variables in Elements
We can define CSS Variables inside of any element:
```css
:root {
  --default-padding: 30px 30px 20px 20px;
}
body {
  --main-bg-color: black;
}
p {
  --main-color: lightblue;
}
a:hover {
  --main-color: red;
}
```

## Variable Scope
Each variable is available only to child elements of the selector they are defined in — this is the ‘scope’.

Let’s see this in the context of our previous example using `:root`:
```css
:root {
  --main-color: green;
}
```
`:root` is a special pseudo-class that refers to the the root element of a tree.

In an HTML document, the `:root` selector refers to the `html` element. And in fact, it has a higher [specificity](https://dev.to/rembertdesigns/the-cascade-inheritance-specificity-walkthrough-4753) than html so it will always take priority.

So when a variable is applied to `:root` it’s considered to have ‘global scope’ & is available to all elements.

If we added a variable to a `main` element, it’d only be available to children of `main`:
```css
main {
  --main-color: lightblue;
}
```
If we attempt to use it using it outside of this element, it won’t work.

So with our two variables as follows:
```css
:root {
  --main-color: green;
}
main {
  --main-color: lightblue;
}
```
Our `--main-color` will be _green_ anywhere in our document, **except** for `main` and any of its child elements — they will be _lightblue_.

## Bonus tips..

### Case sensitivity
CSS variables are case sensitive!
```css
:root {
 --color: green;
 --COLOR: lightblue;
}
```
So `--color` and `-COLOR` are two separate variables.

### Using variables in HTML
Variables can be used directly in HTML, like so:
```html
<!--HTML-->
<html style="--size: 800px">
body {
  max-width: var(--size)
}
```

### Using variables within variables
A variable can be used within another variable:
```css
--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);
```

### Using variables with math
CSS variables can be used with the calc() function:
```css
--input-width: 500px;
max-width: calc(var(--input-width) / 2);
```

### Using variables with media queries
We can make CSS variables conditional with media queries!

The following code changes the value of the padding, based on the screen size:
```css
:root {
	--padding: 25px 
}
@media screen and (max-width: 750px) {
	--padding: 10px
}
```

### Setting a fallback value for var()
When you use the `var()` function you can define a second parameter. This value will be used if the custom property is not found:
```css
width: var(--custom-width, 33%);
```

## Summary
I’m sure you can tell that the use of CSS variables will make your code much more readable and maintainable.

They also significantly improve the ease of change across larger codebases. If you set all your constants in a separate CSS file, you won’t find yourself jumping through thousands of lines of code, whenever you want to make a simple change!

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)