EN

CSS・First steps

Add color to your text and background

The fun of CSS is, of course, color. Learn how to add text and background color, and breathe life into your page.

Now that you know the shape of a selector, it’s finally time to add color. Color is the very first thing in CSS where you really feel “it changed!” Let’s put your favorite color onto that pure-white page.

How to write color

h1 {
  color: white;
  background-color: teal;
}

It means “make the heading text white and the background teal.” Color names (red, blue, teal, …) can be written as they are. “Lining up settings inside { }” is already coming in handy.

PropertyWhat it changes
colorThe color of the text
background-colorThe color of the background

These two are so alike that they easily get mixed up. Remember them as a set: “color is the text itself; add background- and it’s the background.”

Even for the same sentence, color and background-color put the color in completely different places.

color is the color of the text itself; background-color is the background color that spreads across the whole box. Choose the two as a pair for a readable color scheme.

There are over 140 color names

Beyond basic colors like red and blue, there are over 140 colors you can call by name, such as tomato, skyblue, and gold. The best way to improve is to type in names you know and enjoy the changes.

p {
  color: tomato;
}

Color codes for finer control

When you want a subtle shade that has no name, use a color code like #ff0000 (red). The six digits after the # are the color’s true identity.

h1 {
  color: #e8734e;
}

The six digits split into three pairs, each representing the intensity of red, green, and blue (256 levels from 00 to ff). Named colors number around 140, but with codes you have your pick of over 16 million colors. It’s also handy that you can copy a color you found in a design tool and bring it straight over.

Background color applies to “the element’s whole box”

background-color applies not just around the text but to the element’s entire box. An element like h1 stretches the full width, so the background color becomes like a band stretched across.

h1 {
  background-color: teal;
}

If you want color on just the text part, wrap that part in a <span> and set background-color on the span only. Knowing that “background color applies to the box” saves you from being surprised by unexpected spreading.

An element like h1 stretches the full width, so its background becomes a band, while a span-wrapped part gets a background only as wide as the text.

When stuck on colors, it’s fine to lean on tools

Even once you know how to write color and background-color, “which color goes with which” is a separate worry. This is less about taste and more something you can solve with a tool. Even pros often pick from color-scheme sites.

TipsColor-scheme sites so you never agonize over colorHow to pick a color-scheme site is covered in this handy tip

Summary of this lesson

  1. Text color is color, background color is background-color
  2. You can write colors by name directly (over 140 of them)
  3. Think of text and background color as a pair (for readability)

Try it: add color to your page

Let’s properly choose colors—not just the text color but the background to match. Rewrite style.css like this.

body {
  background-color: cornsilk;
}

h1 {
  color: coral;
}

body is the whole page; h1 is the name heading. The page background turns a gentle cream color, and the name turns coral.

Browser view. On the cream-background page, the name “Shima” appears as a coral-colored heading
Everything’s still in a serif typeface for now, but just adding color makes it feel much more like “your own page.”

Once that’s done, change coral and cornsilk to other color names and hunt for colors you like.

FAQ

Are there ways to specify color other than by name?
Color codes (hexadecimal), like #ff8a3d, are the most commonly used. For a color you found on a color-scheme site, you can copy its color code and paste it straight in.
Why does the background color end up covering a wider area than I expected?
Because the background color applies to the element's entire box. A block element like h1 stretches the full width, so it looks like a band. When you want color on just the text part, wrap that part in a span and set it there.
What if someone says my text is hard to read?
That means there isn't enough difference in brightness (contrast) between the text color and the background color. If the background is a light color, make the text dark; if the background is dark, make the text light—always think of the two colors as a pair.