Text Alignment and Decoration in CSS

In CSS, text alignment and text decoration are crucial properties for controlling the appearance of text. Text alignment is used to position text within its container, while text decoration modifies the visual style of text, such as adding underlines or striking through text. These properties help you enhance the layout and presentation of text content on your webpage.

Text Alignment

The text-align property in CSS is used to specify the horizontal alignment of text within its container. You can align text to the left, right, center, or justify it within the element.

Example 1: Aligning text to the left

    <style>
      .example1 {
        text-align: left;
      }
    </style>
    <div class="example1">
      This text is aligned to the left.
    </div>
        

In this example, the text is aligned to the left using the text-align: left; property. This is the default text alignment for most elements.

Example 2: Center-aligning text

    <style>
      .example2 {
        text-align: center;
      }
    </style>
    <div class="example2">
      This text is centered.
    </div>
        

In this example, the text is centered within its container using text-align: center;. This is commonly used for headings or any other element where you want the content to be in the middle of the container.

Example 3: Aligning text to the right

    <style>
      .example3 {
        text-align: right;
      }
    </style>
    <div class="example3">
      This text is aligned to the right.
    </div>
        

This example aligns the text to the right using text-align: right;. This is often used for right-to-left languages or aligning text to the right side of a container.

Example 4: Justifying text

    <style>
      .example4 {
        text-align: justify;
      }
    </style>
    <div class="example4">
      This text is justified, meaning it will stretch to fit the width of its container.
    </div>
        

text-align: justify; makes the text take up the entire width of its container, adjusting the spaces between words to ensure that both the left and right edges of the text are aligned. This is commonly used for paragraphs in documents to create a neat, uniform appearance.

Text Decoration

The text-decoration property in CSS is used to apply various styles to text, such as underlining, striking through, or overlining text. It helps emphasize or stylize specific parts of the text.

Example 5: Underlining text

    <style>
      .example5 {
        text-decoration: underline;
      }
    </style>
    <div class="example5">
      This text is underlined.
    </div>
        

The text-decoration: underline; property adds an underline to the text. This is often used for links or to highlight important text.

Example 6: Striking through text

    <style>
      .example6 {
        text-decoration: line-through;
      }
    </style>
    <div class="example6">
      This text has a strike-through.
    </div>
        

The text-decoration: line-through; property adds a line through the text. This is commonly used for showing deleted or outdated text in a document or interface.

Example 7: Adding a combination of text decoration styles

    <style>
      .example7 {
        text-decoration: underline overline;
      }
    </style>
    <div class="example7">
      This text has both an underline and an overline.
    </div>
        

You can combine different text decorations like underline and overline using the text-decoration property. This can create unique effects, adding both an underline and an overline to the text.

Conclusion

Text alignment and text decoration are powerful properties in CSS that allow you to control the visual presentation of text. By using text-align, you can align your text in various ways, such as left, center, right, or justify. On the other hand, text-decoration helps you emphasize text by underlining, striking through, or adding other styles. These properties give you flexibility in creating a visually appealing and well-structured webpage.