Code has been added to clipboard!

CSS Variables: Learn to Define Custom Properties

Reading time 2 min
Published Oct 1, 2019
Updated Oct 2, 2019

TL;DR — CSS variables are custom entities that you can define and reuse in your document instead of repeating the same values.

What's a variable in CSS?

Just like you can define your own functions in JavaScript or PHP, you can create custom CSS properties, also known as CSS variables. They contain particular values that you would otherwise need to repeat multiple times in a document (e.g., a specific color).

Using variables in CSS not only saves you time but also simplifies updating the page, as you only need to change the value in one place instead of all across the document.

How to create a CSS variable

To define a variable in CSS, you need to write two dashes (--) in front of its actual name and specify a particular value:

--name: value;

In the example below, we create a custom CSS color variable with a specific color defined in a HEX value:

Example
p {
  --main-text-color: #036627;
}

We recommend using semantic names instead of random ones (e.g., --main-text-color is better than --color1). This will make it easier to read and update the code later.

Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Using variables in CSS code

To reuse the value you specified in the CSS variable, you need to use the var() function with the variable's name as the value:

Example
p {
  color: var(--main-text-color);
}

CSS variables: useful tips

  • When using the var() function, you can also include a specific value as a fallback. Write it after the variable name and separate the two using a comma.
  • Keep in mind that CSS variables are case-sensitive!

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 25/01/2021
3176 People Used
Only 97 Left
Rating
5.0