EN

CSS・First steps

Let's change the text size

Make the important parts big and the side notes small. Use font-size to change how big the text is and give your page some rhythm.

Headings big, small print small — rhythm in text size is a big part of what makes a page easy to read. The property that controls it is font-size. Learning just this one thing tightens up the whole feel of your page.

Let’s write it

h1 {
  font-size: 32px;
}
p {
  font-size: 16px;
}

This means “make headings 32 pixels and paragraphs 16 pixels.” The bigger the number, the bigger the text. px (pixels) is the most basic unit — it expresses size by the number of dots on the screen.

  • Want a heading to stand out → make the number bigger
  • Want side notes to stay quiet → make the number smaller

Change the number, and the text size changes right along with it.

The bigger the number, the bigger the text. Headings big, side notes small — this rhythm is what makes a page easy to read.

What you learned in HTML pays off here

“Choose a heading by its meaning, not its size” — here’s where that reason connects. If you first give <h1> through <h6> the right meaning in HTML, then later you can adjust the whole look at once with CSS: “h1 big, h2 moderate.”

This is how the reward for splitting up the roles comes back to you later. Build the framework (HTML) with care, and dressing it up (CSS) becomes much easier.

HTMLLet's write headings and paragraphs“Choose a heading by its meaning” — the groundwork you laid back then connects here

Even without setting it, the sizes differ from the start

Without you setting anything in CSS, <h1> through <h6> are already slightly different sizes by the browser’s default (h1 is the biggest, and each higher number is smaller). font-size is the setting that overrides those defaults to your own taste. Even if you forget to set it, at least the big-to-small relationship follows the meaning — that’s a little reassuring, isn’t it?

Summary of this lesson

  1. Text size is font-size
  2. Add a unit (like px) to the number
  3. Give meaning in HTML → adjust size in CSS — that flow feels good
  4. h1 through h6 start out at different sizes. font-size is the override of those defaults

Try it: give the heading and paragraph some rhythm

On Shima’s page, give the h1 (the name) and the p (the greeting) some size contrast.

h1 {
  font-size: 32px;
}
p {
  font-size: 16px;
}

Leave the font and colors as they are. Here we only add size.

Browser view. The name heading is large at 32 pixels and the greeting text is a normal 16 pixels.
Even on the same page, just adding some rhythm to the sizes makes it much easier to read.

For now you’re setting it on the whole tag, but once you learn classes later, you’ll be able to choose sizes much more freely — “just this one heading.”

FAQ

What happens if I leave off the unit, like font-size: 16;?
The setting becomes invalid and the size won't change. Always add a unit like px after the number.
How are rem and px different?
px is always a fixed pixel size, while rem is a multiplier relative to a base (the font size of the html element). With rem, you can adjust the text size across the whole page just by changing the base size in one place.
Can I decide the heading sizes from h1 to h6 myself?
Yes, you can. The browser's defaults are only a rough guide, so you can override them to any size you like with font-size. Just keep the order where h1 is the biggest and each higher number is smaller, so the look and the meaning stay in sync.