CSS Custom Property
CSS custom properties, often called CSS variables, can store reusable values throughout CSS. This can make your CSS more manageable and maintainable, especially for 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.
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
--padding: 10px;
}Using Custom Properties
You can use custom properties in other CSS properties.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Custom Properties Example</title>
<style>
/* Define css custom properties for light theme */
:root {
--background-color: white;
--text-color: black;
--button-bg-color: #3498db;
--button-text-color: white;
--button-hover-bg-color: #2980b9;
--padding: 10px;
--border-radius: 5px;
}
/* Define css custom properties for dark theme */
body.dark-theme {
--background-color: #2c3e50;
--text-color: #ecf0f1;
--button-bg-color: #e74c3c;
--button-text-color: white;
--button-hover-bg-color: #c0392b;
}
/* Apply the css custom properties */
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: Arial, sans-serif;
padding: var(--padding);
}
.container {
max-width: 800px;
margin: 0 auto;
}
h1 {
font-size: 2em;
}
button {
background-color: var(--button-bg-color);
color: var(--button-text-color);
padding: var(--padding);
border: none;
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: var(--button-hover-bg-color);
}
</style>
</head>
<body>
<div class="container">
<h1>Defining CSS Custom Property</h1>
<button>Click Here</button>
</div>
</body>
</html>In the above example
Custom Properties Definition
The global custom attributes for the light theme are defined in the :root selector.
Additional custom properties for the dark theme are defined in the .dark-theme class used in the body.
Applying Custom Properties
Custom properties are used throughout the CSS including the var() function.
Background-color, color, padding, and other elements are set strategically by these custom elements.
Theming
By turning on the .dark-theme class on the body element, you can switch light and dark themes without changing individual CSS properties. This makes it easier to manage and update topics.
JavaScript Interaction
You can dynamically change custom properties using JavaScript, adding interactivity and dynamic styling to your web applications.
Output-
Light Theme
Dark Theme
The JavaScript turns the dark theme on and off when a button is clicked, demonstrating how easily you can change the theme with custom properties.
CSS custom properties provide a powerful way to manage styles, making your CSS more flexible and manageable. They are especially useful for themes, functional concepts, and strategic complexity.
Also, Read: Explain CSS animation with an example
Leave Comment