Not all typography-related styles in CSS use the font-prefix. In this video, look at other typography-related CSS properties.
- [Instructor] There are more typography-related properties that don't begin with font. There's one that we've seen already in previous lessons, color. Here's a quick review. Color changes the text color and uses a variety of values, keywords, hex codes and rgb being the most common. The line-height property is used to set the height of space between the two lines of content. For example, the spacing between the lines in a paragraph. This style should be considered when setting font sizes since they are closely related.
The value can be declared using the length values discussed previously for other properties, but line-height also accepts a unitless value. Let's look at an example. If the line height is set to the same value as the font size, there will be no space between the lines which would make it hard to read, so as a rule of thumb, your line-height value should always be larger than the font size to add space between the lines. Let's try 20 and see how that looks.
Now if I change the font size to make it smaller or bigger, its going to effect the line height. If I set it to 20, now the line height and the font size is the same again. To make the line height more flexible to change, use relative units for the line-height property instead. Using a relative sizing like percentage will keep the line height consistent, because it'll always be relative to the font size. If I set it to 150%, it will always be one and a half times bigger than the font size.
So if I change the font size again, the line height will be relative. Let's put that to 20. Line-height also accepts a unitless value, so instead of 150%, I can set it to just 1.5, and that also means a one and a half times the size of the font size. If I set it to one, that means it will be the same. The unitless value is actually my preferred method.
You can choose whichever you'd like, but using a relative unit will keep it more flexible. In an earlier exercise, we used text-decoration to remove an underline from a link. It can actually be used to add underlines as well above, below or even a strike-through line right through the text. You can remove the existing underline by setting it to none. The text-transform property specifies the letter casing of words or individual letters. Use the value of capitalize to capitalize each word and uppercase for all uppercase letters, lowercase to make all characters lowercase, and none to remove any transform style.
This property is useful, because you can style the casing of your text with CSS rather than manually typing the letter casing. And if you change your mind, and you probably will, you can just remove that with one line of CSS. The text-align property can be used to center-align text. You can add it to the element itself or set the property in the parent element. Let's take a look at another example. Let's say you want to center-align the headings inside of the header tag.
You can apply the text-align center right to the header selectors or you can add it to the parent element. If you add it to the parent element, then everything contained within header will be center-aligned. I've referred to this resource codrops a few times already throughout this course, but here it is again. If you haven't noticed already, there are a lot of CSS properties. Some are more commonly used than others, and some are more advanced, so having a detailed resource, such as this one, is highly recommended.
So far we've covered a handful of font and text styles. There are more typography-related properties, but we have more than enough options for styling our final project.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property