How do you define custom properties (CSS variables)?
Subh Prakash Singh
Invent the Future
Custom properties, or CSS variables, are defined using the -- prefix inside a selector and are accessed using the var() function. They allow reusable, maintainable styles across a stylesheet. For example,
:root {
--primary-color: #3498db;
--font-size: 16px;
}
body {
color: var(--primary-color);
font-size: var(--font-size);
}
Here, --primary-color and --font-size are variables that can be reused, ensuring consistency and simplifying updates.