Skip to main content

text-properties-in-html

Text Properties in CSS​

CSS provides several properties to manage the display of text. The most common ones are listed below:

  • direction: sets the direction of text flow.
  • letter-spacing: sets the amount of space between letters.
  • line-height: sets the amount of space between the baseline of two lines.
  • text-align: sets the justification properties of text.
  • text-decoration: determines how to use a line to decorate the text.
  • text-indent: sets the amount of space to indent before each line of text in a block.
  • text-transform: sets whether upper-case letters or lower-case letters are used.
  • word-spacing: sets the amount of space between two words.

Examples!!​

Example 1: Change the amount of space between letters and add an underline​

CSS Declaration

p {
letter-spacing: 5px;
text-decoration: underline;
}

HTML

<p>Wider gaps between letters with an underline.</p>

Output:​

Wider gaps between letters with an underline.

Use the playground to practice what you have learned.

<insert code editor>

Example 2: Align text to the right, use all upper case letters, and use double space between lines​

CSS Declaration

p {
text-align: right;
text-transform: uppercase;
line-height: 2;
}

HTML

<p>This paragraph is justified to the right, double-spaced, and in all caps. </p>

Output:​

THIS PARAGRAPH IS JUSTIFIED TO THE RIGHT, DOUBLE-SPACED, AND ALL CAPS.

Practise Time!!​

Use the playground to practice what you have learned.

<insert code editor>

And Voila, that’s the end of all the concepts in this lesson!!

Summary​

In this lesson, we have learned that:

  • Font Properties in CSS (font-family, font-size, font-weight, font-variant, font-style)
  • Text Properties

Useful resources for you​

Now that you’re done with this lesson, here are some useful post-class reading links for you.

<links should be added>