Text

How Can We Help?
< All Topics

Text

Font Family

The font-family property is used to specify the font or font family for text. You can provide multiple font names, separated by commas, to indicate fallback options in case the desired font is not available. Here’s an example:

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

Font Size

The font-size property sets the size of the text. It can have values in pixels (px), percentages (%), em units (em), or other length units. Here’s an example:

h1 {
  font-size: 24px;
}

Font Weight

The font-weight property controls the thickness or boldness of the text. It can have values like normal, bold, bolder, or lighter. Here’s an example:

span {
  font-weight: bold;
}

Text Color

The color property is used to set the color of the text. You can specify the color using color names, hexadecimal notation, RGB or RGBA notation, or HSL or HSLA notation. Here’s an example:

h2 {
  color: #336699;
}

Text Alignment

The text-align property controls the alignment of the text within its container. It can have values like left, right, center, or justify. Here’s an example:

p {
  text-align: center;
}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

Text Decoration

The text-decoration property is used to add visual effects to the text, such as underlining, overlining, or striking through. Here’s an example:

a {
  text-decoration: underline;
}

CSS Text Shadow

The text-shadow property adds a shadow to text.

In its simplest use, you only specify the horizontal shadow and the vertical shadow:

h1 {
  text-shadow: 2px 2px;
}

Line Height

The line-height property defines the spacing between lines of text. It can have values in pixels, percentages, or unitless numbers. Here’s an example:

p {
  line-height: 1.5;
}

Letter Spacing

The letter-spacing property controls the spacing between individual characters in text. It can have values in pixels, percentages, or other length units. Here’s an example:

h3 {
  letter-spacing: 2px;
}

The CSS Text Spacing Properties

Property Description
letter-spacing Specifies the space between characters in a text
line-height Specifies the line height
text-indent Specifies the indentation of the first line in a text-block
white-space Specifies how to handle white-space inside an element
word-spacing Specifies the space between words in a text

Conclusion

CSS provides a wide range of properties to style and format text within HTML elements. By utilizing properties like font-family, font-size, font-weight, color, text-align, text-decoration, line-height, and letter-spacing, you can create visually appealing and well-formatted text. Experiment with different combinations and techniques to achieve the desired effects and enhance the readability and aesthetics of your web pages.

Table of Contents