CSS variables

This lesson will help you understand the concept of CSS variable which is used to represent specific values to be reused throughout a Web page.

Quick Hands-on

Points to Remember

• CSS variables are the entities in CSS that represent specific values to be reused throughout the Web page.

• We can create local and global CSS variables.

• The syntax to create CSS variable is:
  • –variable-name: value;
  • Example: –primary-color: red;
• To access the CSS variable, we can use following syntax:
  • var(–variable-name)
  • Example: var(–primary-color)

• The global variable can be accessed through the entire web page, while the local variable can only be accessed inside the selector where it is defined.

• We can use the “:root” selector to create a global CSS variable. 

• The local variable can be created by declaring it inside the selector that it is going to use.

• The local CSS variable will override the global CSS variable.