A Smarter Way To Learn HTML & CSS(2015)

14
Aligning text

You can center, left-align, right-align, and justify text. This code centers h1 headings…

h1 {
text-align: center;
}

An h1 heading that would normally look like this…

Hydrogen Skateboards

…now looks like this…

Hydrogen Skateboards

Left-aligned is the default style for HTML text. But you can make it explicit:

p {
text-align: left;
}

Suppose you want to place a date all the way over to the right. You could write…

.date-style {
text-align: right;
}

Text assigned that class would look this this. (Look for the date way over on the right.)

July 1, 2018

Here’s a paragraph in the default left-aligned style.

Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus. They have a round head, narrow snout, large eyes, and a variety of distinctive coloration patterns that are species-dependent. Found in Southeast Asia and bordering areas, they range from Bangladesh and Northeast India in the west to the Phillipines in the east, and from Yunnan province in China in the north to the island of Java in the south.

Notice that the right side is “ragged.”

If you want to even it up, you could create a style…

p.pretty {
text-align: justify;
}

A paragraph assigned the pretty class would have an even right edge, like this.

In your CSS file code all h3 headings so they center. Create a class of paragraphs that justifies the paragraph. In your HTML file code a centered heading and a justified paragraph.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-14-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-14-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/14.html

A Smarter Way To Learn HTML & CSS(2015)

14 Aligning text

14
Aligning text