HTML Compiler Online
Javascript Online Compiler
index.html
Change Theme
Compress code
Format code
Download Code
Clear Code
Copy Code!
Run
ctrl+s or click
Output
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS variable inheritance example</title> <style> .box { --my-border: #ccc 2px solid; --my-padding: 15px; border: var(--my-border); padding: var(--my-padding); } .box p { border: var(--my-border); padding: var(--my-padding); } </style> </head> <body> <h1>CSS variable inheritance example</h1> <div class="box"> <p>This is a paragraph inside a div.</p> </div> <p>Here you can see the paragraph which is child of the div has the same border and padding as the div. This is because the div has defined the variables and the paragraph inherits them.</p> </body> </html>
Run
