Chapter 5: Advanced Text FX
Previous Chapter 4:	Home	Next Chapter 6:

This page is under construction.
The information contained on this page may be incorrect or confusing, or may be incomplete (cuts off in the middle of the page, missing pictures or formatting, etc.). Please check for an updated version later.

In Chapter 3, you applied basic text effects to Web pages. But what if you want more advanced text effects, like changing the font and color? In that case, you would use a stylesheet.

In earlier specifications of HTML, various tags were used to apply text effects. However, applying the same effects to different parts of the document was tedious and slow. The stylesheet was invented to solve this problem.

The advantages of using a stylesheet are many:

Built-in styles (such as the <h1> - <h6> tags) may be modified.
Changing the styles is much easier.
Stylesheets make the page easier for mobile devices (cell phones, PDAs, etc.) to display.

The cascading stylesheet (CSS), usually simply called a stylesheet, is a group of formatting rules in the head section of an HTML document. Somewhere in the head are the tags:


<style type=text/css>

<!-- Type Stylesheet rules here -->

</style>

Note that the middle line of text (surrounded by ) is a comment that will be ignored by the browser. These may be used anywhere in an HTML document.

Using Edit

Before Windows, and before Windows Notepad, the MS-DOS Editor (Edit) program was used to write and edit text documents. Edit is part of the MS-DOS text-based operating system. To open DOS on Windows 95 or 98, select Start > Programs > MS-DOS Prompt. On Windows 2000/XP, select Start > All Programs > Accessories > Command Prompt. Here, you will see

C:\>

where you may type a command. Type edit and press Enter. The Edit screen appears.

Figure 5.1: MS-DOS editor.

Edit can edit any plain-text document, just like Notepad. However, there is a small status bar that shows the line and column numbers at the bottom of the screen, which can be useful in tracking down errors. Edit is used throughout this chapter to create the examples.

Exercise 5.01: Add a Stylesheet to the template.txt File

Run Edit.
Open the template.txt file (File > Open). To navigate to the A: (or any other drive), select [-A-] from the Directories list box.
Under the meta line, add the text:
<style type="text/css"> </style>
Save the file.

Stylesheet Tag Rules

A typical stylesheet rule specifies text formatting, which can then be applied to text by use of the class and id attributes. You can also specify rules that modify the effect that a certain tag applies to text. For example, you can use a stylesheet to modify the <h1> tag to display red text. A rule can also apply to the entire document.

A typical stylesheet rule uses this syntax:

tagname { attribute1:value1; attribute2:value2; }

Let's take a look at this more closely. The tagname shown above is simply a unique name for the rule, or, if you are modifying an existing tag, the name of the tag you're modifying. The properties of the text take the form of keywords (shown as attributes above). The property is followed by a colon and its new value. Each attribute/value pair is terminated by semicolons (;).

NOTE
The semicolon can be omitted from the last attribute if you wish.

To change the <h2> tag so that it displays green text, for example, use this rule:

h2 { color:green }

You can even add rules that apply to the entire page. To do this, modify the <body> tag. For example:

body { color:red; background-color:yellow }

This changes all the text to red, and changes the background color of the page to yellow.

Exercise 5.02: First Stylesheet

Run Edit. Open the template.txt file.
Set the page title to "[Your Name]'s First Stylesheet"
Add these stylesheet rules:
h1 { color:yellow } body { color:white; background-color:blue }
Add the text "Stylesheets in HTML 4.01" to the body and format it as Heading 1.
Add this text to the body (applying bold formatting with the appropriate tag):
More advanced effects can be applied to text by using a Cascading Stylesheet (CSS). A CSS also helps mobile devices apply formatting correctly.
Save the file as firstcss.html.

Figure 5.2: Using stylesheets

Colors

You can use any color of the spectrum with a CSS, but only 16 colors may be referenced by their official name:

Figure 5.3: The 16 HTML colors

Using The Hexadecimal (Hex) Number System

Of course, there are more than 16 colors in existence. What if you wanted to specify a dark red color that was between maroon and red, for example?

