Styles

Goal for this step

Part 2 makes MiniCalc pleasant to look at and easy to tap. You will center the calculator on the page, style the display so numbers are readable, and arrange keys in a four-column grid.

Still no JavaScript. Clicks will not change the display. Your success criteria are visual: spacing, contrast, and a layout that works on a narrow phone-width window as well as a desktop screen.

What you should already know

You need the Part 1 HTML structure, or the matching snapshot. You should know that CSS can live in a separate file and that a link tag connects that file to the page.

You do not need to be a CSS expert. We will use a few layout properties—mostly flexbox or grid, gaps, and font sizes—and explain what each one does.

Concepts in plain language

Separating HTML and CSS keeps responsibilities clear. Markup describes what the controls are. The stylesheet describes how they look. When you later add behavior in JavaScript, you will not have to dig through a pile of inline styles.

CSS Grid is a natural fit for calculator pads. You tell the browser to create four equal columns, then place each button into the next cell. Special keys can span more than one cell—for example, zero often stretches across two columns, and equals can grow taller across two rows.

Visual hierarchy helps users. The display should stand out from the keys. Operators and clear can use different background colors so people can find them quickly without reading every label.

Link the stylesheet and style the shell

Add a link in the document head that points at styles.css. Keep the file next to your HTML in the snapshot folder so the relative path stays simple.

On the body or main region, center the calculator and give the page a calm background. Style .display with larger type, right-aligned text, and enough padding that digits never feel cramped against the edge.

<link rel="stylesheet" href="styles.css">

Grid the keys

Target the keys container with display: grid and four equal columns. A small gap between cells keeps buttons from touching. That gap also makes fat-finger taps more forgiving on phones.

Use helper classes such as span-two for keys that should stretch. Stretching equals across two rows is optional, but it is a classic calculator pattern and teaches row spanning in one line of CSS.

.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
}

.span-two {
  grid-column: span 2;
}

.equals {
  grid-row: span 2;
}

Run the snapshot and verify

Serve the Part 2 folder the same way as Part 1. Reload the browser and compare the result to the unstyled skeleton.

You should see a centered calculator, a clear display, and a tidy button grid. Resize the window to a narrow width. Buttons should still be usable, and text should not overflow the display in an ugly way.

git clone https://github.com/michaeldunga1/fcc-js-calculator.git
cd fcc-js-calculator/02-Styles
python3 -m http.server 8000
# Then visit http://localhost:8000

Common mistakes and checklist

A broken stylesheet path is the most common failure. If the page looks exactly like Part 1, open DevTools and check whether styles.css returned 404.

Forgetting to add span classes on the zero or equals buttons means the grid looks uneven. Match the class names in HTML to the rules in CSS.

Do not start writing click handlers here. If you mix logic into Part 2, the lesson boundary disappears and debugging gets harder.

• Display text aligns to the right and stays readable
• Operator and clear buttons are visually distinct
• Layout works on a narrow phone-width viewport
• Still no JavaScript—clicking buttons does nothing yet
• Stylesheet loads without 404 errors