CYBER WEEK SALE: Get 50% off your Pro annual membership using code [CYBER23](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=CYBER23)


Learn how to use CSS variables to make programs more organized, efficient, and legible.

CSS Variables

CSS Variables are defined the same way as any other CSS declaration, making them syntactically convenient and easy to remember.

Each variable declaration must begin with a double hyphen (`--`) followed by the variable name. After the variable name is declared a value can then be assigned to it.

In the example below, we have a variable named `--main-header-color` with a color value `#DADECC` assigned to it. Note the double hyphen (`--`) that is preceding the variable name.

 ```css
 h1 {
  --main-header-color : #DADECC;
}
```

There are specific naming conventions to keep in mind when declaring variables. The first is that variables are case sensitive, meaning `--body-text-color` and `--Body-Text-Color` are two different variables. It is also good practice to avoid using capital letters in variable names to prevent this type of confusion. Additionally, it is common to use hyphen delimited strings such as writing `--list-background-color` instead of `--listBackgroundColor` when defining a variable name.

Defining Variables

Now that we know how to define and initialize CSS variables, let's learn how to use them. As we saw in the last exercise, when we define variables in place of hardcoded properties, the variable does not immediately take the place of that property's value.

To use CSS variables as values of properties, we must specify the variable's name as an argument inside of the `var()` function. We will learn more about CSS functions in the next lesson.

The `var()` function allows the specified CSS variable to be used as a value of a property. 

```css
h1 {
  --main-background-color: #DADECC;
  background-color: var(--main-background-color);
}
```

To set the background color of the `h1` selector, the `--main-background-color` variable was declared and given a value of `#DADECC`. Then on the next line, we use the variable as the value of the `background-color` property by passing `--main-background-color` as the argument of the `var()` function.

Another powerful way to use CSS variables is to create variables based on other variables. This can be useful for keeping track of color schemes and to keep CSS rules modular.

```css
html {
  --custom-purple: #FF64ED;
  --main-color: var(--custom-purple);
}

body {
  background: var(--main-color);
}
```

In the example above, we first declared a variable called `--custom-purple` and gave it a value of `#FF64ED`. Then, we defined a variable called  `--main-color` and set its value to be the `--custom-purple` variable defined above it. Now, instead of referring to `--custom-purple` in the `html` and `body` selectors, we are able to refer to `--main-color` to set the background color.
   
It is important to note that if we were to try to redefine the `--custom-purple` variable then no visual changes would happen. 

```css
html {
  --custom-purple: #FF64ED;
  --main-color: var(--custom-purple);
}

body {
  /*Trying to override the --custom-purple variable defined in the html selector rules*/
  --custom-purple: #FFFFF;
  background: var(--main-color);
}
```

In the modified CSS code above, the `--custom-purple` variable was overwritten in the `body` selector rules. But because `--main-color` was already set to the value of the `--custom-purple` variable defined in the `html` selector it doesn't have any reference to the overwritten variable in `body`. Because of this, the `body` element’s background color will still be `#FF64ED`.

Using Variables

Just as CSS variables are subjected to local and global scope, they also follow standard CSS inheritance. If a variable is not explicitly defined on a child element, the value of its parent variable is used if there is one. This can be important to keep in mind as some property values set on parent elements are inherited by their child elements and some aren't. As a reminder widths, margins, paddings, and borders do not inherit.

As we saw in the previous exercise, different scopes allow for the same variable to have multiple values when declared in multiple locations.

```css
h1 {
  --color: pink;
}

p {
  --color: blue;
}

h1 { 
  color: var(--color);
}

p {
  color: var(--color);
}
```

Above, the `--color` variable is being declared and referenced in both the `<p>` and `<h1>` selectors. But in each case the color value is different. CSS has no issues with using variables this way because both variables are locally scoped. We can think of it like the `<h1>` selector only ever knowing about the `--color` variable declaration with a referenced value of pink. With the same being true for the `<p>` selector.

