Font-weight - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

9
Font-weight

In Chapter 7 you created a paragraph class called “important,” and specified a font size one-and-a-half times “normal.” Now let’s make paragraphs classed as “important” even more important. We’ll bold them.

Open your CSS file and add the line highlighted below.

p.important {
font-size: 1.5em;
font-weight: 900;

By specifying a font-weight of 900, you’re telling the browser to make all the paragraphs of the class important as bold as possible. The scale for font-weight ranges from 100 through 900—100, 200, 300 and so on. 100 is the lightest weight. 400 is normal. 900 is as heavy as it gets.

Now, when the browser encounters a paragraph of the important class, it will display it larger and in boldface.

A note about font-weight: As an alternative to the numerical scale, you can use one of four font-weight words: lighter, normal, bold, and bolder.

Save your CSS file. Display your HTML file. “Warning: We have no slow lorises here.” should now be in bold.

Find sample CSS code at:
http://asmarterwaytolearn.com/htmlcss/practice-9-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/9.html