Skip to main content
Practice

Text Alignment (text-align), Text Decoration (text-decoration)

Let's learn about the CSS properties text-align and text-decoration, which specify the alignment direction and decoration of text.


text-align​

text-align is a property that specifies the horizontal alignment of content (mainly text) within an HTML element.


Usage Examples​

  • Left Alignment:

    CSS
    .left-align {
      text-align: left;
    }

  • Center Alignment:

    CSS
    .center-align {
      text-align: center;
    }

  • Right Alignment:

    CSS
    .right-align {
      text-align: right;
    }

  • Justify Alignment:

    CSS
    .justify-align {
      text-align: justify;
    }

text-decoration​

text-decoration is a property that adds or removes decorations from text.

Usage Examples​

  • Underline:

    CSS
    .underline {
      text-decoration: underline;
    }

  • Overline:

    CSS
    .overline {
      text-decoration: overline;
    }

  • Line-through (Strikethrough):

    CSS
    .line-through {
      text-decoration: line-through;
    }

  • No Decoration:

    CSS
    .no-decoration {
      text-decoration: none;
    }

Follow the emphasized parts of the code to practice.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.