Learn Most Important 8 CSS text properties with demos

Working with text in CSS

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:

CSS text color align

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.

CSS text

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.

CSS text line height

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.