CSS: Text Styling

Text Styling Properties

CSS provides various properties to style text:

• font-family: Specifies the font of the text.
• font-size: Sets the size of the text.
• font-weight: Controls the boldness of the text.
• text-align: Aligns text horizontally (e.g., left, center, right).
• text-decoration: Adds decoration (e.g., underline, line-through).
• line-height: Sets the spacing between lines.
• letter-spacing: Adjusts the spacing between letters.
• word-spacing: Adjusts the spacing between words.

Example: Text Styling

/* Example */
h1 {
    font-family: Arial, sans-serif;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    line-height: 1.5;
    letter-spacing: 2px;
    word-spacing: 5px;
}
        

This example styles an h1 element with various text properties.

Practice

Try experimenting with text styling:

• Change the font-family to a custom font.
• Adjust the line-height to improve readability.
• Use text-align to center-align a paragraph.

Continue Learning

• Next: CSS Backgrounds