Online HTML Editor
Javascript Online Compiler
index.html
Change Theme
Compress code
Uncompress code
Download Code
Clear Code
Copy Code!
Run
Click to run or ctrl+s
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
