Best Practices Web Design

Looking for the lessons? Get started!

The three different kinds of stylesheets, and more.

The entire Web Design Principles section can be accessed through the menu below.

Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

Placeholder for pithy quote.

There are three ways to style your page with CSS:

• External — keeping it in a separate file;
• Internal — including it in the head of each page; and
• Inline — including individual style commands in the HTML itself.

There's one thing all three have in common: the same kinds of user mistakes. I've made them, others make them, and you will make them. Tizag.com gives us this reminder:

Until you become accustomed to using CSS code, you will probably find your CSS code not working as you expected. A leading cause of this might be an out of place :, ;, {, or } or it might be that you forgot to use a :, ;, {, or } when it was required.

Remember, computers are stupid. They have no more intelligence than the tables they sit on. They don't know when you meant to include a code snippet like a ; or a }, and they won't fix it for you.

Anyway, back to it. But first, a short detour.

The Three Types of Stylesheets

You can designate a stylesheet as one of three types:

• persistent (the default)
• preferred, and
• alternate

Unlike some lists of types, this is definitely hierarchical: in other words, the persistent stylesheet has more status, more "juice", than the other two, and the preferred stylesheet is higher in the pecking order than the last, the alternate type of stylesheet.

Unless you designate a stylesheet a particular type, it will be considered as persistent, the default. For simple Web sites that have a single stylesheet, or no more than a main stylesheet and a print stylesheet, there's no need to worry about this. As long as you put the command for the main stylesheet before the print stylesheet, this entire concept of "stylesheet types" won't come into play, and you'll be good to go.

However, as your sites grow in size and complexity, you will eventually need to know this. Philip Shaw of provides some excellent explanations and examples, as do the articles I've cited below.

Persistent

As CSS guru Eric Meyer reminds us, , you can have as many persistent stylesheets as you want. If you don't designate a stylesheet as anything in particular, it will default to being considered "persistent". That's usually what you want.

Web developer Paul Sowden notes:

These style sheets are always enabled (they are always "on") and are combined with the active style sheet. They can be used for shared rules common to every style sheet. To make a style sheet persistent, the rel attribute is set to "stylesheet" and no title attribute is set.

And Meyer writes:

A persistent stylesheet is one which has no title attribute and a value of "stylesheet" supplied for the rel attribute. A document may refer to one or more persistent stylesheets, all of which are used in the presentation of the document.

Pretty straightforward. Meyer again: "Authors should make sure that any stylesheet which should always be applied is persistent instead of preferred."

Wait! Stylesheets can have titles? Keep reading.

Preferred

The second type, with less mojo than the persistent stylesheet, is the preferred stylesheet. Like the persistent stylesheet, the preferred stylesheet also has a value of "stylesheet" supplied for the rel attribute. But, it has a title attribute with whatever value you want it to contain. That title attribute changes the state of the stylesheet from persistent to preferred.

Meyer writes: "To make a style sheet preferred, set the rel attribute to stylesheet and name the style sheet with the title attribute."

Sowden writes:

These style sheets are enabled by default (they are "on" when the page is loaded). They can then be disabled if the user selects an alternate style sheet. To make a style sheet preferred, the rel attribute is set to "stylesheet" and the style sheet is named with the title attribute.

So far so good. Now try this on for size:

You may only have one style designated as preferred — but you can have more than one stylesheet.

Say what?

Let's figure this one out, using the guidance of the knowledgeable folks of the Web Design Group. They give an example of three stylesheets grouped together by a single style:

<link rel="stylesheet" type="text/css" href="basics.css" title="contemporary">
<link rel="stylesheet" type="text/css" href="tables.css" title="contemporary">
<link rel="stylesheet" type="text/css" href="forms.css" title="contemporary">

Notice that all three stylesheets have the same title value of "contemporary". The WDG writes: "To combine multiple style sheets into a single style, one must use the same TITLE with each style sheet." Easy enough.

While many designers write single stylesheets that incorporate a lot of styling, and as a result are relatively large, some break their stylesheets into discrete parts and link them into their pages. Both methods are valid, and have their defenders and detractors. You should remember, though, that a persistent stylesheet will override a preferred stylesheet; you can't have both operating in your pages.

Alternate Stylesheets

Let's let Meyer explain this one. This is his turf, after all.

In a document that refers to alternate stylesheets, the preferred stylesheet will be used so long as none of the alternate stylesheets are selected by the user. Thus, when the document is loaded, the browser will use all of the persistent stylesheets and one preferred stylesheet (but remember, there should only be one preferred stylesheet). Once the user selects one of the alternate stylesheets, the preferred stylesheet will no longer be used, although the user can always re-select the preferred stylesheet.

