CSS Text:

CSS provides various properties to control the appearance of text, including alignment, decoration, spacing, and transformation. These properties allow you to style text for readability, emphasis, and design consistency.

1️⃣ CSS Text Properties

Property	Description	Example
`color`	Changes the text color.	`color: blue;`
`text-align`	Aligns text (left, center, right, justify).	`text-align: center;`
`text-decoration`	Adds underline, overline, or strikethrough.	`text-decoration: underline;`
`text-transform`	Converts text to uppercase, lowercase, or capitalize.	`text-transform: uppercase;`
`letter-spacing`	Adjusts space between letters.	`letter-spacing: 2px;`
`word-spacing`	Adjusts space between words.	`word-spacing: 5px;`
`line-height`	Sets space between lines of text.	`line-height: 1.5;`
`text-shadow`	Adds shadow to text.	`text-shadow: 2px 2px 5px gray;`

2️⃣ Example Usage of CSS Text Properties

.text-box {
  color: darkblue;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 2px;
  word-spacing: 5px;
  line-height: 1.5;
  text-shadow: 2px 2px 5px gray;
}

Explanation:

Text will be dark blue, center-aligned, and underlined.
It will be uppercase with extra spacing between letters and words.
A shadow effect will be applied for styling.

3️⃣ Commonly Used CSS Text Properties

Text Alignment (`text-align`)

left (default) – Aligns text to the left.
center – Centers the text.
right – Aligns text to the right.
justify – Stretches text to fit the full width.

p {
  text-align: justify;
}

Text Decoration (`text-decoration`)

Used to style text with lines or remove underlines from links.

none – Removes decoration.
underline – Adds an underline.
overline – Adds a line above text.
line-through – Strikes through text.

a {
  text-decoration: none;
}

Text Transformation (`text-transform`)

Controls letter case in text.

uppercase – Converts text to capital letters.
lowercase – Converts text to small letters.
capitalize – Capitalizes the first letter of each word.

h1 {
  text-transform: capitalize;
}

Letter & Word Spacing (`letter-spacing`, `word-spacing`)

These properties adjust spacing for readability.

p {
  letter-spacing: 1px;
  word-spacing: 3px;
}

Line Height (`line-height`)

Controls vertical spacing between lines for better readability.

p {
  line-height: 1.6;
}

Text Shadow (`text-shadow`)

Adds a shadow effect to text.

Syntax:

text-shadow: horizontal-offset vertical-offset blur-radius color;

Example:

h1 {
  text-shadow: 3px 3px 5px gray;
}

4️⃣ Summary Table

Property	Purpose	Example
`color`	Sets text color.	`color: red;`
`text-align`	Aligns text.	`text-align: right;`
`text-decoration`	Adds/removes text effects.	`text-decoration: overline;`
`text-transform`	Changes case of text.	`text-transform: lowercase;`
`letter-spacing`	Adjusts space between letters.	`letter-spacing: 1.5px;`
`word-spacing`	Adjusts space between words.	`word-spacing: 3px;`
`line-height`	Controls line spacing.	`line-height: 2;`
`text-shadow`	Adds shadow effect.	`text-shadow: 2px 2px 4px gray;`

Conclusion

CSS text properties allow precise control over color, alignment, decoration, spacing, and effects, making text more readable and visually appealing. Proper use of these properties enhances the design and improves user experience.

CSS

CSS Text:

1️⃣ CSS Text Properties

2️⃣ Example Usage of CSS Text Properties

Explanation:

3️⃣ Commonly Used CSS Text Properties

Text Alignment (text-align)

Text Decoration (text-decoration)

Text Transformation (text-transform)

Letter & Word Spacing (letter-spacing, word-spacing)

Line Height (line-height)

Text Shadow (text-shadow)