07-26-2023, 07:04 PM
Example:
<!DOCTYPE html>
<html>
<head>
<title>Custom Properties Example</title>
<style>
/* Define a custom property */
:root {
--primary-color: blue;
}
/* Use the custom property to apply styles */
p {
color: var(--primary-color);
}
</style>
</head>
<body>
<p>This is a paragraph with a custom primary color.</p>
</body>
</html>
Explanation:
CSS Custom Properties, also known as CSS Variables, allow you to define reusable values. In this example, we define a custom property --primary-color with the value blue. The p element then uses this custom property to set its text color, resulting in blue text.
<!DOCTYPE html>
<html>
<head>
<title>Custom Properties Example</title>
<style>
/* Define a custom property */
:root {
--primary-color: blue;
}
/* Use the custom property to apply styles */
p {
color: var(--primary-color);
}
</style>
</head>
<body>
<p>This is a paragraph with a custom primary color.</p>
</body>
</html>
Explanation:
CSS Custom Properties, also known as CSS Variables, allow you to define reusable values. In this example, we define a custom property --primary-color with the value blue. The p element then uses this custom property to set its text color, resulting in blue text.