EN

CSS・More control over the look

Decorate text with bold and underlines

Make the important parts bold, and draw or erase the underline on links. Use font-weight and text-decoration to add "decoration" to the text itself.

Beyond size and color, text can also carry “decoration” like weight and underlines. Make an important spot bold, or erase a link’s underline to keep things clean. A small adjustment makes text much easier to read.

Making it bold: font-weight

To make text you want to emphasize bold, use font-weight. Usually, learning the two values bold and normal is enough.

.important {
  font-weight: bold;
}

The spot with class="important" turns bold. Here too, targeting with a class comes in handy, doesn’t it?

Weight can be written as a number too

font-weight can take a number instead of a word.

h1 {
  font-weight: 700;
}

Numbers go from 100 to 900, and the bigger the number, the bolder. 400 is the same weight as normal, and 700 the same as bold. With a font that has many weight steps, you can also choose an in-between weight like 500 (slightly bold). To start, using “400 = normal, 700 = bold” as your baseline is plenty.

Adding or removing an underline: text-decoration

Underlines are controlled with text-decoration. To draw one, underline; to remove one, none.

.line {
  text-decoration: underline;
}
a {
  text-decoration: none;
}

Links (a) come with an underline from the start, but none removes it. You can choose whether to show or hide the underline to fit your design.

Lining up bold, underline, and strikethrough shows how each “decoration” takes effect.

Weight is font-weight, and line decorations are text-decoration — combine the two with their different roles to decorate text.
HTMLLet's emphasize text“Emphasis of meaning” is HTML, “the look of bold” is CSS — remember the difference in roles

Not just underlines: strikethrough and overline

The values you can put in text-decoration are actually not limited to underlines.

ValueMeaning
underlineUnderline
line-throughStrikethrough (a line through the middle of the text)
overlineOverline (a line above the text)
noneRemove the line

Among these, line-through is handy to remember. It’s the standard for visually conveying “no longer valid,” like a pre-sale price or a finished to-do item.

.done {
  text-decoration: line-through;
}

Links (a) come with not just an underline but a color too. You’ll often want to remove this to fit your design as well. For that, color: inherit;.

a {
  text-decoration: none;
  color: inherit;
}
The top link is blue with an underline, looking like a link; the bottom link has its color and underline removed and blends in to look the same as the surrounding text.

inherit is a value meaning “inherit from the parent.” It stops giving the link a special color of its own and matches it to the same color as the surrounding text. It’s a common move when you want to blend a navigation link and the like naturally into the text, like part of the writing.

Summary of this lesson

  1. Text weight is font-weight (bold and normal, or 400 and 700 as numbers)
  2. Decorations like underlines are text-decoration (underline, line-through, none)
  3. Limiting where you use bold keeps the emphasis alive
  4. color: inherit; matches a link’s color to the same as its surroundings

Add class="nav" to the <nav> in the header, and reset the underline and color of the links inside. The “line up two classes” way of writing comes in handy right away.

.nav a {
  text-decoration: none;
  color: inherit;
  font-weight: bold;
}

With .nav a, target “only the a inside class="nav",” remove the underline and color, and make it bold. It looks like ordinary text, yet the bold leaves just a hint of “you can press this.”

Browser view. The underline and blue color are gone from the header menu text, which is now bold in the same color as the surrounding text.
The link-like blue and underline are gone, giving it a clean, menu-like look.

FAQ

Why doesn't the weight change even though I set it to bold?
The font you're using may not have data for a bold version. Google Fonts in particular loads only the weights you chose, so if you want to use bold too, select 700 (equivalent to bold) along with it.
Is it OK to remove the underline on links?
Depending on the design, it can be fine. But links within body text won't be recognized as clickable without an underline. Limit removal to places that clearly look like a menu, such as navigation, and leave a cue like bold or color.
How do I draw a strikethrough?
You can draw it with text-decoration: line-through;. It's a line that shows something is 'no longer valid,' like a pre-sale price or a finished to-do item.