Make sense? No?

Basically, alternate stylesheets are used when the designer wants to give visitors a choice of styles to apply to the site as it displays in their browser, whether it be for decorative purposes or to assist in accessibility. My friend, code wizard Eric Watson, gives users the choice of a gray/green or light gray/pink color scheme on his design site — to see it in action, scroll all the way down, look for the two "male" and "female" icons, and click the "female" icon (the "male" is set as the default). Some designers see it as a terrific capability for their site users, others see it as an unnecessary frill. You decide.

To create an alternate stylesheet, replace the rel="stylesheet" with rel="alternate stylesheet":

<link rel="alternate stylesheet" type="text/css" href="second.css" title="alternate">

Many browsers allow the user to switch stylesheets through the View menu (i.e. Firefox's "View Page Style" command). But, some browsers (notably IE6 and 7, as well as older versions of Safari) won't give users the capability of easily switching styles, nor will any browser activate the alternate stylesheet unless told to do so by the user. When designers use alternate stylesheets, they most often use a JavaScript control to make the magic happen.

The seminal "alternate stylesheet" article is from 2001, written by Paul Sowden for A List Apart. From my (admittedly not comprehensive) experience, most of the alternate styling techniques stem from this article. Web designer Christopher Heng gives a more updated method. Both Sowden and Heng use JavaScript to trigger the stylesheet switch.

External Stylesheets

External stylesheets are considered the best way to handle your CSS. There's a very simple reason for this: when you're managing a site of, say, 100 pages, all controlled by a single stylesheet, and you want to change your link colors from blue to green, it's a lot easier to make the change in your CSS file and let the changes "cascade" throughout all 100 pages than it is to go into 100 separate pages and make the same change 100 times. External stylesheets also reduce the amount of Web page code, which makes it easier for Google and other search engines to find your page's content and give your page a higher ranking. And, since browsers cache the external stylesheet, your pages load faster. Unless your site has a fundamentally different set of styles on its different pages, you should opt for the external stylesheet. This is definitely best practice.

Add an external stylesheet by using the link HTML attribute. This is the command I use in these pages:

<link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="screen">

This tells the browser to look in the css folder to find the stylesheet.css file, and apply it to the page.

Just so you know:

• rel means "relationship," and tells the browser that this string of code indicates a stylesheet.
• href means hypertext reference, and tells your browser where to find the stylesheet. In this example, the stylesheet is in the /css directory.
• media is an optional tag that lets you decide what "view" the stylesheet applies to: the screen, print, or others. This is discussed in more depth later in this page.

Internal Stylesheets

Internal stylesheets (sometimes called embedded or in-document stylesheets) are not, technically, "stylesheets," but "inline style blocks." Either way, they go in the head of the individual HTML page and control only that one page. We used that as the way to code your first page in these lessons, for the simple reason that it was easier to go back and forth within the same page to make changes than go back and forth between separate files. Internal stylings override styles from external stylesheets.

You can add an inline style block to the head of your HTML page like so:

<style type="text/css">

... add style attributes and so forth here ...

</style>

Roger Johannson explicitly recommends not using internal style blocks:

This should also be avoided, since it is best to keep HTML and CSS in separate files.

I'm not as strict about insisting on not using internal style blocks as Roger, but then again, I'm not the expert he is.

Use of CDATA in Internal Stylesheets

Sometimes you will see the CDATA character string used in the HTML code for an internal stylesheet, as such:

<style type="text/css">
   /* <![CDATA[ */

... add style attributes and so forth here ...

   /* ]]> /*
</style>

While this may be useful in XHTML documents, HTML parsers do not recognize the CDATA elements, and therefore shouldn't be used in your HTML documents. (In fact, you'll notice that the CDATA code strings are commented out with the /* */ CSS comment codes, so that HTML documents won't "see" them.)

My friend Tommy Olsson explains:

A CDATA-section is normally used for content that contains a lot of 'special' characters (like '>' and '&') that normally need to be escaped. Most browsers only support CDATA-sections for XML documents (including XHTML served as real XHTML, but not pretend-XHTML served as HTML). As far as I know, Opera is the only browser that supports CDATA-sections in HTML.

In the same forum thread, fellow Web expert Stephen Chapman notes:

That CDATA tag is commented out so that the XHTML validator sees it but the web browsers do not. ... If you are using an HTML doctype rather than trying to pretend that your page is XHTML then just remove the entire comments. If you are using real XHTML then remove the /* and */ from around each and leave the CDATA tag in place ....

Unless you decide to begin coding in XHTML, don't bother with it.

Inline Styling

Inline styling formats individual blocks of HTML. I've almost never used this, and I doubt you will very often either, though admittedly there are certain situations where you would use inline styling. (Side note: I am actually using a good bit of inline styling in these pages, for one-time examples of various effects and capabilities.) Here's an example of inline styling for a paragraph:

<p style="color: blue; font-family: Arial;">

This codes that one single paragraph as displaying in blue and in the font Arial. Nothing else on the page is affected.

Inline styling overrides external and internal styles, so if you do use it, it will impose its styling on whatever else you've done with CSS for that text block.

Also notice that in inline styling, we only use quotation marks at the very beginning and the very end of the style elements. When the browser sees that second quotation mark, it interprets it as bringing the inline styling to a close.

<p style="color: "blue"; font-family: "Arial";"> wrong!

This will not work!

Note: Microsoft will tell you that programs such as Word and Publisher will "create" HTML pages formatted with CSS. They will — using thousands of lines of inline style commands, repeated over and over and over again. It's semantically disastrous, hard on the browser, creates conflicts within the page, and in general is just plain awful. And Microsoft isn't the only firm that creates these kinds of programs. Use word processors and desktop publishers to create the documents that they were designed to make, not Web pages.

Johannson also recommends against using inline styling:

This should be avoided since it mixes structure and presentation.

And Jean-Baptiste Jung says:

[T]he style attribute is bad practice, that goes completely against the CSS philosophy.

Same caveat as above: I'm not as strict about insisting on not using internal styling as those guys, but they are the experts, I am not.

And web developer Rob Glazebrook gives us two examples of when inline coding can be useful: in trying new styles in your unfinished documents, and to override specific instances of your global styling for one particular and unique instance. As I noted above, I've done the second a few times in these pages.

XHTML 1.1 deprecates inline styling. Just so you know; since we aren't coding in XHTML, it won't affect us.

Linking Multiple External Stylesheets

It's also possible to link multiple external stylesheets to a single page. In that case, the one lowest in the page will override earlier sheets.

Importing Stylesheets

Note: There's yet another way to link stylesheets to Web pages: the @import method. I've read through and taken part in a number of discussions about this technique on the SitePoint forums, and my conclusion is, although it's certainly legitimate, there's just no reason for you to use this method of linking your stylesheet over the regular method described above. Certainly a beginning designer won't bother with it. However, I'll show you how it's done, and you can do your own research.

<style type="text/css" media="all">
   @import "style.css";
   @import "advanced.css";
</style>

This example imports two separate stylesheets, style.css and advanced.css. Sometimes designers use the @import method to hide a particular stylesheet from older browsers (which don't recognize the @import command), and to manage large numbers of stylesheets in a single block of code — sometimes a useful technique for large corporate or academic sites, for example. The drawback is that using the @import can cause your page to display, briefly, in a completely unstyled appearance — the irritating FOUC, or "flash of unstyled content" phenomenon. Primarily this happens with Internet Explorer. There's a way around this; check the linked BlueRobot page for details. Or better yet, until you have a reason to do so, don't bother with the @import command.

Jean-Baptiste Jung writes:

While it works, the @import directive is much slower than the other way to include stylesheets into a html document ... It will not make a difference on low traffic websites, but if you have the chance to own a popular website, don't waste your visitor's time using @import.

Linking Your External Stylesheet to Your HTML Page

To link your external stylesheet to your page, include this in the head of your HTML page:

<link rel="stylesheet" type="text/css" href="css/mystyles.css" media="screen">

This assumes that you've created a css folder for your stylesheet, and you've named it mystyles.css.

The rel attribute stands for the file's relationship to the rest of the page, and the type shows that it's a text file acting as a CSS stylesheet.

Media Types

When you use an external stylesheet, you should tell the computer what kind of media devices that stylesheet will support. "Huh?" you may ask, "it supports the computer, duh ..." Well, there's more to it.

We're talking about the media attribute. It's an HTML attribute, but is associated with stylesheets.

The most common media device that is supported by a stylesheet is the desktop, laptop, or notebook computer. (So your "duh!" is somewhat validated!) In CSS-speak, that's called a "screen" device. Other devices are printers, mobile devices, projection screens, and a whole raft of assistive technologies. (The W3C site gives a complete list of the media types stylesheets support. And Ian Lloyd warns us that using some of the lesser-known media attributes in your site could prove troublesome.)

What does all of this mean in the real world?

For general purposes, you can get away with two separate stylesheet distinctions: screen and print. Like so:

<link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/printstyle.css" type="text/css" media="print">

That means you're going to need TWO stylesheets, one for screen displays (what you're probably using to view this site right now), and one for printing. Fortunately, the link below can help you with designing your print stylesheet. It's not as tough as you might think.

If you have a small site not particularly suitable for printing, or you're just that lazy, you can use the default setting of all:

<link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="all">

It's not considered best practice to just omit the media attribute entirely, though some people do. Some people also bungee-jump into asphalt parking lots.

Here's a list of the different kinds of media types, cribbed from a post by Chris Coyier. Remember, not all of these are well supported.

• all Used for all media type devices
• aural Used for speech and sound synthesizers
• braille Used for braille tactile feedback devices
• embossed Used for paged braille printers
• handheld Used for small or handheld devices
• print Used for printers
• projection Used for projected presentations, like slides
• screen Used for computer screens
• tty Used for media using a fixed-pitch character grid, like teletypes and terminals
• tv Used for television-type devices

Creating "Print" Stylesheets

People will, sooner or later, print your Web page for their own use. If you don't create a print stylesheet, the browser's default will determine what the page looks like, and it usually isn't pretty. Do your users the courtesy of giving them a proper print stylesheet. They dramatically increase the usability of your site.

While there are numerous ways to format a print stylesheet, I've used these pages as my primary sources for this walkthrough:

• A List Apart's "Going to Print"
• 7 Tips for Great Print Style Sheets
• A Default Print Stylesheet Template
• Webcredible's "Print stylesheet — the definitive guide"
• About.com's "CSS Media Types Create Print-Friendly Pages"
• Tech-Evangelist's "Formatting Printed Web Pages with CSS"

I am amazed at the number of major web sites whose pages cannot be printed properly because the content either doesn’t fit on the page, or is cluttered with ads and menus that have no useful purpose on a printed page. — Tech-Evangelist

Most modern websites don't look all that attractive when printed using the site's default CSS: overly-large widths, screen-friendly fonts, and creative color choices all work together to make most sites less than useful on the printed page. But with a print CSS file, you can alleviate those problems and present your users with a useable, useful print alternative to your digital masterpiece. — Rob Glazebrook

Of course, providing a proper print stylesheet is best practice for Web design.

Your print stylesheet works with your main stylesheet. You don't have to create an entirely new stylesheet, just make some changes to what you already have.

A good print stylesheet does the following:

• Change colors to black on white.
• Change the font to serif.
• Change the font size (if needed).
• Underline all links.
• Remove non-essential images.
• Remove navigation.
• Remove most or all of the advertising.
• Remove all JavaScript, Flash, and animated images.

Start by adding a second stylesheet declaration to your HTML page. Let's say your original stylesheet is named style.css. Now add print.css to the page.

There's a nifty little trick to constructing your print stylesheet. In your HTML page(s), use this string of code to link to your stylesheets.

<link rel="stylesheet" href="css/screen.css">
<link rel="stylesheet" href="css/print.css" media="print">

Notice that you've deliberately left off the media property of your code in the first CSS command. This causes your main stylesheet to be applied to both screen and print. The print stylesheet, therefore, only needs to contain elements that need to be changed from the main stylesheet.

However, if you want the print stylesheet to be the only stylesheet referred to when users print your site, add the media="screen" to your first CSS command:

<link rel="stylesheet" href="css/screen.css" media="screen">

This has the site use the print stylesheet, and only the print stylesheet, in referencing the pages for printing.

(Note that all the stylesheets are in their own css directory.)

Make sure your print stylesheet is second in line behind the main stylesheet!

More about media attributes.

The print.css sheet will be much simpler and shorter than the main stylesheet.

In the new stylesheet, you will set your entire site's width to 100%. This will be the first command on the new sheet.

html {
   width: 100%;
}

Now we're going to set some parameters on the body element. We'll style and size the fonts, set the font-family, and the color of the fonts as they print.

body {
   font: 1em Times, "Times New Roman", serif;
   color: #000; 
   font-size: 12pt;
}

Some sites recommend that you have your page print in a serif font suitable for printing, say Times (for Mac and Linux users) or Times New Roman (for everyone else). Other sites warn you that having your printed site appear in a font different from the display font may surprise users. Me, I recommend using the fonts above.

More information about fonts.

We're going to move from pixels to points to control the size of the printed text. Pixels are used for electronic displays, but don't work well for printed output. Conversely, points don't work well for electronic displays, but work nicely for handling print sizing.

Set the body, container, and content wrappers (or whatever the corresponding elements are on your page) widths to 100%. This ensures that the content will fit on the printed page, without extending past the confines of the paper. Setting the margin ensures that the content stays to the default print margins (you can change this if you want). Setting the float to none ensures that some print bugs don't interfere with the proper display and printing.

We're also going to ensure that the background of the page is white, and whatever background image(s) may be in place don't print. And, the letter-spacing: normal selector returns the letter spacing to normal, if you've changed it around on your sheet. You might not need this one now, but it won't hurt and might be useful when you modify your stylesheet.

body, #content, #container {
   width: 100%;
   margin: 0;
   float: none;
   background: #fff url(none);
   letter-spacing: normal;
}

