Text Properties

CSS offers a wide range of properties for styling applied to text.

Text Color and Background:

Sets the color of the text.

color: #000; // black

background-color: red;

Specifies the background color behind the text.

// text-align: center;

span {
 text-align: center; // left, right, center
}

vertical-align: top;

vertical-align: middle;

vertical-align: bottom;

vertical-align: baseline;

vertical-align: sub;

vertical-align: text-top;

Sets the horizontal alignment of text within its container (left, right, center).

font-size: 1rem;

font-size: 14px;

span {
  font-size: 12px;
}

The vertical-align CSS property sets the vertical alignment of an inline, inline-block or table-cell box.

p {
  font-weight: 100; // other options: 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder;
}

body {
  font-family: Arial, sans-serif, Roboto;
}

p {
  font-family: sans-serif;
}

span {
  font-style: italic;
}

Sets the size of the font.

body {
  font-variant: normal; // other options: petite caps, all small caps, all petite caps
}

Sets the thickness or boldness of the font.

Specifies the font family for text.

Sets the style of the font (normal, italic, oblique, etc.).

Specifies whether the text should be displayed in small-caps.