CSS: the skin

Before you begin

By the end, you can…

• Use the box model to control spacing
• Write selectors with the cascade in mind
• Build a simple responsive layout with flexbox

01 / Understand

CSS is the presentation layer

CSS turns the skeleton into a designed page. Every element is a box with content, padding, border, and margin—the box model. Spacing, alignment, and rhythm come from controlling these boxes, not from guessing pixels.

The cascade resolves conflicting rules: later rules and more specific selectors win. A simple way to keep it calm: style elements directly, use classes for repeated components, and keep one source of truth in your own stylesheet.

02 / Apply

Give your profile a calm, readable design

Start with a type scale: one size for headings, one for body text, comfortable line height. Choose two or three colors and use them deliberately. Add padding and margin consistently so spacing feels intentional.

Use flexbox to lay out navigation and simple rows. Add one media query so the layout still works on a narrow phone. Check it at 200% zoom—text should reflow, not break.

.profile-card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid #ddd;
  border-radius: .75rem;
}
@media (max-width: 40rem) {
  .profile-card { flex-direction: column; }
}

03 / Make

Your studio task

Make — Style your profile page into a calm, readable layout.

1. Establish a type scale and a two- or three-color palette.
2. Add padding, margin, and borders until spacing feels deliberate.
3. Lay out one section with flexbox.
4. Add one media query and test at 200% zoom.

04 / Check

Knowledge check