If your site uses a "wrapper" div in its layout:

More about page layouts.

you might want to give the wrapper or other containing layout element a bit of margin on the side. Web developer Rob Glazebrook recommends the following, set in inches to suit print conventions (the example div is #container):

body #container {
   margin: 1in 1.2in .5in 1.2in;
}

If you find the margins a bit large for a regular printed page, trim them down a bit.

Another good thing is to ensure that your images don't have borders around them. This is another addition that may well not be necessary for your page, but it won't hurt to add it:

img {
   border: 0px;
}

Your page probably has a good number of hyperlinks. Obviously they won't work on paper, but if it's important to have them printed (for reference, etc), here's how to have them print with descriptive text and URLs (what good is a hyperlinked chunk of text without its URL for us to see?).

To have the descriptive text print:

a:link, a:visited {
   color: #520;
   background: transparent;
   font-weight: bold;
   text-decoration: underline;
}

With this CSS code, your page's hyperlinks will show up in a dark red, good enough to appear legibly in both a color and a grayscale output, with the additions of boldface and underlining to help the text of the links stand out.

Modern browsers will allow you to insert the URLs of the links after the text. It assumes that the text of your page's body is contained in a #content ID; you will, of course, need to change this to reflect your own CSS layout. (If you add it to your body selector, a URL will appear in the heading upon printout, an effect you may want to avoid.)

