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

The View From The Top - 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
Perhaps one of the best things about CSS is the fact that, for the first time, a Web developer has the ability to precisely position different HTML elements on a Web page. The three properties that allow you to do this are "position", "left" and "top" - remember them, because you're going to be using them very, very often in your CSS endeavours!

The "position" property allows to you to define the type of positioning for an element - options are "absolute" or "relative". This property is used in tandem with the "top" and "left" properties, which specify the top and left coordinates for the element under consideration.

Absolute positioning allows you to place an element anywhere on a page, with no regard to the positions of the elements around it, while relative positioning allows you to specify position relative to other elements on the page. Of the two, absolute positioning is more common, since it's easier to specify an absolute location (which remains unchanged) than a relative location (which can change as the elements around it shift position).

Here's an example of how you can use these properties to precisely position blocks of text:
<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV STYLE="position: absolute; 
top:10; left:50; font-family: Verdana;
font-size: 35pt; color: green">
Q. How 
many Sicilians does it take to change a lightbulb?
</DIV>
<DIV STYLE="position: 
absolute; top:140; left:300; font-family: Verdana;
font-size: 20pt; color: blue">
A. 
Two. One to change it, and
</DIV>
<DIV STYLE="position: absolute; top:180; 
left:50; letter-spacing:5px;
font-family: Verdana; font-size: 33pt; color: red">
one 
to kill the witnesses.
</DIV>
</BODY>
</HTML>.
You can also make certain elements invisible with the "visibility" property, which accepts the values "visible" and "hidden" - take a look:
<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV STYLE="position: absolute; 
top:10; left:50; font-family: Verdana;
font-size: 35pt; color: green">
Q. How 
many Sicilians does it take to change a lightbulb?
</DIV>
<DIV STYLE="visibility: 
hidden">
A. Two. One to change it, and
</DIV>
<DIV STYLE="position: absolute; 
top:180; left:50; letter-spacing:5px;
font-family: Verdana; font-size: 33pt; color: 
red">
one to kill the witnesses.
</DIV>
</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: