CSS Text Formatting
CSS text formatting is used to control the appearance of text on web pages. CSS can be used to specify the alignment, indentation, line height, and other properties of text.
Alignment
The text-align property specifies the alignment of text within an element. The text-align property can be set to one of the following values:
- left: The text is aligned to the left side of the element.
- center: The text is centered within the element.
- right: The text is aligned to the right side of the element.
- justify: The text is justified, so that it is aligned to both the left and right sides of the element.
For example, the following CSS rule will set the text alignment of all <h1> elements to center:
h1 {
text-align: center;
}Indentation
The text-indent property specifies the amount of indentation for text within an element. The text-indent property can be specified in pixels, ems, or relative units.
For example, the following CSS rule will indent all <p> elements by 20px:
p {
text-indent: 20px;
}Line Height
The line-height property specifies the height of a line of text. The line-height property can be specified in pixels, ems, or relative units.
For example, the following CSS rule will set the line height of all <h1> elements to 1.5em:
h1 {
line-height: 1.5em;
}Other Text Formatting Properties
CSS also includes a number of other text formatting properties, such as letter-spacing, word-spacing, and text-transform. These properties can be used to control the appearance of text in more detail.
For example, the following CSS rule will set the letter spacing of all <h1> elements to 0.1em:
h1 {
letter-spacing: 0.1em;
}Task
Give body and h1 line-height of 1.6 and 1.2 respectively. Make h1 and footer text center. Run the code to see the results and experiment with the code to get used to it.
Conclusion
CSS text formatting can be used to control the appearance of text on web pages. By understanding the different CSS text formatting properties, you can create web pages that look the way you want them to look.
Here are some tips for using CSS text formatting:
- Use a variety of text formatting properties to create a visually appealing web page.
- Use text formatting to create a hierarchy of text on your web page.
- Use text formatting to highlight important text on your web page.