Learn
CSS Typography
Text Alignment

No matter how much styling is applied to text (typeface, size, weight, etc.), text always appears on the left side of the browser.

To move, or align, text, we can use the text-align property.

h1 { text-align: right; }

The text-align property can be set to one of the following three values:

  1. left - aligns text to the left hand side of the browser.
  2. center - centers text.
  3. right - aligns text to the right hand side of the browser.

Later in the course, you’ll learn exactly how the browser positions HTML elements by default, which will help you understand how the browser “aligns” text, since “align” is a relative term. For now, it’s enough to know that text can be moved to the left, center, or right side of the web page.

Instructions

1.

In style.css, set the text-align property of the main heading (h1) so that it appears on the left.

2.

On second thought, the heading looks better in the center. Reset the heading so that it is aligned to the center.

Folder Icon

Take this course for free

Already have an account?