Learn Text Properties in HTML

HTML text has a couple of properties. When these properties change, the looks and feel of the website changes too. For example, here I’ve already told you how to change the color of the text in HTML.

Text Alignment

The css property text-align is intended for text alignment. It can be used to align text:

• left - left-aligned (default option)
• right - right-aligned
• center - in the center
• justify - stretch to the full width of the element

In practice, all options could be used like this:

<p style="text-align: left;"> Left alignment </p>
<p style="text-align: right;"> Right alignment </p>
<p style="text-align: center;"> Center Align </p>
<p style="text-align: justify;"> Justify to width </p>

Text Decoration

With CSS you can add decoration to the text or accentuate a particular word using the property text-decoration:

<p style="text-decoration: none;"> There will be no effects. Default value </p>
<p style="text-decoration: underline;"> Text will be underlined </p>
<p style="text-decoration: overline;"> A line will be drawn over the text </p>
<p style="text-decoration: line-through;"> Text will be strikethrough </p>

You can also specify the shape or color of the line, in addition to its type. Let's look at an example of underline:

<p style="text-decoration: underline solid;"> The text will be underlined with one line. It's the default behaviour </p>
<p style="text-decoration: underline dotted;"> Text will be underline with the black dots </p>
<p style="text-decoration: underline dotted red;"> Text will be underlined with red dots </p>
<p style="text-decoration: underline double blue;"> Text will be underlined with two blue lines </p>
<p style="text-decoration: underline dashed rgb(0, 0, 0);"> Text will be underlined with black strokes </p>
<p style="text-decoration: underline wavy #000000;"> The text will be underlined with a black wavy line </p>

The shape and color of the line can also be set using separate properties - text-decoration-style and text-decoration-color:

<p
   style = "
     text-decoration: underline;
     text-decoration-style: dashed;
     text-decoration-color: rgb(0, 0, 0);
   "
>
  The text will be underlined with black strokes
</p>

First line indent

The first line of the paragraph should often be indented. For example, when writing an article or a book. In CSS this is done using the text-indent property:

<p style = "text-indent: 100px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium urna, ut ornare odio luctus a. Sed laoreet, velit nec luctus pharetra, eros est condimentum urna, hendrerit malesuada sem mi ac lectus.
</p>

If you set the indentation in percent, then it will be calculated relative to the width of the HTML element.

<p style="text-indent: 30%">
Proin at risus vel lectus pretium ultrices. Integer et orci condimentum, viverra tortor a, vehicula orci. Quisque pretium, nulla et dapibus tempor, tellus felis mollis mi, bibendum malesuada lacus ex in magna. Mauris rhoncus id massa ac viverra. Ut ante ligula, dignissim pellentesque gravida at, condimentum a erat. In dignissim consequat mollis.
</p>

Text transformation

The text-transform property controls the size (case) of letters. There can be four values in total:

• none - no changes
• capitalize - all words start with a capital letter
• uppercase - all characters turned to the uppercase
• lowercase - all lowercase

<p style="text-transform: none;"> All letters will be displayed as entered by the developer. Default value </p>
<p style="text-transform: capitalize;"> All words will be capitalized </p>
<p style="text-transform: uppercase;"> All letters of all words will be in uppercase </p>
<p style="text-transform: lowercase;"> All letters of all words will be displayed in lowercase </p>

Space between characters

To set the spacing between characters, use the letter-spacing property.

The default is normal. In this case, the browser will do everything for you and, depending on the font typeface and its size will set the distance between the characters.

If you want to control everything yourself, you can explicitly specify the number of pixels between characters:

<p style="letter-spacing: 20px;"> Text with 20px spacing </p>

The distance between characters can be made negative. In most cases, this will make the text unreadable:

<p style="letter-spacing: -4px;"> Text that is very difficult to read. </p>

Space between words

You can set the spacing between words, in the same way as you set the spacing between characters. The only difference will be in the property name - word-spacing. All other rules are preserved:

<p style="word-spacing: 200px;"> Text with huge spacing between words </p>

IMPORTANT! If we also decide to add the CSS property text-align: justify, then the distance between words will be determined by the browser, but will not be less than the value of word-spacing:

<p style="text-align: justify; word-spacing: 20px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium urna, ut ornare odio luctus a. Sed laoreet, velit nec luctus pharetra, eros est condimentum urna, hendrerit malesuada sem mi ac lectus. Proin at risus vel lectus pretium ultrices. Integer et orci condimentum, viverra tortor a, vehicula orci. Quisque pretium, nulla et dapibus tempor, tellus felis mollis mi, bibendum malesuada lacus ex in magna. Mauris rhoncus id massa ac viverra. Ut ante ligula, dignissim pellentesque gravida at, condimentum a erat. In dignissim consequat mollis.
</p>