CSS Text

CSS Text properties control the appearance of text on the web page. They allow you to adjust the font, size, weight, alignment, and other aspects of text to enhance readability and design.

Text Properties Overview

CSS provides several properties to control the presentation of text. These properties help you customize how text is rendered in terms of font, size, weight, line spacing, alignment, and decoration.

1. Font Family

The font-family property specifies the typeface of the text. You can use web-safe fonts, generic font families, or custom web fonts.

/* Font Family */
.example-font-family {
    font-family: 'Arial', sans-serif;
}

        

2. Font Size

The font-size property sets the size of the text. Sizes can be specified in pixels (px), ems (em), or percentages (%).

/* Font Size */
.example-font-size {
    font-size: 20px;
}

        

3. Font Weight

The font-weight property defines the thickness of the font. Values can be numeric (100 to 900) or keywords (normal, bold).

/* Font Weight */
.example-font-weight {
    font-weight: bold;
}

        

4. Line Height

The line-height property controls the amount of space between lines of text.

/* Line Height */
.example-line-height {
    line-height: 1.5;
}

        

5. Text Align

The text-align property sets the horizontal alignment of text. Values include left, right, center, and justify.

/* Text Align */
.example-text-align {
    text-align: center;
}

        

6. Text Transform

The text-transform property controls the capitalization of text. Values include uppercase, lowercase, and capitalize.

/* Text Transform */
.example-text-transform {
    text-transform: uppercase;
}

        

7. Text Decoration

The text-decoration property adds decoration to text, such as underlining, overlining, or line-through.

/* Text Decoration */
.example-text-decoration {
    text-decoration: underline;
}

        

8. Text Shadow

The text-shadow property adds shadow effects to text. It takes values for horizontal and vertical offsets, blur radius, and color.

/* Text Shadow */
.example-text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}