Project 14: Newsletter Form

CSS Stylist

Builds on these lessons

Variables Advanced Frameworks Preprocessors Layout Best Practices

Step 1 of 2

Project

CSS Custom Properties

Define --brand-color and --text-color on :root, then use var(--brand-color) on .btn-subscribe. Change the variable once and every rule using it updates — the same reuse problem preprocessor variables solved, now built natively into CSS.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

:root {
  --brand-color: #0ea5e9;
  --text-color: #1f2937;
}

.btn-subscribe {
  background-color: var(--brand-color);
  color: white;
}

← Previous Next →