#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
}

Note: the spacing in the above code is very important. Don't change it around.

Now go through your stylesheet. Note any elements you don't want to print, such as headings, footers, sidebars, advertisements, search boxes, navigation menus, etc. Make sure they are all referenced by either a class or ID. If they're not, give them one, but don't style it in the main stylesheet. One good method is again from Tech-Evangelists, and recommends giving each of the unnamed elements that you don't want printed the class of .nopr — standing for "no print."

More about classes and IDs.

Now give all of these elements a single attribute: display: none.

Here's an example:

.nopr, #footer a, #heading, #navbar, .soclinks, #searchbox, #sidebar {
   display: none;
}

Because of the display: none attribute and value, none of these will display when your page is formatted for printing.

If you want to prevent all elements within a table column or CSS division from displaying, simply add an asterisk. Like this:

#sidebar *

Any elements that remain (say, #content) should be coded to make sure that all of their content appears on the page — no running off the page. Add this to the selectors. We'll use #content as our example:

   width: 100%;
   margin: 0;
   float: none;

If you have elements that display in a lighter color, say a heading in your sidebar that displays in white, change it so it prints in black. Here's an example:

#sidebar h2 {
   color: #000;
}

Check your page's layout for your printer, not by printing each page, but by going through your browser's Print Preview function. Make whatever tweaks are necessary.

If you want to scope out an example print stylesheet, I've created one here. You don't want to just ram it into your pages sight unseen! Study the above section, read the linked articles above and below, and modify and change the print stylesheet according to your needs. Note: This is a stylesheet, not a styled HTML page. It will not appear the same in your browser as this lovely page does! You might want to download it into a text editor, where you can play with it at will.

Eric Meyer, one of the leading proponents of CSS, wrote a seminal article for A List Apart on printing your pages back in 2002. It is still an excellent reference today, and, as noted above, one I've borrowed from extensively for this section. A List Apart's Derek Featherstone gives us a much more sophisticated way of formatting our print pages. WestCiv's "Printing" is another interesting take on print stylesheets. And 37signals provides an interesting visual take on the results of their print stylesheet.

Finally, you can watch a video screencast on the subject by Chris Coyier.