It is also possible to override a variable's value. A common case for doing this is when we want variables to change only in a specific section of a webpage. For example, if we want a different shade of orange for button elements inside the navigation bar from a submit button elsewhere on the page.

We can re-declare an `--orange-color` variable inside of a specific button selector. And when that `--orange-color` variable is referenced in the specific selector it will be the locally chosen orange color.

```css
:root {
  --orange-color: #FF933A;
}

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

button {
  --orange-color: #BF6317;
  color: var(--orange-color);
  border: 1px solid black;
}
```

Inheriting and Overriding Variables

Like other CSS properties, when we define a CSS variable, we are also giving that variable a set _scope_. In CSS, the scope is what determines where a variable will work based on where it is declared. Variables can have two kinds of scope: local and global. So far we have only dealt with variables with local scope.

A locally scoped CSS variable will only affect the specific HTML element that it is declared in along with any children that element may contain.

```html
<nav id="menu-items">
  <ul>
    <li><a href='#'>One</a></li>
    <li><a href='#'>Two</a></li>
    <li><a href='#'>Three</a></li>
  </ul>
</nav>
```

For instance, in the above code snippet, the `<nav>` element with the id of `'menu-items'` contains an unordered list.

```css 
#menu-items {
  --menu-color-blue: blue;
}

#menu-items a {
  color: var(--menu-color-blue);
}
```

Because the `--menu-color-blue` variable was declared inside the `#menu-items` selector, only `#menu-items` and its children can reference the variable. 

Globally scoped variables are declared in the `:root` pseudo-class. This pseudo-class points to the root element of the document, hence its name. In most cases that root element is actually the `<html>` element. By declaring variables in `:root` they can be applied globally across the entire HTML document.  

 If we were to modify the previous example to instead declare `--menu-color-blue` inside of `:root`, then that variable would be able to be referenced anywhere in the document.

```css 
:root {
  --menu-color-blue: blue;
}

#menu-items a {
  color: var(--menu-color-blue);
}
```

It is common practice to define variables inside the `:root` selector but not mandatory. There are plenty of good reasons for declaring variables with limited scope. For instance, if a large website is being designed then it could be a cleaner solution to create variables within relevant components instead of having all the variables pile up in `:root`. 

Scoping Variables

In this lesson, we learned how to use CSS variables to make property values more legible and easily replaced. We also learned about the power of scoping, overriding variables, and fallback values. Finally, we practiced using variables with media queries to create a website with dynamic web themes. 

* Variables mitigate the need to repeat property values and make CSS code easier to read.
* You can use variables in CSS to store values.
* Variable declaration must start with a double hyphen (`--`).
* Variables must be used as values for CSS properties.
* Variables must be used as an argument inside of the `var()` function.
* Variables are subject to both scope and inheritance.
* Globally scoped variables are defined inside the `:root` pseudo-class.
* Overriding a variable is done by redefining that variable's value inside of the desired selector ruleset.
* Fallback values can be used to provide a backup value if the initial variable is invalid.
* Multiple fallback values can be provided by adding more values inside cascading `var()` functions.
* Responsively designed web pages can be created by combining variables with media queries.

Review

Imagine that you have just finished the final version of a large client website. Everything looks great and you are happy with its layout and design. But when you show your client the finished site they ask you to change one of the main background colors to something with more pop. That doesn't seem like too big of a task. You just need to find a new color and replace all the old background color values with the new one, except the old color is used a lot so it becomes extremely time-consuming. CSS actually has a solution for these types of issues when they arise&mdash;variables.

In programming languages, variables are symbolic names, or containers, for storing values/information. We can think of them in a similar manner to the way that "x" and "y" are often used as placeholders for values in mathematics. Variables allow information to be maintained and referenced in multiple locations. They also make it easier to read and understand code. Especially when it's someone else's!
  
