Text with Style

With Cascading Style Sheets, designers can create exciting illusions without the use of graphics and  spacers , resulting in shadowed text, splashy headings, and poster-sized headlines.

To create shadowed text, negative margins are applied to the top layer/s (or second and third items) with margin-top and can be called in the body of the document with Class. The text can have two or more layers and can be aligned to create a small drop shadow or offset further to give a motion effect. Place the following code within the STYLE Tags at the top of the document. (Note: A period . is placed before the style definition when using CLASS.)

To call this style in the Body use Class like this:


<Div Class=header align=center>Shadow</Div>
<Div Class=header1 align=center>Shadow</Div>

Modifying Text

Splashy Headings

Create splashy headings with color is quick and easy with style sheets and does not require making an image in a graphic's editor. In this example, the background-color property is set to black and the color (foreground} to yellow like this:

<span style="font-size: 36pt arial; background: #CD853F; color: yellow"> Splash Header</span>


Splash Heads


We've just used the inline style method; the style rule is not placed at the top of the document and is called simply with SPAN wherever you wish to place it within the document.

Poster Headings

<span style="font: 60pt georgia;  color: red>Style It!</span>

Style
It!