In CSS, we can define custom properties (often known as CSS variables), that offers us great flexibility to define a set of rules and avoid rewriting them again and again. We can also use custom properties to define colors.
Explanation: In the above example, we have defined two variable having scope of root (It can be used across the whole page),
--secondary-color. Then, we have used them on class first and second, using CSS var() function.
:root selector can be replaced with any local selector. Also, it will limit the scope of the defined variable within that selector only.
- CSS | Colors
- How to set Bullet colors in HTML Lists using only CSS?
- Materialize CSS | Colors
- CSS | Variables
- “static const” vs “#define” vs “enum”
- How to define a caption for a fieldset element in HTML5 ?
- How to define jQuery function ?
- How to define marked/highlighted text using HTML5 ?
- How to define important text using HTML5 ?
- How to define a possible line-break using HTML5 ?
- How to define keyboard input in HTML5 ?
- How to define a piece of computer code in HTML5?
- Define ng-if, ng-show and ng-hide
- How to define a table caption using HTML ?
- How to define additional details that the user can view or hide?
- How to define preformatted text using HTML ?
- How to define subscripted text in HTML5?
- How to define a variable in HTML5 ?
- How to define a paragraph in HTML5 ?
- How to define the result of a calculation using HTML5 ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.