CSS has variables in its own style&mdash;more specifically, they are called _Custom Properties_. These variables can be used to hold specific values that can be reused throughout the stylesheet. Variables mitigate the need to repeat values and make values easier to understand what they are used for. For instance, `--main-red-color` is much easier to understand than `#7f3f3f`.

By the end of this lesson, you will be able to use CSS variables to make your programs more organized, efficient, and legible!

Variables

So far, we have seen how CSS variables make it easier to reuse and read CSS code. But variables are also extremely powerful when used with media queries to create responsive designs.

By using variables alongside media queries, we can dynamically change styles according to changes in viewport size and general system preference. For example, we can change the color scheme of our website when a user has their system preference set for dark themes versus light themes.

In the [Media Queries](https://www.codecademy.com/courses/learn-intermediate-css/lessons/media-queries) lesson, we learned that media queries can be used for conditionally applying styles based on interaction, screen size, type, and more. When using media queries with CSS variables, the main point of note is that we just need to redefine variable values for the effect to take place.

```css
@media screen and (min-width: 600px) {  
  :root {
    /* Light Color Theme */
    --body-background: lightblue; 
    --inner-margin: 6px;
    --body-text-color: black;
    --font-size: 18px;
  }
}

@media screen and (max-width: 600px) {
  :root {
    /* Dark Color Theme */
    --body-background: #000; 
    --inner-margin: 12px;
    --body-text-color: #fff;
    --font-size: 12px;
  }
}
```

The example shown above highlights a possible scenario for integrating variables with media queries. Here, we are changing the general style and font size of the web page depending on the size of the page. If the screen width is `600px` or smaller, styles for a dark theme are applied. If the screen size is larger than `600px`, then it switches to a light theme.

If we didn't use variables to do this, we would need to set new values for the color properties inside the appropriate media queries. But by using variables, all we have to do is redefine the variable directly! When websites scale up and become more complex, with different theme settings, screen variations, and more, redefining a relatively small number of variables becomes much easier than overriding a large number of hardcoded CSS properties.

Responsiveness

Sometimes there are reasons why a given variable may be invalid when the webpage renders. For example, the variable could have been set improperly&mdash;a variable with a value of `20px` could mistakenly be set as the value of the `background-color` property. Fallback values prevent these types of errors from happening.
    
Fallback values can be provided as the second and optional argument of the `var()` function. As the name suggests, they will be used if the variable given as the first argument is invalid.

An example of declaring a fallback value is as follows:

```css
body {
  background: var(--main-background-color, #F3F3F3);
}
```

If a value of `--main-background-color` hasn't been explicitly defined in the stylesheet or returns a non-color value, then the fallback value of `#F3F3F3` is used.

The fallback value may also be a CSS variable, in which case it must be passed using another `var()` function. Also, note that the `var()` function accepts a maximum of two arguments.

```css
body {
/* --favorite-orange if --main-color is invalid and red if --favorite-orange is invalid */
font-color: var(--main-color, var(--favorite-orange, red));
```

In the above code, we set `--favorite-orange` as the fallback value of the `--main-color` variable and `red` as the fallback value of the `--favorite-orange` variable. We could continue with this pattern and provide yet another CSS variable in place of the `red` fallback value.

```css
body {
/* --favorite-orange if --main-color is invalid and --favorite-yellow if --favorite-orange is invalid and yellow if --favorite-yellow is invalid */
font-color: var(--main-color, var(--favorite-orange, var(--favorite-yellow, yellow)));
}
```

Fallback values are optional, but they ensure that the specified styles will be applied to the web page in the case of an error.    

An important last note on fallback values is that they are not used to fix browser compatibility issues. If the browser being used does not support CSS variables, as is the case with Internet Explorer, fallback variables will not ensure all elements are rendered properly. Thankfully most modern browsers support CSS variables&mdash;we will talk about these types of issues in the [Browser Compatibility](https://www.codecademy.com/courses/learn-intermediate-css/lessons/learn-intermediate-css-browser-compatibilit) lesson!