HTML Academy
Previous task
Introduction to CSS Custom Properties1/1
Back to the list of tasks
  • 1. Declaring and Using CSS Variables
  • Sign up
  • Log in

Register to take up challenges

Registration will only take a minute and let you save your study progress. You can register with your email and password or login via social networks.

or
Log in and continue
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom Properties: Introduction</title> <link rel="stylesheet" href="card.css"> <link rel="stylesheet" href="style.css"> </head> <body> <article class="card"> <img class="card__image" src="karpovka-400.jpg" width="200" height="100" alt="Karpovka Embankment"> <div class="card__content"> <h2 class="card__title">Karpovka Embankment</h2> <p class="card__description"> One of the most picturesque spots in Saint Petersburg, perfect for a stroll. </p> <a class="card__button" href="#">Learn more</a> </div> </article> </body> </html>
CSS
:root { } body { background-color: var(--page-color); } .card { --color: #3370ce; } .card__title { color: ; } .card__button { background-color: ; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

100%
  • Goal
  • Result
  • Overlay
  • Differences
  • ?

Press Compare to send your code for review.

Failed to load the goal. Try later.

Goal — the interface you need to get.

Result — the way the server sees your code. Can differ from what you see in the mini-browser. The comparison is made between this result and the goal.

Overlay — semi-transparent result is shown above the goal.

Differences — the map of differences between the goal and the result.

Done 0%.
The code has been changed

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

VISAMastercard