Our first problem is that we need more control. We've got seven text sizes at our disposal with HTML,
but that just isn't enough:
This is FONT SIZE=1
This is FONT SIZE=2
This is FONT SIZE=3
This is FONT SIZE=4
This is FONT SIZE=5
This is FONT SIZE=6
This is SIZE=7
The solution? Cascading Stylesheets (CSS). Using CSS, we can have an unlimited number
of different text sizes at our disposal. Take a look below (you'll need Netscape Communicator 4 or higher
or Internet Explorer 3 or higher to see this example):
This is font-size: 7pt
This is font-size: 8pt
This is font-size: 9pt
This is FONT SIZE=1
This is font-size: 10pt
This is FONT SIZE=2
This is font-size: 11pt
This is font-size: 12pt
This is FONT SIZE=3
This is font-size: 13pt
This is font-size: 14pt
This is font-size: 15pt
This is FONT SIZE=4
This is font-size: 16pt
This is font-size: 17pt
This is font-size: 18pt
This is FONT SIZE=5
This is font-size: 19pt
This is font-size: 20pt
This is font-size: 21pt
This is font-size: 22pt
This is font-size: 23pt
This is font-size: 24pt
This is FONT SIZE=6
This is font-size: 25pt
This is font-size: 26pt
OK, you get the idea. There's simply a whole lot more choice, and no maximum size. You can make the text as
big
as you want.
Sound good? Good.
Learning stylesheets isn't difficult. In fact, if you want a complete tour, check out
my previous CSS tutorial.
If you want the 30-second version, keep reading.
Stylesheet code is plain text, just like HTML. It was designed as a better method for controlling
Web page design and enabling easier site maintenance. Text size is just one of the
many things you can control by using stylesheets.
To get started, create a new document and paste the following line into it (and nothing else):
.test { font-size: 16pt }
This code creates our example stylesheet. It creates a stylesheet class named "test" as having a
text size of 16pt.
Save the file as a plain text file (just like you would an HTML file) and name it mystyle.css (you can name
your own CSS files anything you'd like, but remember the .css suffix).
Next, create a normal HTML document, but add the following line within the <HEAD> tag:
<LINK REL=stylesheet HREF="mystyle.css" TYPE="text/css">
This code links the HTML document to the CSS file we just created.
Next, we need to apply the stylesheet to some content within the <BODY> of the HTML page, like so:
<P CLASS="test">Behold the power of cheese.</P>
When this page is displayed in a Web browser, here's what you see:
Behold the power of cheese.
Basically, whenever I use CLASS="test" on an HTML tag, the text within that tag
gets the size that's declared in the
stylesheet. I can use CLASS="test" within the page as many times as I want, and I can
create as many classes as I need.
Keep in mind that this is just a basic introduction. There are several
other ways to use stylesheets in a page, and you can get more information
in the CSS tutorial.
You should also be aware that stylesheets don't work in all Web browsers. Only people using Netscape Communicator 4 or higher
and Internet Explorer 3 or higher will recognize stylesheet code. The good news is that older
browsers will simply ignore the extra CSS code and display the text normally.
If you want to use stylesheets to control text size, make sure to also use the traditional
FONT SIZE=X stuff. This way, older browsers will still display the text in a size at
least somewhat close to what you had in mind. Meanwhile, newer browsers will treat the stylesheet
rule as more important than the FONT SIZE tag.
By now you're probably wondering what the pt in the examples is all about. It stands for
points, and it's one of the units of measurement you can use to declare text size. There are also other units you
can use instead, each with their own advantages and disadvantages. Here's the list:
- pt is points. Point size is a unit familiar to print
designers, referring to an imaginary "box" that extends from the bottom of a
descender (like the vertical line in a "p") to the top of an ascender (like the line in a "d").
- px is pixels. This one should be familiar.
- em is em, which is a unit of distance equal to the point size of a font
(note: IE 3 does not support em). Take a look at Page 5 for details about this one.
- ex is x-height. This unit refers to height of the lowercase letters, not including
descenders or ascenders.
It's best to avoid ex, because right now no Web browser completely supports it.
- in is inches.
- cm is centimeters.
- mm is millimeters.
- pc is picas. 1 pica equals 12 points.
So, which unit is best to use? Good question. I recommend using only ems or pixels. To find out
why and when to use which one, we need to move on to our second problem with text size: platform inconsistencies.
next page»