How to define colors as variables in CSS ? - GeeksforGeeks

27 Apr, 2020
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.
Example 1:
<!DOCTYPE html><html>  <head>    <title>        How to define colors as variables in CSS?    </title>    <style>        :root {            --primary-color: rgb(15, 157, 88);            --secondary-color: rgb(255, 255, 255);        }          .first {            width: 50%;            padding: 40px 0px;            margin: 10px 0px;            text-align: center;              /* Apply color using CSS var */            background-color: var(--primary-color);            color: var(--secondary-color);        }          .second {              width: 50%;            padding: 40px 0px;            text-align: center;              /* Apply color using CSS var */            background-color: var(--primary-color);            color: var(--secondary-color);        }    </style></head>  <body>    <div class="first">        <h1>GeeksforGeeks</h1>    </div>      <div class="second">        <h1>GeeksforGeeks</h1>    </div></body>  </html>
Output:
Explanation: In the above example, we have defined two variable having scope of root (It can be used across the whole page), --primary-color and --secondary-color. Then, we have used them on class first and second, using CSS var() function.
Note: :root selector can be replaced with any local selector. Also, it will limit the scope of the defined variable within that selector only.
Example 2:
<!DOCTYPE html><html>  <head>    <title>        How to define colors as variables in CSS?    </title>      <style>        .first {              /* The defined colors are not scoped for               .first class only            */            --primary-color: rgb(15, 157, 88);            --secondary-color: rgb(255, 255, 255);              width: 50%;            padding: 40px 0px;            margin: 10px 0px;            text-align: center;              /* Apply color using CSS var */            background-color: var(--primary-color);            color: var(--secondary-color);        }          .second {            width: 50%;            padding: 40px 0px;            text-align: center;              /* Apply color using CSS var */            background-color: var(--primary-color);            color: var(--secondary-color);        }    </style></head>  <body>    <div class="first">        <h1>GeeksforGeeks</h1>    </div>      <div class="second">        <h1>GeeksforGeeks</h1>    </div></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML