Reclining Every Which Way - Style Sheets

The concluding part of this tutorial explores some of the CSS properties related to text alignment, spacing and positioning, together with a look at absolute and relative positioning, z-index stacking, and borders and padding.

TABLE OF CONTENTS:

By: icarus, (c) Melonfire

Poor Best

Rating:

/ 25

October 04, 2000

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Horizontal alignment takes place via the "text-align" property, which accepts the values "left", "right", "center" and "justify", while vertical alignment happens via the "vertical-align" property, which can take any of the following values: "baseline", "text-top", "text-bottom", "middle", "'sub", "super", "top", and "bottom".

Most of these are self-explanatory, but the following example will make things clearer:

<HTML>
<HEAD>
</HEAD>
<BODY>
<P STYLE="text-align: center; 
font-weight: bolder">
Thoughts to live by!
<P STYLE="text-align: left">
Condense 
soup, not books
<P STYLE="text-align: right">
<IMG SRC="bullet.gif" HEIGHT="25" 
WIDTH="25">Crime doesn't pay, but the
hours are good.
<P STYLE="text-align: 
justify">
<IMG SRC="bullet.gif" HEIGHT="25" WIDTH="25">Do you know that if 
all the
smokers were laid end to end around the world,
three quarters of them 
would drown?
<P STYLE="vertical-align: sub">
<IMG SRC="bullet.gif" HEIGHT="25" 
WIDTH="25">Elvis is dead, Mozart is dead,
Einstein is dead, and I'm not feeling 
so
great myself.
<P STYLE="vertical-align: super">
<IMG SRC="bullet.gif" 
HEIGHT="25" WIDTH="25">Ever stop to think, and forget
to start again?
<P STYLE="vertical-align: 
top">
<IMG SRC="bullet.gif" HEIGHT="25" WIDTH="25">For people who like peace 
and
quiet - a phoneless cord.
</BODY>
</HTML>

The "text-transform" property allows you to change the capitalization of text - choose between "uppercase", "lowercase", "capitalize", and "none".

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {text-transform: capitalize} 
/* first character capitalized*/
.answer {text-transform: uppercase} /* all characters 
capitalized */
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How 
many paranoid people do you need to change a light-bulb ??
<P CLASS="answer">
A. 
And who's asking???!!!!
</BODY>
</HTML>

And the "line-height" property allows you to alter the space between lines, thereby giving you the power to overlap text segments on each other. Warning: this is addictive!

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-size: 30pt; text-transform: 
capitalize; line-height: 60px}
.answer {font-size: 50pt; color: red; text-transform: 
uppercase;
line-height: 20px}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. 
How many paranoid people do you need to change a light-bulb ??
<P CLASS="answer">
A. 
And who's asking???!!!!
</BODY>
</HTML>

Next: Above The Watermark >>