In the last post, we looked at the font-family and font-size CSS properties. In this post we’ll look at four more font-related properties. We’ll be using the same files as the last post.
Font-weight describes how bold the font is or how thick the lines of the font are. There are several values that font-weight can be. The most common is “bold”. It can also have the value “normal”, “bolder”, “ligher”, “initial”, “inherit”, and “unset”.
It can also take a numerical value between 100-900. If you use a numerical value, note that you have to use even hundreds like 100, 200, 300. Some browsers support font-weight values like 350, but not all of them. It’s better to play it safe and stick to the even hundreds. The lightest font-weight is 100. A font-weight of 400 is “normal” while 700 corresponds to “bold”.
We’ll add a new rule to our CSS file. We’ll turn all of out paragraphs bold by add “font-weight: bold;” to our p selector.
There are two ways to think about line-height. Just like your height describes how tall you are, line-height describes how tall a font is. Another way of thinking about it is that it describes how much space is between the lines. If you’re familiar with typing on an old-fashioned typewriter, you’ll know that the space between the lines can be single-spaced, double-spaced, or more if you need a term paper to go for a certain amount of pages.
The same is true for computer fonts. You can use line-height to control the space between the lines. Using ‘line-height: 1’ would make no sense since that is the default anyway. But you could get a double-spaced effect by using ‘line-height: 2’.
Line-height can also have a unit of measure like px, em, %. Be careful. There is a vast difference between ‘line-height: 2’ and ‘line-height: 2px’. While line-height 2 gives us more white space between the lines of text, a line-height of 2px would only give us 2 pixels of space between the lines. Let’s give our second paragraph in our HTML file an id of ‘no-space’ and a line-height of two pixels (2px). We’ll give our other paragraphs a line-height of 2 and see what happens in the browser.
The spacing in the first and third paragraphs increased. Our second paragraph became unreadable.
This property does just what it says. You can align the text to the left, center, right, justified, and a few other ways. We’ll center our <h1> tag and get rid of our annoying mess in the second paragraph by deleting that paragraph’s line-height rule.
The CSS property text-decoration is used when you want to put an underline, overline, or line-through on some text. It can take up to three values: one for the type, one for the color, and one for the style.
The type can be underline, overline, or line-through. The color can be any of the named colors as well as hex or RGB values. Style can be dotted, dashed, double, wavy, or solid. Solid is the default. Let’s add a solid blue overline to our paragraphs.
Notice that we didn’t have to specify that we wanted a solid line. Solid is the default. Also, if we wanted the overline to be the same color as the font we wouldn’t have needed to specify the color. Next, let’s try a double red line-through.
It might not be easy to see in the picture, but there is a double line through the text. Finally, just for fun, we’ll try a wavy green underline.
Notice that the order in which you put the values in the text-decoration property doesn’t matter. You could say wavy green underline or green underline wavy. The order isn’t important.
In this post, we looked at four more CSS font properties. With font-weight, we say how you can make text bolder or lighter. We say how we align text with text-align. We smashed some text using line-height and used text-decoration to put underlines, overlines, and line-throughs in our paragraphs.
In the next post we’ll see how to use a specific font even if that font is not installed on a user’s computer.
CSS Properties To Remember