CSS 8 💻 text-align, letter-spacing, word-spacing and text-transform

text-align → specifies how the text will be aligned within its parent element
it can take start, end, left, right, center, justify, match-parent
it sets the alignment to left
it sets the alignment to center
it sets the alignment to right
letter-spacing → sets the space between the letters in a word
it can take normal keyword and length values like em, px  etc
it sets the space to normal
it sets the space to 2px

word-spacing → sets the space between words
it can take the keyword normal, and length values like px, em etc;
example 1 with normal value
example 2 with 2px value
text-transform → changes the appearance of the text by capitalizing or the opposite
it can take capitalize, uppercase, lowercase and none keywords
example 1 with uppercase value
example 2 with capitalize value

8 – text-align, letter spacing, word-spacing and text-transform

<div class="left-aligned">This text is left-aligned within the first div.</div>
<div class="center-aligned">This text is centered within the Second div.</div>
<div class="right-aligned">This text is right-aligned within the Third div.</div>
<p class="normal-spacing">This text has normal letter spacing.</p>
<p class="expanded-spacing">This text has expanded letter spacing.</p>
<p class="normal-spacing">This text has normal word spacing.</p>
<p class="expanded-spacing">This text has expanded word spacing.</p>
<p class="uppercase">This text is in uppercase.</p>
<p class="capitalize">this text is capitalized.</p>

div.left-aligned {
    text-align: left; /* Aligns the text to the left */
    width: 50%;
    border: 1px solid #ddd;
    padding: 10px;
}

div.center-aligned {
    text-align: center; /* Centers the text within the div */
    width: 50%;
    border: 1px solid #ddd;
    padding: 10px;
}

div.right-aligned {
    text-align: right; /* Aligns the text to the right */
    width: 50%;
    border: 1px solid #ddd;
    padding: 10px;
}

p.normal-spacing {
    letter-spacing: normal; /* Default spacing between letters */
    font-size: 18px;
}

p.expanded-spacing {
    letter-spacing: 2px; /* Increases the space between letters */
    font-size: 18px;
}

p.normal-spacing {
    word-spacing: normal; /* Default spacing between words */
    font-size: 18px;
}

p.expanded-spacing {
    word-spacing: 2px; /* Increases the space between words */
    font-size: 18px;
 }   

p.uppercase {
    text-transform: uppercase; /* Converts all letters to uppercase */
    font-size: 18px;
}

p.capitalize {
    text-transform: capitalize; /* Capitalizes the first letter of each word */
    font-size: 18px;
    }