Alignment

The normal text alignment depends on how text is read across the page in the browser’s default language. If text is read from left to right, the normal alignment is left. If text is read from right to left, however, the normal alignment is right. In either case, when text is aligned to one side or the other, the opposite side is ragged, in that it doesn’t continue all the way to the margin. When text does continue to both margins, it is called justified.

The text-align style sheet property allows you to realign text on your page in any of the following ways:

left
right
center
justify

One benefit of using style sheets in this area is that they also enable you to align text vertically with the vertical-align attribute, as listed in Table:

The following code provides an example of how embedded style sheets can change the text alignment of three different paragraphs.

CHOP POINT is a summer camp devoted
to teenagers that combines a strong residential camping program
with the excitement of an adventurous trip program. Each summer, 80
teenagers between the ages of twelve and eighteen come to Chop Point
from all over the world to have one of the best summers of their
lives. The camp is located two hours up the Maine coast in the town
of Woolwich. The property includes 50 wooded acres of land at the end
of a peninsula, and a mile of shoreline on picturesque and historic
Merrymeeting Bay, along the Kennebec River.
Buildings include a dining hall, a
lodge, two homes, eight cabins, and a boathouse. The boathouse was
renovated into a Library and Learning Center, housing staff and
computers in the summer. Chop Point also has a full size athletic
field, tennis courts, basketball courts, a volleyball court, a
gymnasium, and a well-equipped waterfront facility.
We firmly believe our greatest asset
is our top-notch staff. Sixteen counselors, having completed at least
a year of college, come from throughout the world. They bring their
skill, enthusiasm and love of teenagers to camp, and strive to be a
genuine friend to each camper.

Figure shows how the browser interprets this code.

But what if you wanted to justify all three of those paragraphs—would you have to add the same style sheet information to each p tag? Definitely not! For one thing, if you planned your page appropriately and separated the content areas with div tags, you could take advantage of that planning by adding the text-align property to the appropriate div selector in your style sheet, instead of any individual tags within each content area. For example, the following code shows how I named one division with the three paragraphs.

<div id="CampDescription">
Paragraph 1
Paragraph 2
Paragraph 3
</div>

Then, in my site’s main style sheet, I use that name CampDescription when assigning the formatting of that section. Remember, the # before CampDescription is necessary because this isn’t a normal style sheet selector. Instead of using a tag as my selector, like , I’ve made up my own selector and given it the name of CampDescription. And because I used the id attribute to do so (instead of the style attribute), I prefaced my selector name with a hash mark or pound sign.

#CampDescription {text-align: justify;}

Click next Page to see, Add Headings.

Previous Page | Table of Contents | Next Page