block elements

Changing the formatting of paragraphs with Style Sheets includes additional features like justification, spacing without the use of spacer images, text indents and more.

This text is red, justified, calling for a special instance of the P tag which uses the Class attribute. With Embedded Style Sheets, the style rule is placed at the top of the document like so:

P.justify  {text-align: justify; color: red}

Now you can  place the paragraph anywhere in your document with this code:

<P Class="justify">  Here is your text</P>

Spacing

Changing leading or spacing in your document's paragraphs and block elements is easily done with inline style sheets. Rather than use a vertical spacer to add different levels of spacing, simply use line-height attribute like

P.leading { font-family: serif; font-size: 12pt; color: #rgb(128,0,0); line-height: 25pt }

Now, place this code where you would like it to appear:

<P class="leading">This paragraph should appear with extra spacing between lines due to the text leading set to 25pt</p>

Indents

This paragraph should be indented one inch and can be easily implemented with style sheets

splashy text

(Best viewed with 4.0 Browsers)

Adding color and borders to your paragraphs or other block elements is another featuring of Cascading Style Sheets and  can be used to emphasize certain portions of your document  like so:

P.splash { font-family: sans-serif; font-size: 12; color: #rgb(0,255,0); background-color: #rgb(0,128,0); border: 4 groove #rgb(128,128,0); padding-left: 10px; padding-right: 10px }

Place the following code in the body of your document:

<P Class="splash">Here goes your paragraph text!</P>

This paragraph uses color and borders to highlight a particular area. It uses borders, padding and color to make a cool effect!

Images as Backgrounds

Text can be overlaid on images with style sheets for interesting effects like so:

P.image {font-family: Arial; font-size: 12pt; color: yellow; background: URL(square.gif); font-size: 14pt; line-height: 16pt}

and then placed in your document with:

<P class="image">text here</P>

This is an example of using an image as a background in a paragraph. An image such as this one should be used sparingly since the text is difficult to read. However, the effect is certainly visual!.