Cascading Style Sheets
A tutorial for those with Internet Explorer 3 or Netscape 4
Cascading Style Sheets are a great concept that brings pixel precise layout capabilities to Web Browsers.
Style Sheets can be compared to the styles in a word processor. Most good ones have a "Define Styles..." command that allows you to create custom styles like, oh say Times 35.2 Bold Italic Shadow. This style can then be applyed with a single key-stroke.
Cascading Style Sheets follow a similiar concept, but have more flexibility than changing the type style.
Here's a sample HTML document with Style Sheets:
<HTML>
<HEAD>
<TITLE>CSS1</TITLE>
<STYLE TYPE="text/css">
<!--
H2{Color:red;Font-Size:50px}
-->
</STYLE>
</HEAD>
<BODY>
<CENTER><H2>Hello World</H2></CENTER>
</BODY>
</HTML>
This example would display something like this:
Hello World
On a new browser, all text formatted with <H2> becomes 50-point red text. This can be applied to any other tag as well. For your viewing pleasure, here are some other properties:
| Property | Acceptable Values | What it changes |
| Color | a color value. Universally accepted ones are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. | This changes the text color. |
| font-size | A size value. For x pixels, x px. Other measures are points and percents. | This changes the size of the font. |
| font-family | font names, seperated by commas. If the first font is unavailable, it uses the second, third, and so on. | This changes the font the text appears in (like Times or Teletype) |
| font-style | Bold, Italic, Underline | This changes the style of the text. |
| font-weight | Bold, bolder, lighter | This changes the weight of the font. |
| line-height | A size value in points, pixels or percents. | This effects the height of a line. With this property, you can have effects like 1 1/2 spacing in your page. |
| text-align | Left, center, or right | This changes the justification of the text. |
| margin-right, margin-left, margin-top, and margin-bottom. | A size in pixels, points, or percents. | This changes the margin on the top, bottom, left, or right of a style sheet. |
There are two more features that could be added to our H2 example. These are extremely neat features of Style Sheets.
Lets say we want to make Emphasized text (<EM>) the same style
as H2. There are two ways that this could be written.
The slooooow way:
<STYLE TYPE="text/css">
<!--
H2{Color:red;Font-Size:50px}
EM{Color:red;Font-Size:50px}
-->
</STYLE>
Or the far preferable fast and easy to read way:
<STYLE TYPE="text/css">
<!--
H2, EM{Color:red;
Font-Size:50px}
-->
</STYLE>
The first example uses two almost identical statements. The second one combines them into one statement, and seperates the parameters onto two lines for clarity.
One feature that should be mentioned before we go on is that Style Sheets can only apply to a certain set of tags. For example, if we wanted H2 tags to be fuchsia, but emphasized H2 tags to be red, we could use this style sheet:
<STYLE TYPE="text/css">
<!--
H2 {Color:fuchsia}
H2 EM{Color:red;
Font-Size:50px}
-->
</STYLE>
With this style sheet in place, this HTML document is much more colorful:
<BODY>
<CENTER><H2>Hello World</H2></CENTER><P>
<H2>World, you really <EM>ARE</EM> super-phat.</H2>
</BODY>
Without the style sheet in place, this is what that document looks like:
Hello World
World, you really ARE super-phat.
After the style sheet is added to the <HEAD> section, it looks like this:
Hello World
World, you really ARE super-phat.
The red only applies to the ARE part, but the fuchsia (isn't that a great word--almost as good as disestablishmentarianist) applies to all other parts of the H2 section.
Part deux.....
In most cases, you won't want to apply a style to an entire format for the entire document. However, this is where Style Sheets begin to show their worth.
Style Sheets don't have to be applied to an entire style. They can be assigned a name, and applied to only a certain part of a document. In this example, 1 1/2 spaced Times 12 is assigned to a style named cool:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.cool{font-family:Times,Times New Roman;
font-size: 12;
line-height: 18}
-->
</STYLE>
</HEAD>
From now on, you can add a CLASS=cool parameter to your tags, and that section will be formatted accordingly. As in the previous section, you can assign these to specific tags. For example, if we changed the .cool to H3.cool, then the style would only effect H3 tags with a CLASS=cool parameter.
If that was a tad hard to digest, then here's an example.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.style1{font-family:Times,Times New Roman}
H3.style2{Color:red}
-->
</STYLE>
</HEAD>
<BODY>
<P CLASS=style1>Hello. This is Style number 1!</P><BR>
<H3 CLASS=style2>Hello. This is Style number 2!
<P CLASS=style2>Hello. This isn't Style number 2</P>
</BODY>
</HTML>
This would give this result:
Hello. This is Style number 1!
Hello. This is Style number 2!
Hello. This isn't Style number 2
The ability to add a STYLE attribute to almost any tag brings sudden value to obscure HTML tags, like DIV and SPAN.
The difference between DIV and SPAN is simple. At the start of a DIV tag, the web browser adds a break (like a BR tag), whereas it does not do this with SPAN tags. Using these tags, you can assign a style to any section of your document.
Now, for the really cool application of style sheets: moving text around with pixel precision.
Using the Margin-Top part of a style, you can move text up and down. To move it up, use a negative value . To move it down, use a positive value. The same applies to Margin-Left. By doing this, you can create effects like shadows without using a single image, thus saving time for users.
Here's an example of that effect:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.backtext {font-size:45px}
.foretext {color: red;
margin-top: -50px
font-size: 22px}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Background</H1>
<SPAN CLASS=foretext>Foreground Text</SPAN>
</BODY>
</HTML>
This is what that example displays:
This is the first thing that we've done so far that cannot be done with ordinary HTML. Using this method, you can easily create effects like shadows. The tough part is finding the perfect margin-top value.
And now, for the grand finale: Text w/ a shadow.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<--
.shadow {font-size: 72px;
Color: black;
margin-left: 6}
.castshad {font-size: 72px;
Color: red;
margin-top: -80}
-->
</STYLE>
</HEAD>
<BODY>
<DIV CLASS=shadow>Shadows Rule</DIV>
<DIV CLASS=castshad>Shadows Rule</DIV>
</BODY>
</HTML>