Skip to Content
Learn
CSS Typography
Font Weight

You’ve probably noticed bold text in websites you use, especially in news or text-heavy sites. It’s common to bold important headings or keywords. In CSS, we can style bold text with the font-weight property.

If we want to bold text in a web page, we can set the font-weight to bold.

p { font-weight: bold; }

If we want to ensure that text is not bold, we can set the font-weight to normal.

p { font-weight: normal; }

By default, the font-weight of most text elements is set to normal. Some elements, like headers, have built-in bold styling. A good approach is to check to see if the text element has any default styling, and use the font-weight property accordingly.

Instructions

1.

Taking a look at the web page in the browser, you’ll notice a “Banner” section, the blue section right below the navigation menu.

In style.css, in the banner section of the stylesheets, set the font weight of the paragraph within class banner to bold. You’ll notice that the letters in the paragraph in the web page thicken.

Folder Icon

Take this course for free

Already have an account?