Back to Learning Center
General Web Info
Simple Style Sheets

- by Chris Jones

Creating Simple Style Sheets

Style sheets are an important component to the future of web design. Already, they have been a viable layout and design tool since the inception of Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0, both of which contained limited (and flawed) support for the Cascading Style Sheet 1.0 standard as set out by the World Wide Web Consortium . Style sheets, when designed (and implemented) properly give you total control over the presentation of text elements on a web page, allowing you almost as much flexibility as designing pages for a print magazine.

This article introduces you to the basics of creating and using style sheets for your web pages, as well as issues of cross-browser compatibility and the future of style sheets on the web. It also assumes that you have a decent working knowledge of basic HTML.

The Basics

Style sheets are nothing more than a list of formatting commands that allow you to control the appearance of your web page above and beyond simple HTML commands such as the <FONT> tag. The concept of style sheets isn't new--in fact, they've been around as long as word processors and page layout software. Each element on a page, from individual characters all the way up to entire pages can have individualistic formatting applied to it based on the information contained within the style sheet.

On the web, there are many formatting restrictions in place due to the fact that there are many different types of web browser, and each one only has limited style sheet support. Style sheets as they are used on the web are called Cascading Style Sheets (CSS), the most recent version which has been approved by the W3C being 2.1. However, as of this writing, no existing browser has 100% version 1.0 support muchless 2.1, so for the purposes of this article I'll focus strictly on CSS version 1.0--don't worry about it becoming obsolete because version 2.1 is entirely backward compatible with version 1.0.

The easiest kind of style sheet you can create is called an 'embedded style sheet'. It is located directly within the HTML document you intend to use it on and is written, within the structure of the web page, as follows:

<HTML>
<HEAD>
<TITLE>Style Sheets Demo</TITLE>
<STYLE type="text/css" media="screen">
<!-- hide from legacy browsers
P {color: red;
     font: Arial, Helvetica, sans-serif}
A {color: blue;
     font: Comic Sans MS, sans-serif}
-->
</STYLE>
</HEAD>
<BODY>.....

Now that you know what the style sheet looks like, let me dissect it for you and explain each component of it.

<STYLE type="text/css" media="screen">....</STYLE>
The tag containing the style sheet information is called, not so strangely, the <STYLE> tag. Like the majority of HTML tags, it requires that it be 'closed' for it to function properly (that is, it must end, ultimately, with the </STYLE> tag). This particular tag must also appear between the <HEAD> tags for it to be properly parsed by the majority of the web browsers out there. Within the opening tag statement, you must include two attributes: type and media. The type attribute lets the browser know what the style sheet formatting is applied to (in the case of current web bro wsers, the only applicable type is "text/css"), while the media attribute informs the web browser that the display medium is either a monitor ("screen") or the printed page ("print"); however, the only value that means anything with the current crop of browsers is 'screen'.

Let me just add that you do not need the two <STYLE> attributes for you style sheet to work...in all browsers. Microsoft Internet Explorer is particularly lax when it comes to parsing style sheets and will forgive the absence of them. Netscape Navigator is picky to the point of absurdity (depending on which build in the 4.x series you are using) and requires both attributes to function properly. Let me also add this--always practice good coding. If the W3C recommendation states that these attributes are necessary, then add them. The only way to encourage the Big Two (Microsoft and Netscape) to get their acts together regarding CSS implementation is for us, the web designers, to insist on it. I'll talk more in a future article about the Browser Wars and what the future holds (but in the meantime, you can download the Opera Browser, version, which of all the web browsers I've seen has just about the best support for CSS 1.0--okay, so sue me, I'm biased).

<!-- .... -->
Next, is the obligatory comment line. This opens on the line immediately below the <STYLE> tag line, and closes immediately above the </STYLE> tag line. This comment is not really all that necessary, but it is good code practice; the reason it's there is to keep the style sheet data from displaying on the web page when viewed by legacy browsers (namely 3.0, 2.0 and 1.0 series of the Big Two). Legacy browsers automatically ignore tags that are unfamiliar to them, but because the content between the <STYLE> tags is pure text and not immediately bracketed by tags, the legacy browsers have a tendency to display it. The comment tags before and after the content ensure that it is ignored by those browsers. Oh, and don't forget to close your comment block otherwise your entire page won't display.

P {color: red; font: Arial, Helvetica, sans-serif}
Finally we come to the heart of CSS--Defined elements. Each element is defined the following way: Element {attribute: value; attribute: value} where Element is the HTML tag you wish to assign a style too, and attribute: value is a pre-defined aspect of the style-sheet (set in the CSS specification) and it's appropriate value. Note that all attribute-value combinations must be bracketed with { }. Attributes are also delineated from their values by a colon [ : ] and attribute-value pairings are delineated from other pairings by a semi-colon [ ; ]. Also note that the final attribute-value pairing is not followed by a semi-colon since no other pairings within that specific bracket follow it.

Here are some sample attributes and their appropriate values for defining the style of a particular element:

Attribute Accepted values Notes
font-size xx-large, x-large, large, small, x-smll, xx-small, Npx, Npc, Npt, Nmm, Ncm, Nin

N a numerical value and px = Pixels, pc = Picas, pt = Points, mm = Millimeters, cm =Centimeters, in = Inches.

The following values are absolute and will be displayed exactly the same size regardless of viewing device: Picas, Points, Millimeters, Centimeters and Inches. The others are displayed relative to viewing device and font proportions.

font-family cursive, fantasy, mono-space, sans-serif, serif, Font group name

The font style descriptors (cursive, fantasy etc. et al) tell the browser to choose the default font that matches the descriptor type--keep in mind that not everyone has the same font defaults as you do).

Selecting a specific Font name is good only if you can be sure that the audience viewing your website has the required fonts installed. For example, all Windows users have the Arial font family on their systems by default, so if your target audience is Windows users then you can safely set Arial as your font-family.

When parsing a style sheet, if the browser doesn't detect the specified font, then it will automatically move on to the next one in the list (each font separated from the others by commas, as in the above example), and so on. If none of the listed fonts are found, then the browser default is used instead.
color color name, hexadecimal color code Only use color names that are recognized by web browsers as specified by the W3C. It's good practice, though, to use the hexadecimal values by default.
font-weight normal, bold Acts like the <b>...</b> or <em>...</em> tags, but for style sheets.
font-style normal, italic Acts like the <i>...</i> tag, but for style sheets.
font Font name More specific than font-family. Requires the name of an individual font, not a group of them. As with font-family, if the web browser can't find the first font it will move on to the next font in the list and so on. If none of the listed fonts are found, then the browser default is used instead.

The above listed attributes and their values are only a small portion of the total number available, but they should be enough to get started on formatting your web pages without having to use cumbersome <FONT> tags. Once you define a style for an element, every instance of that element on your web page will take the formatting assigned to it.

In the next article, I'll show you how to take this simple style sheet and use it to control even more elements of your web site, as well as how to define custom elements.