{"id":18024,"date":"2013-09-02T18:01:01","date_gmt":"2013-09-02T10:01:01","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18024"},"modified":"2025-04-24T17:08:04","modified_gmt":"2025-04-24T09:08:04","slug":"css-variables","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-variables\/","title":{"rendered":"A Look Into: Using CSS Variables"},"content":{"rendered":"

Variables, officially known as Custom Properties, have finally come to CSS<\/a> \u2013 the language we use daily for styling webpages. We have discussed using variables with CSS Pre-processors<\/a> in our previous posts<\/a>. Today, we will see how to use them natively in CSS.<\/p>\n

Declaring Variables<\/h2>\n

CSS custom properties are defined using a name that begins with two dashes (--<\/code>), like so:<\/p>\n

\n--primary-color: #333;\n<\/pre>\n
In the example above, we created a custom property named --primary-color<\/code>. Unlike some CSS Pre-processor variables, custom properties must be declared within a CSS ruleset, typically on the :root<\/code> pseudo-class to make them globally available.<\/p>\n
For example:<\/p>\n
\n:root {\n  --primary-color: #333;\n}\n<\/pre>\n
When naming custom properties, it\u2019s advisable to follow standard CSS naming conventions.<\/p>\n
CSS typically uses dashes to separate words (kebab-case), like --primary-color<\/code>. While JavaScript often uses camelCase (e.g., variableNamesLikeThis<\/code>), sticking to kebab-case for CSS variables ensures consistency within your stylesheets.<\/p>\n
Using Variables<\/h2>\n
How do we apply these variables in CSS rules? We use the var()<\/code> function to retrieve the value of a custom property. For instance, to apply the primary color to the body\u2019s background, we would write:<\/p>\n
\n:root {\n  --primary-color: #333;\n}\n\nbody {\n  background-color: var(--primary-color);\n}\n<\/pre>\n
CSS variables (Custom Properties) are now widely supported across all modern browsers without vendor prefixes.<\/p>\n
Scope<\/h2>\n
If you are familiar with JavaScript, you should already understand the concept of Scope<\/strong>. Similarly, scope applies to CSS custom properties. The value is inherited and will be applied to the element where it is declared and its descendants.<\/p>\n
In our previous example, declaring the variable on the :root<\/code> pseudo-class makes it available globally to all elements on the page.<\/p>\n
If we declare it within a specific selector, like a div<\/code>:<\/p>\n
\ndiv {\n  --primary-color: #333; \/* Or a different value *\/\n}\n<\/pre>\n
Then the variable (or its specific value within this scope) will only be available to that <div><\/code> and its descendants.<\/p>\n
Further Resource<\/h2>\n