CSS Text

CSS text properties allow you to control the appearance of text in your web pages. Here’s a breakdown of some common CSS text properties along with examples:

1. color

Sets the color of the text.

p {
  color: blue;
}

<p>This text is blue.</p>

2. font-family

Specifies the font of the text.

p {
  font-family: 'Arial', sans-serif;
}

<p>This text is displayed in Arial font.</p>

3. font-size

Defines the size of the text.

p {
  font-size: 16px;
}

<p>This text is 16 pixels in size.</p>

4. font-weight

Sets the thickness of the text.

p {
  font-weight: bold;
}

<p>This text is bold.</p>

5. font-style

Specifies the style of the font (e.g., normal, italic).

p {
  font-style: italic;
}

<p>This text is italic.</p>

6. text-align

Aligns the text horizontally within its container (left, right, center, justify).

p {
  text-align: center;
}

<p>This text is centered.</p>

7. text-transform

Controls the capitalization of text (e.g., uppercase, lowercase, capitalize).

p {
  text-transform: uppercase;
}

<p>This text is uppercase.</p>

8. letter-spacing

Adjusts the spacing between characters.

p {
  letter-spacing: 2px;
}

<p>This text has extra space between characters.</p>

9. line-height

Sets the height of lines of text.

p {
  line-height: 1.5;
}

<p>This text has a line height of 1.5, making the lines more spaced out.</p>

10. text-decoration

Adds decoration to text (e.g., underline, overline, line-through).

p {
  text-decoration: underline;
}

<p>This text is underlined.</p>

11. text-shadow

Applies shadow to text.

p {
  text-shadow: 2px 2px 4px #000000;
}

<p>This text has a shadow effect.</p>

12. white-space

Controls how white space inside an element is handled (e.g., nowrap, pre, normal).

p {
  white-space: nowrap;
}

<p>This text will not wrap to a new line.</p>

These properties provide a lot of control over text styling and can be combined to create various text effects and layouts.