Text Properties: Align, Decoration, Transform

There are at least half-a-dozen text properties you can redefine using styles. We will start with horizontal alignment. Use the text-align property in conjunction with one of five possible values: left, center, right, justify, and inherit.

Center all the Heading Level 1 text like this:

Test your page! Make certain the markup is working for you! You know what the left and right values will do to the horizontal alignment, but can you imagine what inherit does? Think about it; we will explore inherit later.

For now, let's keep moving with the text-decoration property, which may take on the following five values: underline, overline, line-through, none, and inherit. I'm leaving out a few possibilities because they don't work with all browsers (like the most popular browser: Internet Explorer!)

Start by underlining the Heading Level 1 text:

Test your work, then let's look at a property that's slightly more impressive: text-transform. You can apply consistent case settings to everything under the <h1> heading using the properties: capitalize, lowercase, or uppercase. It's easy to guess what these properties do. We are going to look at the capitalize property, which is like Title Case in word processors: The first letter of every word will automatically be capitalized.

Add the markup like this:

If you've been copying the markup exactly, your page should look something like the screenshot below. Check out that horizontal aligment, underlining, and capitalization: