Custom CSS properties

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom CSS properties</title> <style> @page { size: 220pt 120pt; margin: 10pt; } :root { --main-light: #c9e0ea; --main-dark: #001e5e; --green-light: #ebf8d4; --green-dark: #224800; } p { margin: 0; } div.light { background: var(--main-light); color: var(--main-dark); } div.dark { background: var(--main-dark); color: var(--main-light); } .red { --main-dark: #8c0505; --main-light: #f8d4d4; } .green { --main-dark: var(--green-dark, lightgreen); --main-light: var(--green-light, darkgreen); } </style> </head> <body> <div class="light"> <p>Hello <span class="hl">World</span></p> </div> <div class="dark"> <p>Hello <span class="hl">World</span></p> </div> <div class="light red"> <p>Hello <span class="hl">World</span></p> </div> <div class="dark red"> <p>Hello <span class="hl">World</span></p> </div> <div class="green"> <div class="light"> <p>Hello <span class="hl">World</span></p> </div> <div class="dark"> <p>Hello <span class="hl">World</span></p> </div> </div> </body> </html>