CSS: Text alignment

A strong way to highlight a section of text is to align it differently from the rest of the text. Many sites align the header to the center so that the user can distinguish it more quickly.

Centered header

Page text. You can see that the header jumps out more since it's centered

CSS allows you to align text using the text-align property with 4 basic values:

left. This one is used by default
center
right
justify

<p class="left">Left edge text</p>
<p class="center">Center text</p>
<p class="right">Right edge text</p>
<p class="justify">Justified. It is rarely used, because it leaves unequal spaces between words</p>

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.justify {
  text-align: justify;
}

Left edge text

Center text

Right edge text

Justified. It is rarely used, because it leaves unequal spaces between words. This method is often used in book layout because it means that the text will be “rectangular”, i.e., every line finishes at the same point.

Instructions

Add a paragraph with the class important to the editor and center it. Write the styles in the <style> tag.

Tips

The most familiar option to most people's eyes is left alignment. Try not to use too many different alignments on one page