In other parts of the computer you might specify a red/green/blue (RGB) value, such as 196/6/6. However, this can get unwieldy, especially with the measurement for a bright color such as white (255/255/255). But the RGB values require 3 numbers, and HTML must concisely represent a color by one number. This is why RGB values are not supported with HTML.

So the hexadecimal (hex) number system can help. Instead of being base-10 like the typical decimal system, the hex system is base-16. Therefore, you can represent numbers up to 16 with a single digit. Numbers 1-9 are the same as the ordinary decimal number. 10 is represented by A, 11 by B, and so on, with 15 being represented by F.

In ordinary decimal numbers, the number farthest to the right (immediately to the left of the decimal point) is the ones place, then next to the left is the tens, then the hundreds, and so on. In base-sixteen numbers, the ones place is the same as always, but the next place is, rather than tens, sixteens, and the next place is two-fifty-sixes. (Each place's value can be determined by multiplying the previous place's value by 16 (the base value in hexadecimal).

This table shows how counting in Hex works, starting at 10 (fifteen) and working up toward 20 (thirty-two). Under the line are some more examples of hex codes.

Dec	Hex	Two-Fifty-Sixes	Sixteens	Ones
16	10	0	1	0
17	11	0	1	1
18	12	0	1	2
19	13	0	1	3
20	14	0	1	4
21	15	0	1	5
22	16	0	1	6
23	17	0	1	7
24	18	0	1	8
25	19	0	1	9
26	1A	0	1	10
27	1B	0	1	11
28	1C	0	1	12
29	1D	0	1	13
30	1E	0	1	14
31	1F	0	1	15
32	20	0	2	0

256	100	1	0	0
1776	6F0	6	15	0
2005	7D5	7	13	5
Dec=decimal number, Hex = hexadecimal number. All numbers except those in the Hex column use the Decimal (base 10) system.

Hex Triplets

Using the hex number system, colors may be represented by a hex triplet. To convert a RGB number to a hex triplet: Grab a piece of paper and write down a "#". This tells the computer that we are using hex values.

The easiest way of converting the numbers is with your system's Calculator. Here we will use Windows Calculator, but any other calculator that supports hexes can be used.^* Make sure the calculator is in scientific mode (View > Scientific).

Type in the decimal (normal) red value.
Press F5 or click the Hex option button.
The decimal number on the screen is converted to Hex and displayed on the screen.
Write down the hex number right next to the previous value written down (for the first time, it's the hash mark). Press F6 or click the Dec option button to return to decimal mode.
Repeat steps 1-4 for each the green and blue values.
Now concatenate the values, and you have a hex triplet.

Now, instead of 255/255/255, white is represented by #FFFFFF. 196/6/6 is #C40606. This is a much easier and better way of representing colors.

*=CAUTION FOR LINUX/UNIX USERS
The calculator supplied with KDE, KCalc, does not support hexadecimals. If possible, use the GNOME calculator (try entering gnome-calculator at a prompt to see if you have it).

NOTE FOR gnome-calculator USERS
Click the = button after entering the decimal number; before clicking the Hex button.

It's okay if you can't wrap your brain around the hex concept; it goes against everything taught to us since we were in first grade. And if you can comprehend the base-16 concept, it's easy to go nuts with it, as seen on the Hex Headquarters website listed in the bibliography.

Using the Class and Id Attributes

While effects can be applied easily by modifying tags, the Class and Id attributes help you apply formatting to regular text. They both work similarly, but Id rules may only be used once in the page, while class rules may be used over and over.

NOTE
"ID" stands for Identity, not Identification.

To define a new rule, come up with a unique name for it and type it in the stylesheet. Precede it with a # (hash) if you intend to use it with the ID attribute, or use a . (period) if you are going to use the class attribute.

For example, you want to create a rule that will turn the text blue. This rule will be named "bluetext" and will be used multiple times in the document, so we want it to use the class attribute. Here's what you'd write:

.bluetext { color:blue }

Now, scroll to the paragraph where you want the rule applied. Hopefully you have been correctly structuring your pages into paragraphs as instructed in Chapter 3. Now, give the <p> tag a class attribute, and make it equal the name of the rule you want to apply. (If you declared the rule with a hash mark, use an id attribute.) In this case, we'd use <p class=bluetext>.