HTML CSS - Custom Properties

Defining and using custom properties in CSS

Custom properties (also known as CSS variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They make CSS more maintainable and easier to understand by allowing you to store values in one place and reference them throughout your stylesheets.

Defining Custom Properties

Custom properties are defined within a CSS selector using the --property-name: value; syntax. Typically, they are defined in the :root pseudo-class so they can be accessed globally:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}
            

Using Custom Properties

Once defined, custom properties can be used in your CSS by referencing them with the var() function:

body {
    font-size: var(--font-size);
    color: var(--primary-color);
}

h1 {
    color: var(--secondary-color);
    font-size: calc(var(--font-size) * 2);
}
            

In this example, the font-size and color properties are set using the values of the custom properties defined in the :root pseudo-class.

Advantages of Using Custom Properties

Using custom properties offers several advantages:

• Maintainability: Store values in one place and update them easily without searching through your entire stylesheet.
• Consistency: Ensure that the same values are used consistently across your stylesheets.
• Dynamic Updates: Change the values of custom properties dynamically with JavaScript for theming and other purposes.

Scope and Inheritance

Custom properties are scoped to the elements on which they are defined and inherit like regular CSS properties. You can override them within specific selectors:

:root {
    --primary-color: #3498db;
}

.header {
    --primary-color: #e74c3c;
}

.header h1 {
    color: var(--primary-color); /* Will be #e74c3c */
}

.footer h1 {
    color: var(--primary-color); /* Will be #3498db */
}
            

Fallback Values

The var() function allows you to provide a fallback value in case the custom property is not defined:

body {
    color: var(--text-color, black);
}
            

In this example, if --text-color is not defined, the color will default to black.

Manipulating Custom Properties with JavaScript

You can dynamically update custom properties using JavaScript, which is useful for creating themes and other dynamic styles:

<script>
document.documentElement.style.setProperty('--primary-color', '#8e44ad');
</script>
            

Summary

In this tutorial, you learned about defining and using custom properties in CSS. Custom properties make your CSS more maintainable, consistent, and easier to update. You explored how to define custom properties, use them throughout your stylesheets, and dynamically update them with JavaScript. Implementing custom properties can significantly enhance the organization and efficiency of your CSS code.