How to make text emphasizing in CSS

Learn how to add CSS text-decoration styling, like underlines & more, to your HTML elements with examples.

Emphasizing Text in CSS

CSS provides a wide range of styling options for text, including the ability to emphasize text. Emphasizing text is useful for drawing attention to important words or phrases in a web page. CSS provides two ways to emphasize text:

• Font-Weight Property - The font-weight property can be used to make text bold, making it stand out from the rest of the text on the page.
• Text-Decoration Property - The text-decoration property can be used to add an underline to text, making it stand out from the rest of the text on the page.

Using the Font-Weight Property

The font-weight property can be used to make text bold. This property takes a numerical value that corresponds to the weight of the font. The most common values are 400 (normal) and 700 (bold).

body {
    font-weight: 700;
}

In the example above, all of the text on the page will be bold.

Using the Text-Decoration Property

The text-decoration property can be used to add an underline to text. This property takes a string value that corresponds to the type of decoration to be applied. The most common value is "underline".

body {
    text-decoration: underline;
}

In the example above, all of the text on the page will be underlined. By making use of the font-weight and text-decoration properties, text can be easily emphasized in CSS. This can be useful for drawing attention to important words or phrases in a web page.