60-270: CSS Text Formatting


	CSS Text Formatting

News Outline Schedule Tutorials Project Tools Links

Paragraph Formatting

One major part of making a clean, presentable page is the layout of your text. Paragraph formatting can be very important to that, and there are CSS properties related to this. Below are some examples:

text-indent sets the indentation at the start of a paragraph - by default, the paragrap tags in the class site are indented by 1em, or the equivalent of the height of a capital letter M in the font being used. Here's a pair of paragraphs, the first indented none at all, and the second with an indent of 100px, for contrast:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi magna quam, hendrerit tincidunt vulputate nec, fermentum nec dolor. Sed pellentesque ultrices enim, nec condimentum nibh tincidunt vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget tempor libero. Cras ultrices, ante eget suscipit pretium, purus ligula laoreet nisl, non viverra nunc magna ac dolor. Nullam in enim mauris, ut rutrum nulla. Aliquam vulputate auctor lacus, et consequat leo fringilla sit amet. Nam ut tortor ipsum.

Text alignment is performed with the text-align property, which can have four possible values: the default of left, as well as right, center, and justify. Note that text in the english language is intended to be read with a smooth left margin, and indentations are used to indicate the start of a new paragraph - this means you should not use right or center alignments on your paragraphs for english text! Some other languages are designed to be read from right-to-left, and for them, right alignment is apropriate. If you want a smooth margin on both sides of your text, you should use text-align: justify to do so.

Left! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi magna quam, hendrerit tincidunt vulputate nec, fermentum nec dolor. Sed pellentesque ultrices enim, nec condimentum nibh tincidunt vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget tempor libero. Cras ultrices, ante eget suscipit pretium, purus ligula laoreet nisl, non viverra nunc magna ac dolor. Nullam in enim mauris, ut rutrum nulla. Aliquam vulputate auctor lacus, et consequat leo fringilla sit amet. Nam ut tortor ipsum.

Right! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi magna quam, hendrerit tincidunt vulputate nec, fermentum nec dolor. Sed pellentesque ultrices enim, nec condimentum nibh tincidunt vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget tempor libero. Cras ultrices, ante eget suscipit pretium, purus ligula laoreet nisl, non viverra nunc magna ac dolor. Nullam in enim mauris, ut rutrum nulla. Aliquam vulputate auctor lacus, et consequat leo fringilla sit amet. Nam ut tortor ipsum.

Center! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi magna quam, hendrerit tincidunt vulputate nec, fermentum nec dolor. Sed pellentesque ultrices enim, nec condimentum nibh tincidunt vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget tempor libero. Cras ultrices, ante eget suscipit pretium, purus ligula laoreet nisl, non viverra nunc magna ac dolor. Nullam in enim mauris, ut rutrum nulla. Aliquam vulputate auctor lacus, et consequat leo fringilla sit amet. Nam ut tortor ipsum.

Justify! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi magna quam, hendrerit tincidunt vulputate nec, fermentum nec dolor. Sed pellentesque ultrices enim, nec condimentum nibh tincidunt vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget tempor libero. Cras ultrices, ante eget suscipit pretium, purus ligula laoreet nisl, non viverra nunc magna ac dolor. Nullam in enim mauris, ut rutrum nulla. Aliquam vulputate auctor lacus, et consequat leo fringilla sit amet. Nam ut tortor ipsum.

Note that in all of the above examples, the page's default paragraph indentation still has effect, as it is not being disabled. This is not really visible in the right aligned paragraph, and makes the center aligned paragraph slightly uneven - it's something to remember when you are formatting your text.