Live
x
<p class="box"> <strong>.box:</strong> <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">Link</a> fugit, temporibus cupiditate ipsum dicta perferendis voluptate hic voluptatibus eos voluptatum libero quas laboriosam dolore earum commodi vitae. Beatae. <br><br> <button class="button"> Button </button></p><p class="box inverted"> <strong>.box.inverted:</strong> <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">Link</a> fugit, temporibus cupiditate ipsum dicta perferendis voluptate hic voluptatibus eos voluptatum libero quas laboriosam dolore earum commodi vitae. Beatae. <br><br> <button class="button"> Button </button> </p>
Live
xxxxxxxxxx49
:root { --bg-color: white; --text-color: black; --link-color: blue; }a { color: var(--link-color);}.box { color: var(--text-color); background: var(--bg-color);}.button { border-color: var(--link-color); color: var(--link-color);}.inverted { --bg-color: black; --text-color: white; --link-color: yellow; }/* etc. */.box { display: block; border: 1px solid black; padding: 1em; max-width: 20em; display: inline-block;}.button { appearance: none; background: transparent; padding: .5em;}body { margin: 2em;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.