More CSS
If you’ve been paying attention, you now know the basics of style sheets - what they are, how to use them, and how to link them to your Web pages - together with some of the important style sheet properties that control typeface and colour.
In this concluding article, I’ll be covering the CSS properties that control background images, positioning, visibility and alignment. Keep reading. You know you want to.
Bringing Out The Decorations
In addition to the numerous font properties discussed in the first part of this series, CSS also allows you tremendous control over the spacing, alignment and appearance of your text.
The “text-decoration” property allows you to emphasize text by putting a line under, over and through it. Take a look:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {text-decoration: underline} /* display a line under text */
.answer {text-decoration: overline} /* display a line over text */
.repeat {text-decoration: line-through} /* display a line through text */
.no-imagination {text-decoration: blink; font-weight: bolder} /* blink text */
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many psychoanalysts does it take to change a light bulb?
<P CLASS="answer">
A. How many do you think it takes?
<P CLASS="repeat">
Q. How many psychoanalysts does it take to change a light bulb?
<P CLASS="repeat">
A. How many do you think it takes?
<P CLASS="no-imagination">
Why are you repeating jokes, you unimaginative creep?
</BODY>
</HTML>
Note that the “blink” keyword only works in Netscape Navigator.
One of the most common uses of the “text-decorate” property is to underline links when the mouse pointer moves over them, in combination with the A:hover pseudo-class (you remember pseudo-classes, don’t you?). Here’s how:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
A {text-decoration: none}
A:hover {text-decoration: underline}
</STYLE>
</HEAD>
<BODY>
<A HREF="#">This is a link</A>. Hooray!
</BODY>
</HTML>
Gimme My Space!
You can also control the amount of space between characters with the “letter-spacing” property
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {letter-spacing: 30px}
</STYLE>
</HEAD>
<BODY>
<P>
Q. How many psychoanalysts does it take to change a light bulb?
<P>
A. How many do you think it takes?
</BODY>
</HTML>
or alter the indentation of the first line of each paragraph with the “text-indent” property.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {text-indent: 10px}
</STYLE>
</HEAD>
<BODY>
<P>
Q. How many psychoanalysts does it take to change a light bulb?
<BR>
A. How many do you think it takes?
</BODY>
</HTML>
Reclining Every Which Way
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>
Above The Watermark
CSS also comes with a bunch of properties that allow you to define the manner in which your page background is displayed. First, the “background-image” property allows you to specify a background image for any HTML element.
.question {background-image: url(“http://www.mysite.com/back.gif”)} /* display background image from url */
If you need this background to work as a watermark, which does not scroll when you scroll down the page, you need the “background-attachment” property - it accepts the values “fixed” and “scroll”.
You can also control whether or not your image tiles across the page with the “background-repeat” property. This property can take one of four values: “repeat” (tile horizontally and vertically), “repeat-x” (tile horizontally only), “repeat-y” (tile vertically only), and “no-repeat” (no tiling).
The following example demonstrates the “repeat-y” keyword:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-size: 20pt; background-image:
url("http://www.mysite.com/back.gif"); background-repeat: repeat-y}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many doctors does it take to change a light bulb?
A. It depends on what kind of insurance you have
</BODY>
</HTML>
And you can also specify the location of the background image with the all-powerful “background-position” property, which can be used in combination with the simple keywords “left”, “right”, “center”, “top”, “middle” and “bottom”. For example, this would position the image in the top right corner:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-size: 20pt; background-image:
url("http://www.mysite.com/back.gif"); background-position: top right;
background-repeat: no-repeat}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many doctors does it take to change a light bulb?
A. It depends on what kind of insurance you have
</BODY>
</HTML>
You can also specify the position of the image in terms of percentages or absolute units - for example,
{background-position: 100%,0%}
would position the image in the top right corner, while
{background-position: 100%,100%}
would position it in the bottom right corner.
Padding Things Out
The CSS formatting model assumes that every element is surrounded by three different areas. Starting from the inside out, these areas are padding, border and margin. Each of these entities can be controlled through special CSS properties, allowing developers to precisely adjust the appearance and position of each HTML element.
Margin widths can be controlled via the “margin-top”, “margin-bottom”, “margin-right”, and “margin-left” properties, and are specified like this:
DIV {margin-top: 10px; margin-bottom: 10px; margin-right: 5px; margin-left:
5px} /* 10px width for horizontal margins, 5px width for vertical margins */
You can also use the catch-all “margin” property
DIV {margin: 10px 5px 5px 10px} /* specify widths clockwise */
or set a uniform margin width with
DIV {margin: 10px} /* equal width for all margins */
You can adjust border widths with the self-explanatory properties “border-top-width”, “border-bottom-width”,”border-left-width”, and “border-right-width”, or set a uniform border with the shortcut “border-width” property.
DIV {border-top-width: 50px; border-right-width: 100px;
border-bottom-width: 75px; border-left-width: 125px} /* different width for
each border */
DIV {border-width: 50px} /* equal width for all borders */
You can also specify border widths with the keywords “thick”, “medium”, “thin” and “none”, like this:
DIV {border-top-width: thick; border-right-width: medium;
border-bottom-width: thin; border-left-width: none}
DIV {border-width: thick}
And finally, padding can be controlled with the…you guessed it!… “padding-top”, “padding-bottom”, “padding-right”, and “padding-left” properties, or the shortcut “padding” property. Try this one out yourself!
CSS also lets you control the colour of your borders with the “border-color” properties. The following example will demonstrate how this works.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {border-color: black; border-width: thick}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many doctors does it take to change a light bulb?
A. It depends on what kind of insurance you have
</BODY>
</HTML>
Going Shopping
If you’re the kind of person who likes lists, CSS has something for you too - two properties which let you alter the appearance of the list item marker. First, there’s the “list-style-type” property, which accepts the values “disc”, “circle”, “square”, “decimal”, “lower-roman”, “upper-roman”, “lower-alpha”, “upper-alpha” or “none”. Take a look:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
LI {list-style-type: square}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI>One tube toothpaste
<LI>One can catfood
<LI>One blue cheese
<LI>One white goat
<LI>Two dozen bat wings
</OL>
</BODY>
</HTML>
You can also use a custom image instead of the default bullets with the “list-style-image” property - like this:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
LI {list-style-image: url("http://www.mysite.com/bullet.gif")}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI>One tube toothpaste
<LI>One can catfood
<LI>One blue cheese
<LI>One white goat
<LI>Two dozen bat wings
</OL>
</BODY>
</HTML>
Note that Netscape Navigator does not yet support these properties.
The View From The Top
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>
The Z-Factor
And finally, when you’re talking about positioning, you can’t omit the “z-index” property, which allows you to specify the “stacking order” of layers placed one above the other. A higher z-index value pushes an element up, while a lower value pulls it down (relatively speaking, of course.)
One of the more common uses of the “z-index” property is to create a drop shadow - the next example will demonstrate this:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.level1 {position: relative; top: 15; left: 25; z-index: 10; color: #00000;
font-family: Arial; font-size:25pt}
.level2 {position: relative; top: -22; left: 28; z-index: 6; color:
#ADADAD; font-family: Arial; font-size:25pt}
.level3 {position: relative; top: -59; left: 29; z-index: 6; color:
#ADADAD; font-family: Arial; font-size:25pt}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="level1">Scared of my shadow? Nah!</DIV>
<DIV CLASS="level2">Scared of my shadow? Nah!</DIV>
<DIV CLASS="level3">Scared of my shadow? Nah!</DIV>
</BODY>
</HTML>
That just about covers most of the common style sheet properties you’ll be using. There are quite a few more defined in the official specification, but they’re plagued by spotty or no browser support, which reduces their usefulness substantially. If you’re interested, though, do check out the official CSS2 specification, available at http://www.w3.org/TR/REC-CSS2
See you soon!
This article was first published on 27 Sep 2000.