Log inStart free

Lesson 3 of 8 · 9 min · 2 hands-on steps

CSS Basics: Colors, Fonts & Selectors

Style your pages, and learn how CSS decides which rule wins.

How CSS works

A CSS rule = a selector (what to style) + declarations (how):

p {
  color: #333;
  font-size: 18px;
  line-height: 1.6;
}

Selectors you'll use 95% of the time

Selector Matches
p every <p>
.card elements with class="card"
#main the element with id="main" (use sparingly)
.card p <p> elements inside .card
button:hover a button while the mouse is over it

Colors and fonts

.title {
  color: #4f46e5;                 /* hex */
  background: rgb(240, 240, 255); /* red, green, blue */
  font-family: system-ui, sans-serif;
  font-weight: 700;
  text-align: center;
}

When rules conflict

  1. More specific wins: #id beats .class, which beats p.
  2. If they're equally specific, the one written later wins.

When your style "isn't working", open your browser's DevTools (right-click → Inspect). It shows exactly which rules apply and which are crossed out. It's the #1 CSS debugging tool.

🧪 Practice: 2 steps

0 / 2 done

Step 1 of 2 · Style a card

Style the .card element so it has:

  • background-color: white
  • padding: 16px
  • border-radius: 12px

and make the .price text green (color: green).

<div class="card">
  <h3>Monthly plan</h3>
  <p class="price">$9.99</p>
</div>

Output appears here. Press Run or Ctrl/⌘ + Enter.

✅ Check your understanding

  1. How do you select all elements with class="note"?

  2. Two rules set a different color on the same element with equal specificity. Which wins?

Create a free account to track your progress.