Text Styling Properties
There are many CSS properties for text styling. In this chapter, we'll cover 10 major properties relating to text.
1. font-size
The font-size
property is used to set the size of the font. px
, em,
or rem
are often used as a unit of font-size
. px
is the absolute size while em
is relative to the parent element's font size and rem
is relative to the root (html) element's font size. The default font size for most browsers is 16px
.
2. color
The color
property is used to set the color of fonts. Unlike other properties, the font color property is referred to simply as color
(and not font-color). There are several ways to set color
properties: HEX, RGB, RGBA, and color name.
3. font-family
The font-family
property is used to set font families that are applied to a web page. You can set multiple font families and a generic font family so that a browser can render alternative font families when a specific font is not available on a certain device.
4. font-weight
The font-weight
property is used to set font thickness. You can specify font-weight
with a font weight number (100
-900
) or keyword (bold
, lighter
, or bolder
).
5. font-style
The font-style
is used to set an italic
or oblique
font.
6. text-decoration
The text-decoration
property is used to add different types of lines to text – underline
, overline
, or line-through
(strikethrough). You can also change the design of the decoration line such as a wavy line or double line.
7. line-height
The line-height
property is used to set the height of lines. It is an important feature that helps to increase the readability of your website.
8. letter-spacing
The letter-spacing
property is used to set letter space. It is an important feature that helps to increase the readability of your website.
9. text-align
The text-align
property is used to set the horizontal position of the text in the element or relative to the parent element. It can also be used to set <img>
the element's horizontal position.
10. vertical-align
The vertical-align
property is mainly used for the vertical position of text or images in each line. It is usually used for adjustment of the vertical position of small text or icons in paragraphs, or text or images in a table cell.