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.
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.
