HTMinimaLism Style: Part 2
- CSS Font Control
- Color Schemes
- An Inflatable Alphabet
- Table-Formed Fonts
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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).
){kind=link}
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.