Variables are a common feature of most programming languages. To give an example of why variables in CSS can be useful, consider the following scenario:
When programming the UI for an application, you have picked a set of colors suitable to the constraints relating to the UI design of your web app. Following best practices, you then compose a few of your chosen colors into a theme, to provide a consistent look for your application.
In this scenario, you may need to change a certain color used across your application. This is not easy, if your application is large with its CSS source files running more than, say, 20,000 lines of code. To complete this task without variables, you would need...
In this tutorial, we will learn how to specify color values in CSS, and develop an understanding of the CSS color models like rgb, rgba, hsl and hex color codes. Once you know how to specify the colors, the same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.
The simplest, oldest way to specify color in CSS is to use the color keywords. These are specific strings that represent particular color values. For example, look at the following code: