text-styling.md

⚑ Text Styling

The various method of styling a text element via CSS.

There are 6 popular text styling in CSS.

☴ Overview:

1. Font families
2. Font sizes
3. Font weights
4. Text decoration
5. Text alignment
6. Text transforms

✦ Font families:

It sets the font family to be used for text.

Syntax: font-family: font-name1, font-name2, ...;

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

✦ Font sizes:

It sets the size of the text.

Syntax: font-size: value;

h1 {
  font-size: 36px;
}

✦ Font weights:

It sets the boldness of the text.

Syntax: font-weight: value;

strong {
  font-weight: bold;
}

✦ Text decoration:

It adds decorations like underline, overline, or line-through to the text.

Syntax: text-decoration: value;

a {
  text-decoration: underline;
}

✦ Text alignment:

It sets the alignment of text within an element.

Syntax: text-align: value;

h1 {
  text-align: center;
}

✦ Text transforms:

It applies text transformations like uppercase, lowercase, or capitalize.

Syntax: text-transform: value;

p {
  text-transform: uppercase;
}

---

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page