---
title: "Explain the CSS Custom Properties"
description: "By creating CSS custom property you can make your CSS more manageable and maintainable, especially for large projects."
author: "Ashutosh Patel"
published: 2024-06-11
updated: 2024-06-11
canonical: https://www.mindstick.com/blog/304343/explain-the-css-custom-properties
category: "css-css3"
tags: ["css-css3", "css", "css property"]
reading_time: 3 minutes
---
# Explain the CSS Custom Properties
### CSS Custom Property
CSS [custom properties](https://www.mindstick.com/forum/157966/what-is-the-role-of-css-custom-properties-in-bootstrap-5), [often called](https://answers.mindstick.com/qa/100590/which-country-is-often-called-the-land-of-the-rising-sun) CSS variables, can store reusable values throughout CSS. This can make your CSS more manageable and maintainable, especially for [large projects](https://www.mindstick.com/forum/159481/how-does-c-plus-plus-handle-namespaces-and-what-is-their-significance-in-large-projects).
**Syntax**\
The `--` prefix is used to define custom properties, and the `var()` function to define custom properties.
**For example**\
**Defining Custom Properties**\
You can define custom properties at different levels: globally in the `:root` pseudo-class, or locally in specific selectors.
```css
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
--padding: 10px;
}
```
**Using Custom Properties**\
You can use custom properties in other CSS properties.
```css
body {
font-size: var(--font-size);
color: var(--primary-color);
}
button {
background-color: var(--secondary-color);
padding: var(--padding);
border: none;
color: white;
cursor: pointer;
}
button:hover {
background-color: var(--primary-color);
}
```
#### Advanced Example
Let's create a more complex example with a simple theming system.
```html
CSS Custom Properties Example