Style Sheets

We promised that this issue would focus on Style Sheets, so here goes.

First of all, we're not going to explore the coding of Style Sheets. Anyone who wants to know about this is welcome to email us and we'll forward some excellent online references about Style Sheets. The rest of you can relax and enjoy the ride without the technospeak.

Quite simply, Style Sheets allow the developer to specify a text format globally. It is most commonly used to specify fonts, although it can do much more (we'll leave the more for another time). We can, for example, specify that the text in the body of the site be 12pt Arial. If we later decide that the font should be 10pt Times Roman, we can change it in one place (the Style Sheet) and it will immediately change throughout the site. In addition to changing the size and typeface, we can change the weight (regular, bold), the style (normal, italic), the color, the background color, and we can add what is called "decoration," which means underline, overline, or line-through.

We can specify multiple styles, so in addition to the body style we can also specify various head styles, caption styles, and menu text styles. We can assign a style to a page, a paragraph, a word, or a letter. We can also assign different styles for the same text under different conditions -- for example we can specify that the body style is 12pt Arial black for regular text but 12pt Arial blue for links, and 12pt Arial red with yellow background for links when moused-over.

Style Sheets are more properly called Cascading Style Sheets. As the name implies, each style affects the text within its boundaries, but not outside those boundaries. This permits the developer to specify a style for an entire web page, and then specify exceptions within the page, and even exceptions to the exceptions. So if we wanted to make all our links have a specific style, but we wanted one link to look different, we'd specify the link style for the page and then we'd specify a local style for that one different link.

One neat feature of stylesheets is that, with the proper coding, they can be changed by the user. For example, if you have a website that you think will be used by people with vision problems, you can give them the option of enlarging the font size. You can do this for a single page or for the entire website. And because it is a browser function, changing the font size doesn't require reloading the page.

Style Sheets is an HTML function, so it can also be used in HTML email such as this. We have set up a little Style Sheet example at the end of this email. Of course, this assumes that the user's email software can handle HTML and Style Sheets, and that both are enabled. This is a good assumption for almost all current browsers, but many email programs still cannot handle it, either for simplicity or for security reasons. Therefore, we have set up a web page on our website to show these and other Style Sheet effects. Even if your email software shows the CSS effects, please go to the web page to see some additional functions that Style Sheets can do.

Example

The default font size for this email is 12pt [Note: For this web version, we have changed the default to 10pt.]. We've had a few comments from readers suggesting we use a different size, so just below this paragraph you will see three links marked "10 pt," "12 pt," and "14 pt." Clicking on these links will change the font size of the text in this email message, except for the top and bottom paragraphs.

10 pt
12 pt
14 pt