Working with CSS text Properties

CSS comes up with many properties related to managing text in your web documents to make it look beautiful, prominent, better in readability etc. The CSS text related properties include the color of text, text alignment, text decoration, indentation, letter spacing, shadow and more.

Note that, the text size comes under the font properties (font-size) that we covered in the CSS font chapter.

This chapter gives a brief about the text properties along with examples and links to the detailed chapters at the bottom.

Example of using alignment and color text properties

In this example, we will set the colors and alignment of headings and paragraph by using CSS text properties. The first heading is transformed to uppercase, second to the lowercase (just for illustration purpose) while paragraph remains as normal with other properties.

See the demo by clicking the link or image below:

Experience this example online

CSS Text example with letter spacing

The example below uses the letter-spacing CSS property in headings and paragraph which is specified in pixels.

Experience this example online

An example of text decoration

The example below removes an underline in a link by using the CSS text-decoration property.

Experience this example online

Example of line-height text property

This example shows how to use line-height property in paragraph and heading.

Experience this example online

Major text CSS properties

Following is the list of important CSS text related properties. Click on any link for its detailed chapter with demos.

  • Text-align property
  • CSS line-height property
  • Text color property
  • CSS letter-spacing property
  • CSS vertical-align property
  • Text-indent property
  • CSS word-spacing property
  • text-shadow property