✳ CSS · BEGINNER PATH

Make the page feel right.

CSS describes how a page looks. Choose a selector, adjust the space around an element, and arrange a few pieces into a layout that can flex.

Three lessons · about 20 minutes0 of 3 complete

LESSON 1 · SELECTORS & RULES

Choose what to style.

A CSS rule has a selector and a set of declarations. The selector chooses an element. Each declaration pairs a property with a value. A class selector starts with a dot and can be reused on several elements.

/* A reusable card style */
.card {
  color: #263328;
  background: #eef5e5;
  border-radius: 12px;
}

Read it out loud: “For every element with class card, use dark green text, a soft green background, and rounded corners.”

Quick check: what character starts a class selector?

A small step counts.

LESSON 2 · SPACE & THE BOX MODEL

Give each element room.

The browser lays every element out as a box. The content sits inside, padding adds space around the content, border wraps the padding, and margin creates space outside the border.

.note {
  width: 260px;
  padding: 18px;
  border: 2px solid #d8e4c9;
  margin: 16px auto;
}

Try it: Change the padding to 8px, then to 28px. The box gets more breathing room without changing the words inside.

Quick check: which property creates space outside the border?

A small step counts.

LESSON 3 · FLEXIBLE LAYOUTS

Arrange items with Flexbox.

Put display: flex on a parent to arrange its direct children in a row. Use gap for consistent space, and let items wrap when the screen is narrow.

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards article {
  flex: 1 1 220px;
}

Why the three flex values? Items may grow, may shrink, and start from a comfortable basis of 220 pixels.

Quick check: which property sets the space between flex items?

A small step counts.Next path: add interaction ↗

← All courses Continue to JavaScript →