color — change the text color

The most basic CSS property. Change the color value and watch the text recolor instantly.

style.css v3.1

style.css — the CSS rules

.card {
  color: #a0c000;
  background: white;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

index.html — the HTML structure (what the CSS targets)

<div class="card">Hello world!<br>This text uses the <code>color</code> property from the CSS on the left.</div>

Live preview updates as you type

🧠 How it works

color sets the text color. Accepts named colors (red, blue), hex (#a0c000), rgb(160,192,0), or rgba(160,192,0,0.5) for semi-transparent. The value is inherited — child elements get the parent's color unless overridden.

✏️ Try these changes

Change #a0c000 to red
→ text becomes red
Change to rgb(255, 0, 0)
→ same red, different syntax
Add color: blue inside .card
→ overrides to blue

Next lab →

background — fill the element's box