use-theme-editor
Version:
Zero configuration CSS variables based theme editor
64 lines (48 loc) • 1.63 kB
HTML
<!-- saved from url=(0126)https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/Using_CSS_custom_properties/_sample_.invalid_custom_properties.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<style>
body {
padding: 0;
margin: 0;
}
svg:not(:root) {
display: block;
}
.playable-code {
background-color: #f4f7f8;
border: none;
border-left: 6px solid #558abb;
border-width: medium medium medium 6px;
color: #4d4e53;
height: 100px;
width: 90%;
padding: 10px 10px 0;
}
.playable-canvas {
border: 1px solid #4d4e53;
border-radius: 2px;
}
.playable-buttons {
text-align: right;
width: 90%;
padding: 5px 10px 5px 26px;
}
</style>
<style>
:root {
--text-color: 16px;
}
p {
color: blue;
}
p {
color: var(--text-color);
}
</style>
<title>Using CSS custom properties (variables) - invalid_custom_properties - code sample</title>
<meta id="ConnectiveDocSignExtentionInstalled" name="ConnectiveDocSignExtentionInstalled" data-extension-version="1.0.6"></head>
<body>
<p>This paragraph is initially black.</p>
</body></html>