Text Alignment and Sizing

Text alignment

By default, text elements are aligned to the left of their container. Use the text-align property to change the alignment of text within an element. text-align has four different values:

• center: Center the text.
• left: Align the text to the left of its container.
• right: Align the text to the right of its container.
• justify: The text will spread out to fill out the full width of its container.

Text sizing

There will be many instances where you will want to change the default size of text elements. The size of your text can be changed using the font-size property. The font-size takes both absolute and relative values. The most common absolute value is px, and the most common relative values are em and rem. ​

em and rem units

em and rem units are both relative measurement values that work similar to percentages, as they serve as a multiplier in reference to some other unit of measurement. ​ In the case of font-size:

• 1 em is equivalent to the font-size of the element’s parent.
• 1 rem is equivalent to the font-size of the root element of the entire HTML document.

Because the class selectors above use em units, the size of the font is determined by the font-size value of its parent. Therefore, the <p> elements inside the <div> are twice the size of the <p> elements outside the <div>.

As shown above, when rem units are used, the reference point is to the root element.

In general, rem units are easier to use since you are making reference to a single value. When you use em, especially in the case of highly-nested elements, your reference point will vary and may be harder to keep track of.

Text sizing

Use the line-height property to set the height of a line of text.

Note: Try changing the value of line-height property to see how the height of the line of text changes.