Electric Type

Multimedia

About Us

News

Help

Text Size Control with CSS

Page 2 — More Choice Through Stylesheets

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»


Dynamic HTML  

Frames  

HTML Basics  

Stylesheets  

Tables  

XML  

Javascript  

Database Connections  

Intro To Perl  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.