CSS Text

CSS provides a range of properties to style and control the display of text.

Text Color

The color property is used to specify the color of the text.

p {
  color: red;
}

In this example, the text color of the p element is set to red.

Text Alignment

The text-align property is used to specify the horizontal alignment of the text. It can be set to left, right, center, or justify.

p {
  text-align: center;
}

In this example, the text in the p element is centered.

Vertical Alignment

The vertical-align property sets the vertical alignment of an element.

CSS Code:

img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}

Text Decoration

The text-decoration property is used to add decoration to the text. It can be set to underline, overline, line-through, or none.

p {
  text-decoration: underline;
}

In this example, the text in the p element is underlined.

Text Transformation

The text-transform property is used to specify the capitalization of the text. It can be set to uppercase, lowercase, capitalize, or none.

p {
  text-transform: uppercase;
}

In this example, the text in the p element is transformed to uppercase.

Text Spacing

The letter-spacing property is used to specify the space between characters, and the word-spacing property is used to specify the space between words.

p {
  letter-spacing: 2px;
  word-spacing: 2px;
}

In this example, the space between characters and words in the p element is set to 2px.

Text Indentation

The text-indent property is used to specify the indentation of the first line of text.

p {
  text-indent: 50px;
}

In this example, the first line of text in the p element is indented by 50px.

Line Height

The line-height property is used to specify the height of a line.

p {
  line-height: 1.6;
}

In this example, the line height in the p element is set to 1.6, which means the line height is 1.6 times the size of the default line height.

Text Shadow

The text-shadow property is used to apply a shadow effect to the text. It takes four values: the horizontal offset, the vertical offset, the blur radius, and the color of the shadow.

p {
  text-shadow: 2px 2px 4px blue;
}

In this example, a blue shadow is applied to the text in the p element. The shadow is offset 2px to the right and 2px down from the text, and it has a blur radius of 4px.

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

CSS Code:

h1 {
  letter-spacing: 3px;
}
h2 {
  letter-spacing: -3px;
}

Line Height

The line-height property is used to specify the space between lines

CSS Code:

p.small {
  line-height: 0.8;
}
p.big {
  line-height: 1.8;
}

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

CSS Code:

h1 {
  word-spacing: 10px;
}
h2 {
  word-spacing: -5px;
}

White Space

The white-space property specifies how white-space inside an element is handled.

CSS Code:

p {
  white-space: nowrap;
}

This shows how disable text wrapping inside an element.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.