Home arrow Style-Sheets arrow Page 4 - Understanding Style Sheets (part 2)

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:
  1. Understanding Style Sheets (part 2)
  2. Bringing Out The Decorations
  3. Gimme My Space!
  4. Reclining Every Which Way
  5. Above The Watermark
  6. Going Shopping
  7. The View From The Top
  8. The Z-Factor
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 25
October 04, 2000

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
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>


 
 
>>> More Style-Sheets Articles          >>> More By icarus, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

STYLE-SHEETS ARTICLES

- What is CSS?
- The Power of CSS
- Understanding Style Sheets (part 2)
- Understanding Style Sheets (Part 1)

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: