Grokking CSS for Web Development
Vote

0% completed

​

Create a Themeable Card Using CSS Variables

The declaration --card-bg: #1e1e1e, placed on one card, turns that card dark while every other card on the page stays white. That works because the card's rules do not contain colors at all; they read them from custom properties, which the chapter on CSS functions introduced with the var() function. This challenge builds a card around that idea.

The requirements

  • Create a card whose styles come from CSS custom properties.
  • Define the theme values in the :root selector: background color, text color, border color, and padding.
  • Apply them to the card with the var() function.

.....

.....

.....

Like the course? Get enrolled and start learning!

Reading Progress

0%

Vote for new content