CSS Text

CSS provides multiple properties that specify how text should be formatted on a web page. You can control the color, alignment, spacing, and decoration to make your content readable and professional.

---

Text Color

The color property defines the color of the text. Values can be color names (e.g., 'red'), HEX codes, RGB, or HSL values.

body {
    color: #333; /* Dark Gray text */
}

h1 {
    color: #2e7d52; /* Success green */
}

---

Text Alignment

The text-align property is used to set the horizontal alignment of text.

p {
    text-align: center;
    text-align: right;
    text-align: justify;
}

---

Text Decoration

The text-decoration property is used to set or remove decorations from text (mainly underscores).

a {
    text-decoration: none; /* Removes default underline from links */
}

h2 {
    text-decoration: underline;
}

---

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in text.

p {
    text-transform: uppercase;      /* THIS IS UPPERCASE */
    text-transform: lowercase;      /* this is lowercase */
    text-transform: capitalize;     /* Each Word Starts with a Capital Letter */
}

---

Text Spacing

Control the space between letters, words, and lines of text using these properties:

p {
    letter-spacing: 2px; /* Space between letters */
    word-spacing: 5px;   /* Space between words */
    line-height: 1.6;    /* Vertical space between lines */
}

---

Text Shadow

The text-shadow property adds a shadow to text. Values represent: horizontal, vertical, blur radius, and color.

h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

---