DEV Community

john
john

Posted on

reusing css color attributes

:root{
--primary-color:red;
--secondary-color:blue;

}
Enter fullscreen mode Exit fullscreen mode

root element match the top most element in a web document(tree structure) so when creating variables in root it can be accessed anywhere inside the dom(Document Object Model)
--primary-color,--secondary-color are variablels.We can reuse this elements by the following code

div{
color:var(--primary-color);
background-color:var(--secondary-color);
}
Enter fullscreen mode Exit fullscreen mode

this selects --primary-color to all elements with a div parent and background-color to --secondary-color

Discussion (0)