4 Formatting

4.1 Alignment

As with all text, there are times when you want to change how it is aligned. The alignment of a paragraph is an attribute of the paragraph, and is set via an optional extra argument in the paragraph tag. Everything up to the </p> will have this alignment.


<p style="text-align : left">...</p> is usually the default text alignment. It causes the left-hand edge of the text to be lined up on the left-hand edge of the page. This is probably the most common alignment and is usually the default. It is one of the two alignments that are suitable for large blocks of text, as it is one of the easiest to read.


<p style="text-align : right">...</p> is the opposite of style="text-align : left" and causes the right-hand edge of the text to be lined up on the right-hand edge of the page. This is not all that useful for entire paragraphs, but it can be useful as a way of placing small sections of text at the right-hand edge of the page (like the "Next page" link on this page).


<p style="text-align : center">...</p> is used to centre the text (note the American spelling). Each line is centred individually. This tends to make the paragraph look ugly and hard to read, but it is useful for centring headings since they can also take the align attribute.


<p style="text-align : justify">...</p> is the other useful alignment for large blocks of text. The browser should try to space the words out so that the left- and right-hand edges of the paragraph line up with the left- and right-hand edges of the page. The last line of each paragraph will not be justified, but left-aligned. This is probably the alignment that creates the neatest text, though some people find style="text-align : left" easier to read.

Exercise 4

Make sure the main heading on your page is centred, and set the introductory paragraph to be justified. If your paragraph isn't very long you might need to shrink your browser window to see the effects of the justification.

Previous page Next page