While covering the basics of HTML, we've mentioned the separation of structure and style. As you learned in a previous lesson, the <b> and <i> tags have their own semantic meanings, but they should not be relied on for bolding or italicizing text. What about other text styling needs?
Underlining text used to be accomplished by the use of the <u> tag; but since HTML5 became standard, it has since been depreciated. When bold, italicized, or underlined text is required, its corresponding CSS property should be used. Since each style has its own CSS property now, you have more options for customization. Click through the tabs below to learn more about text styling properties for bolding, italicizing, and underlining text.
The font-weight property is used to make a font bold. Not only that, but this property can even determine the level of boldness or lightness. That's why the property is called font-weight rather than something like font-bold.
The font-weight property is used to make text bold.
<p>The font-weight property is used to make text
<span style="font-weight:bold;">bold</span>.</p>
The values for this property can be written with key words or with different levels represented by numbers. The table below shows the available values and their estimated equivalents between the two system options. The only drawback is that many fonts have only a normal and bold version available. However, the fonts that do have multiple levels of weight can take advantage of this value range.
| Word Values | Number Values |
|---|---|
| lighter | 100 200 300 |
| normal | 400 500 |
| bold | 600 700 |
| bolder | 800 900 |
The font-style property includes italics and has simpler options than font-weight. Generally, font-style is set to either “normal” or “italic”. Another value, “oblique”, is also available. Both italic and oblique versions of a font are slanted, but there's a slight difference between the two. Italic is a specifically crafted subset of a font that may have more differences from its normal version than just its leaning angle. Oblique, however, basically takes the normal version of the font and slants it with no other discernible design changes.
This paragraph is in normal font.
This paragraph is in italics.
This paragraph is in oblique font.
<p style="font-style:normal;">This paragraph is in normal font.</p>
<p style="font-style:italic;">This paragraph is in italics.</p>
<p style="font-style:oblique;">This paragraph is in oblique font.</p>
Last, the text-decoration property is where you'll find the option to underline text. Values in this property do not make changes to the style of the font itself. Rather, they add the embellishment of drawing a line over, under, or through the affected text.
This paragraph has an overline.
This paragraph has a strikethrough line.
This paragraph is underlined.
<p style="text-decoration:overline;">This paragraph has an overline.</p>
<p style="text-decoration:line-through;">This paragraph has a strikethrough line.</p>
<p style="text-decoration:underline;">This paragraph is underlined.</p>
Additionally, text-decoration can be used to remove a default styling by setting the value to “none”. For example, hyperlinks will be underlined by default. If you don't want a link to have an underline, you place a style attribute inside the anchor-tag and set the value to none.
This is a default hyperlink.
This is an un-styled hyperlink.
<p>This is a default <a href="#" target="_blank">hyperlink</a>.</p>
<p>This is an un-styled <a href="#" target="_blank"
style="text-decoration: none;">hyperlink</a>.</p>
The text-decoration property is also the shorthand for a few other text styling properties. This means that the text-decoration property can hold more than one value, depending on the desired effect. You will learn more about the text-decoration property and other shorthand styling properties in another lesson.
You Try!
Using your own text editor or the coding space below, practice using the font-weight, font-style, and text decoration properties. Try changing the font family and see how each style of font is impacted. Are some fonts more robust than others? Do certain fonts have limitations?
