Understanding Style Sheets (part 2) - Reclining Every Which Way (
Page 4 of 8 )
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>
/ 25 
