Make your own free website on


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.)

{ font-size: 36pt; line-height: 40pt; margin-top: -5pt; color: #A0522D; font-family: Arial }

{ font-size: 36pt; line-height: 40pt; margin-top: -40pt;  margin-left: 5pt; color: #B8860D; font-family: Arial }

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

To modify the shadow, change the number values for the top-margin and left-margins. By changing the left-margin number in the example to 8, the shadow now falls to the left like so:


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

Poster -size headings are just as easy using inline style sheets. Here's how:

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

Home. | . More Style . | . Graphics . | . Words . | . HTML Tips