Reading HTML/CSS as a designer

Why it matters

You do not need to be a developer to design for the web, but being able to read HTML and CSS changes how you work. You can inspect a live page to see why it does not match the design, suggest a precise fix ("padding is 10px, the spec says 24px"), understand what is cheap or expensive to build, and make small fixes yourself in a pull request if your team allows it. Many product designer job listings ask for "a working knowledge of HTML and CSS" for exactly these reasons.

The core idea: structure, then style

HTML describes structure and meaning: this is a heading, this is a button, this is a list. CSS describes presentation: colour, size, spacing, layout.

<div class="plan-card">
  <h2 class="plan-card__title">Team plan</h2>
  <button class="btn btn--primary" type="button">Choose plan</button>
</div>

• Elements (div, h2, button) are the building blocks. The element choice matters for accessibility: a real <button> is focusable and works with the keyboard; a <div> styled like a button is not.
• class attributes are labels CSS uses to find elements. Names like plan-card__title follow a common convention (BEM: block, element, modifier), which often mirrors design-system component names.

A CSS rule is a selector plus declarations:

.plan-card {            /* selector: elements with class plan-card */
  padding: 24px;        /* property: value; */
  border-radius: 12px;
}

Properties designers adjust most

Two concepts explain most surprises:

• The box model. Every element is a box: content, then padding, then border, then margin. Padding is inside the border (it gets the background colour); margin is outside.
• The cascade. When several rules target the same element, the more specific selector wins, and among equals the later rule wins. If your change "does nothing", another rule is probably overriding it.

Inspecting a live page

Every desktop browser has free developer tools. In Chrome, Edge or Firefox, right-click an element and choose Inspect.

1. The Elements (or Inspector) panel shows the HTML; hover to highlight boxes on the page.
2. The Styles panel shows the CSS rules that apply, with overridden values crossed out.
3. The Computed panel shows final values and a box-model diagram with padding and margin.
4. You can edit values live to try a fix. Nothing is saved; reloading resets it.

That is how you turn "the card looks cramped" into "the card's padding is 10px; the spec is 24px (space-4)".

Worked example: matching a spec

A plan card was built from a spec but looks wrong. Inspecting it shows:

.plan-card { padding: 10px; border-radius: 3px; }      /* spec: 24px, 12px */
.plan-card__title { font-weight: 400; }                 /* spec: 600 */
.plan-card__badge { color: #a3a3a3; background: #fff; } /* about 2.5:1, fails 4.5:1 */
.btn { padding: 4px 12px; }                             /* about 27px tall; spec 44px */
.plan-card__actions { }                                 /* buttons should sit in a row, 8px gap */

Fixes:

.plan-card { padding: 24px; border-radius: 12px; }
.plan-card__title { font-weight: 600; }
.plan-card__badge { color: #374151; }                   /* about 10:1 on white */
.btn { min-height: 44px; padding: 8px 16px; }
.plan-card__actions { display: flex; gap: 8px; }

In a real codebase these values would be tokens (var(--space-4)), as in the tokens lesson.

Common mistakes

• Fixing with a <div>. If something acts like a button, it should be a <button>; a link that goes somewhere should be an <a href>.
• Using margin for inner spacing (or the reverse). Inside the border is padding.
• Fixed heights on text containers. Text grows when users zoom or translate; prefer min-height and padding.
• Pixel-pushing in DevTools and forgetting to write it down. Changes vanish on reload; record the fix in the ticket.
• Changing shared CSS that other components use without checking with the team.

Quick recap

• HTML gives structure and meaning; CSS gives presentation.
• A CSS rule is a selector plus property-value declarations; the cascade decides which rule wins.
• Know the box model: content, padding, border, margin.
• Use browser DevTools (Inspect) to find the real values and propose precise fixes.

Try it

On the Do tab you will adjust a plan card's CSS so it matches its spec: padding, radius, weight, contrast, button height and layout.