Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

HTMinimaLism Style: Part 2

  • Print
  • + Share This
  • 💬 Discuss
From the author of
In part 2 of his discussion on HTMinimaLism, Curt Cloninger introduces Cascading Style Sheets, the designer's secret weapon in producing good-looking HTML text without gaudy gimmicks.
This article is derived from the book Fresh Styles for Web Designers: Eye Candy from the Underground (New Riders, 2001), by Curt Cloninger.

The HTMinimaList designer eschews Flash and gaudy DHTML gimmicks. So what's left? First and foremost, HTMinimaLists focus on making HTML text look good. And the trick to good-looking HTML text is a decent understanding of fontography and color, coupled with your secret weapon: Cascading Style Sheets!

CSS Font Control

Here is some good, safe, basic, cross-browser CSS code that will make your HTML text look better. There are as many ways to structure your style sheets as there are people with opinions. These are just my default preferences.

First, create a plain text document using the following text, and save it as styles.css:

b {font-weight: bold}

.large {font: 18px georgia, times, times new roman, serif}
.large A {text-decoration: none}
.large A:hover {text-decoration: underline}

.medium {font: 12px/18px verdana, geneva, helvetica, sans-serif}
.medium A {text-decoration: none}
.medium A:hover {text-decoration: underline}

.small {font: 9px/12px verdana, geneva, sans-serif}
.small A {text-decoration: none}
.small A:hover {text-decoration: underline}

Now create this HTML document:

<html>
<head>
<title>CSS font default example</title>
<LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css">
</head>
<body>

<span class=large>
This Is 18px Georgia For Headers
</span>

<p>

<span class=medium>
This is the 12px Verdana for your main body text.<br>
And here's a line break to show the leading.<br>
And here's <a href="nowhere.html">a link</a>.
</span>

<p>

<span class=small>
This is the 9px Verdana for wee information.<br>
Again, a line break to show the leading.
</span>

</body>
</html>

Store both documents in the same directory, and your HTML page should look something like Figure 1).

Figure 1 CSS font examples.

Let's take a cursory look at how all this works. In the CSS document, 12px/18px sets the font size to 12 pixels and the line leading to 18 pixels.

The A and A:hover lines tell the browser, "Don't underline links until they are moused over" (A:hover is woefully unsupported in Netscape 4).

The fonts are listed in order of preference. If none of the specified fonts is available on the user's machine, the browser will substitute its own default fonts.

In the HTML document, the <LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css"> line must be present, or the styles will not be applied. The <span> tag is just a generic division tag that can be applied to any text. When your CSS class attribute is added, <span> modifies the text, which it surrounds accordingly.

Be warned that surrounding a table with <span> tags will not change the text within the table's data cells. To do that, you either have to:

  • Put the modified <span> tags at the beginning and end of every block of text that you want to modify, data cell by data cell (a pain).

  • Specify <td class="yourclass"> for the data cells that contain the text that you want to modify (a bit more elegant).

  • Define the <td> tag in your CSS document, like so:

    td {font: 12px/18px verdana, geneva, helvetica, sans-serif}
    td A {text-decoration: none}
    td A:hover {text-decoration: underline}

After you define <td> in your CSS document, all text contained within all table data cells will be modified accordingly (without you having to add class="myclass" to anything).

For a more thorough study of CSS font control, check out Zeldman's "Fear of Style Sheets" series.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus