CSS Variables

A CSS variable lets you place the value for a style in one place and reuse it throughout a stylesheet. As with other kinds of single-sourcing, this can help with speed, ease of use, and consistency. Whenever you want to change the value, you only need to do so in one place and the new value is propagated everywhere that the variable is referenced. You certainly could use the "find and replace" feature instead to change the value, but CSS variables are preferred because you won’t need to worry about inconsistencies in your stylesheet. For example, some values—such as colors—can be written in various ways, so in those cases CSS variables make a lot of sense.

Of course, color isn't the only place where you can use CSS variables; they can be used for all kinds of properties. But color might be where CSS variables are most commonly seen, so in this section we are mainly using color to illustrate how CSS variables work.

General Information

Process

Basics of CSS Variables

  1. Creating CSS Variables
  2. Inserting CSS Variables
  3. Editing CSS Variables
  4. Resolving CSS Variables for Internet Explorer

General Information

Basics of CSS Variables

Process

  1. Creating CSS Variables
  2. Inserting CSS Variables
  3. Editing CSS Variables
  4. Resolving CSS Variables for Internet Explorer