As requested by everyone, PDF versions of the PHP, CSS and mod_rewrite cheat sheets are now online. Enjoy!

One potential problem with image rollovers, though, is that in order for an image to be displayed, it must be downloaded. Consequently, for rollovers to work smoothly and quickly, all the necessary images must be already available on the user's PC. Otherwise, the rollovers will behave badly, like in this example using large images.

Until recently, rollover effects were achieved through use of JavaScript, and as a result, a plethora of solutions to the preloading image problem in JavaScript are available. However, using JavaScript to preload images, though not a bad idea when using JavaScript to control rollovers, becomes less bright when it is CSS that's controlling them. A user could very easily (and this is becoming more common) have a CSS-capable browser without JavaScript support or with JavaScript turned off.

So there's a clear need for a way to use CSS to preload images or find another way to avoid the problem. Which gives us two relatively simple solutions to our problem.

The first solution is to create a single background image for your element that actually contains both the rollover and non-rollover images, and then position is using the background-position CSS property. Instead of changing the image when the mouse moves over the element, you can simply change the background-position to reveal the previously hidden rollover image. There's a more detailed explanation of this technique over at WellStyled.com.

The other option available to you is to trick the browser into downloading the image before it is required for the rollover. This can be done by applying the image as a background to an element, and then hiding it using the background-position property. The image will then be downloaded but will not be displayed. Then, when the rollover is activated, it will operate smoothly and instantly.

First, you need to select an element that doesn't currently have a background image. If so select an element that does have a background image, you will either end up not preloading the image you are after, or you will prevent the element's normal background displaying. Neither is ideal.

Once you have picked an element to use for this purpose, you need to add the background image. The following CSS can be applied to the element and will place the background image outside the viewable area of the image:

Your rollover image will then be loaded when the page itself is initially loaded, along with the other images. When a rollover is then activated, the image will already be available to the browser and the effect will be instant.

It struck me that it would be easier to work through this kind of CSS problem with some kind of simple tool to show how a page was put together. If I could see all the tags on the page in a nested format, with parent and child relationships obvious, and without all the text getting in the way, my life would be easier.

So, I put together this tool. In simple terms, it will fetch a page from a web server and output the tags within the page in a nested list. The JavaScript side of it will also highlight children of an element when you hover over it.

Classes and ids attributes are highlighted, as are tag names. Class and ID names, though, must be enclosed in quotation marks to be highlighted. Text, closing tags and line breaks are not shown. Though I can understand some people may find it useful to see text, I found it made the tree too large to be usable.

I've used it a few times, and am quickly finding it saves quite a lot of time solving simple CSS problems or conflicts. Which is exactly what it was supposed to do. Enjoy!

Highlighting Issues

When writing the tool, I came across a fairly unusual problem. I wanted, when the mouse was over an element, to highlight its children. However, this cannot be done with CSS (at least, I couldn't think of a way to make it work).

The problem with the CSS was that whenever you hover over an element, you are also hovering over its parents. So they, and their children, are highlighted - meaning everything is highlighted. For this reason, the highlighting of elements uses JavaScript.

How to Use

The page structure tool is written to accept a URL either by GET or POST. You can therefore use it one of two ways.

First, you can use the tool by visiting the URL below, replacing "##url##" with the address of the page you want to view:

http://www.addedbytes.com/view_structure.php?url=##url##

Alternatively, you can use the following form to submit an address to the page:

Bookmarklet

To make life a little easier, I've coded a quick JavaScript bookmarklet for you to use, that, when activated, will automatically submit the URL of the page you are viewing to the tool. Simply copy or drag the link below to your links bar, your favourites folder or anywhere else you wish:

• View Page Structure

Notes

• This tool works best with valid code, especially XHTML.
• A certain amount of basic code improvement is done before processing (for example all empty tags are automatically closed).
• Sites with non-empty tags that aren't closed properly may not show up correctly.
• Sites with large amounts of nested code should still show up, but it may be difficult to view the output.

Example

If you want to see an example of the output of this tool, you can view the structure for AddedBytes.com.

Any HTML element can be considered a box, and so the box model applies to all HTML (and XHTML) elements.

The box model is the specification that defines how a box and its attributes relate to each other. In its simplest form, the box model tells browsers that a box defined as having width 100 pixels and height 50 pixels should be drawn 100 pixels wide and 50 pixels tall.

There is more you can add to a box, though, like padding, margins, borders, etc. This image should help explain what I'm about to run through:

As you can see, a box is made up of four distinct parts. The outside one, the margin, is completely invisible. It has no background color, and will not obstruct elements behind it. The margin is outside the second part, which is the border. The border outlines the visible portion of the element. Inside the border is the third part of the box, the padding, and then inside that the content area of the box. The padding defines the space between the content area of the box and the border.

(Note that in the image above, the only border of the three drawn that would actually be visible is the solid line - the dashed lines are added to help demonstrate the box model).

When you define a width and a height for your box using CSS, you are defining not the entire area taken up by the content, padding, border and margin. You are actually just defining the content area itself - the bit right in the middle. The padding, border and margin must be added to that in order to calculate the total space occupied by the box. (From this point on, we will use width for demonstrations, but the same principles apply to both width and height).

The above CSS, applied to a box, would mean that that box occupied 300 pixels of space horizontally on the page. The content of the box would occupy 200 pixels of that (dashed line added to demonstrate the edge of the area occupied by the box):

In the above image, you can see that the pale blue area is 240 pixels wide (200 pixels of content plus 20 pixels padding either side). The border is 10 pixels wide either side, making the total width including the border 260 pixels. The margin is 20 pixels either side, making the total width of the box 300 pixels.

In practice, this can cause some confusion. For example, if I have a 100 pixel wide space available, and want to fill it with a pale red box with a dark red border and a small amount of padding, it would be very easy to write the CSS like so:

(A declaration of 0, as used for the margin above, does not require a unit to be added. Any value other than 0 does require a unit, e.g. px for pixels. Also, although "background" is defined as a shorthand property, it is more widely supported than the more correct "background-color".)

However, that will not give us a 100 pixel wide box, as the width declaration defines the content area of the box. The content area of the box will be 100 pixels - the total width of the box as defined above will be 122 pixels:

In order to set the above box to only occupy 100 pixels horizontally, you would need to set the width of the content area to be 100 pixels minus the padding and minus the border, in this case 78 pixels, like so:

To calculate the overall width of a box, including all padding, borders and margins, you would use the following formula:

Compatibility

At this point, you should now have a good understanding of what the box model is, and how boxes should be treated by different browsers. However, as you will soon learn (if you did not know already), not every browser does as it is supposed to. In order to use boxes, and by extension make the most of CSS in your website, you will need to be aware of how the different browsers treat boxes in practice and how to overcome and work around the problems presented by these idiosyncrasies.

Top Notch

Most browsers released in the last few years have no problem with boxes and render boxes correctly. Opera 6 and 7, Mozilla 1 (and by extension other browsers based on the Gecko engine like Netscape 7, Camino and Firefox and other derivatives), Safari, Konquerer (and derivatives) and Internet Explorer 5 for the Mac are all shining examples of how a web browser should behave, all rendering boxes flawlessly. IE 6 for Windows also will render a box correctly, as long as the [url=http://www.addedbytes.com/design/dtds-explained]Document Type Definition[/url] for the page is correct.

Whoops, Mrs Miggins, You're Sitting On My Artichokes

Some browsers don't display a box correctly. Unlike those below here, these browsers are widely enough used on the web that it is usually worth the effort to work through the problem. There are various methods for doing this, some better than others, that follow on. Most notable among the browsers with problems are Internet Explorers 4 and 5 and Internet Explorer 6. IE 6 is easy to work around, by adding a correct DTD (which you should be doing anyway).

Internet Explorer 5 is the main reason there is a box model problem at all. It, unfortunately, does not follow the simple definition for box layout as defined by the W3c. When you define a width for a box and it is rendered in IE5, instead of that width defining the content area of the box, it includes the borders and padding. Margins are added on to the content width correctly, but padding and borders are not. Unfortunately, this leaves us with some unpleasant choices:

1. Use a box model hack
   Hack's like [url=http://www.tantek.com/CSS/Examples/boxmodelhack.html]Tantek's box model hack[/url] are unfortunately something of a necessity. While some might argue that using hacks like this is completely missing the point of using CSS for web design, commercial necessity and the prevalence of IE5 leave us with little in the way of choice. The IE5 box model hack is in use all over the web and has spawned plenty of variants.
2. Add in extra code
   Some might consider this a slightly "better" way of working around this problem. Rather than adding a style sheet hack, you can nest elements within each other. Adding a div within another div means that rather than using padding, you can use just margins, which are handled correctly by IE5. As with the box model hack, it is far from a perfect solution, but there are few other options if you want a site to look the same in IE5 as other more capable browsers.

Hall of Shame

On the one hand, the browsers that I am about to mention are appalling, all failing dismally to render a simple box correctly for one reason or another. On a more positive note, users of these browsers, mostly old versions of current browsers, make up an extremely small, and continually shrinking, portion of web users. While you could probably find a workaround for the bugs in the display of boxes in these browsers, it is almost certainly not worth the effort - you are likely to cause yourself more harm than good with workarounds for these!

Netscape 4's box model is awful, but even worse, the simple box model hacks to fix the problem for IE5 and IE6 will crash Netscape 4. Netscape 4's style sheet support is abysmal overall, and it is being supported less and less. Though it is strictly a personal choice, I don't think it is worth the time and effort to support Netscape 4 any more - it's just not used enough, and the number of users is only ever going to shrink.

Internet Explorer 4 suffers, basically, the same problem as IE5. It treats boxes in a very similar way. However, it falls over in far more ways, and many of the available hacks will crash IE4. As it is also used by few people, and that number is dropping, many designers ignore it.

What does the future hold?

CSS3 promises us the option to determine how we want the user agent to treat boxes, and specify which box model we want to use. Support for CSS3 at a level that will be possible is many many years away yet. Until then, we are stuck with the CSS2 box model, and while IE5 is still used by a significant percentage of the web's population, we are going to have problems with boxes.

The problem is one that usually rears its ugly head with two and three column designs (though for now, we'll just worry about two columns). If your two columns each have a different background color, how do you make the colours extend to the bottom of the page using css? Equal height columns are difficult to achieve using height and overflow properties. Each column will be of a different height, and you do not always know which is the taller of the two. It is all too easy to end up with a site where one column just doesn't extend all the way to the bottom of the page, where it should end.

CSS does actually include a rather nifty little tool that can be used to work around this problem, the "min-height" declaration, that allows you to specify a minimum height for an element - which you can use to ensure that one specific column is always larger than the other, allowing you to avoid this problem. Unfortunately (and perhaps unsurprisingly) Internet Explorer does not support this declaration, so in practice it isn't a useful solution to the problem.

Dan, in his article (which if you haven't read yet, I suggest you do before continuing), outlines a solution he uses on his own site. This solution involves tiling a background on the page, to give the appearance that there are distinct columns that extend the full length of the page. It's a simple but clever solution, and can be seen in use on a great many sites on the web.

During the recent redesign of this site, though, I came across a small problem. Though Dan's solution is perfect for fixed-width layouts, it just wouldn't work with a percentage-based, liquid layout. The problem was simple - a graphic cannot alter itself based upon the user's screen. If you come up with a background image like the below, and tile it on a page, the left hand column will need to be 200 pixels wide. If your column is 20% of the page, though, that could make it anything from 20 to 2000 pixels - and as a result your columns will rarely look as you intended. This makes equal height columns in liquid layouts a tricky proposal.

However, Dan's solution can be used to apply a background to a page when the layout is liquid, using background positioning.

Background positioning can allow us to give our background the appearance of being liquid. When you positioning a background using pixels, you position the top left corner of the image. When you position a background using percentages or keywords, you don't. Instead, you position a point within the image itself. For example, let's say we have a page and a simple background image. We use the following to set and position the background:

The above will set "image.gif" as the background of the page. It will position the background 25% of the way across the page from the left, and 10% of the way down the page from the top. However, it is not the left hand corner that will appear at that point. It is the point 25% from the left hand side of the background image and 10% from the top that will appear at that point, like so:

We can use this to apply a background to a page that will give the illusion of a pair of columns, even though the columns are not of a fixed width. Let's say we have two columns (for now), of 25% and 75% width. We can create a simple image, 1 pixel tall by 2000 pixels wide (why so wide will become apparent shortly - but don't be afraid to go even larger if you wish - 4000 pixels wouldn't necessarily be a bad thing). We want the left column to be a nice shade of orange, and the right a nice shade of grey, with a black line to divide them. So the image needs to have a black line 25% of the way along, with everything to the left orange and everything to the right grey, like so (scaled for visibility):

Now, we position the background using the following CSS:

Now, if you were to draw a line down the page, 25% of the way across from the left hand side, then 25% of our background image would be to the left of that line and 75% to the right. If we use the 2000 pixel wide background mentioned earlier, and position it as above, we'll have an orange background for 25% of the page, a black line, then grey will fill the remaining 75% of the page. You can see an example of that here. If you resize your browser window, while viewing the example, you will see the columns expand and contract to maintain the same proportions of the columns. With a little imagination, and the use of partly transparent background images, you can create image borders between elements using the same technique.

A little markup and a little more CSS, and we can turn the above into a respectable liquid page, with columns that expand and contract with the users' windows, and always extend just as far as they are needed. A more complete example is here, and this technique is also in use at this very site [please note that this technique is in use in versions 3, 4 and 5 of this site, accessible through the footer], allowing the flexible navigation and content columns to always appear equal in length, despite the fact they almost never are.

Selecting Images

A few years ago, Geocities and Angelfire were packed with sites that used incredibly bright, garish backgrounds on their pages. Instantly, tiled backgrounds went out of fashion, and are often derided. However, there is no reason you can't use a tasteful tiled background on your pages, as long as you remember to keep it reasonably subtle and make sure your page content is still readable. For those of you who doubt that tiles backgrounds can ever be tasteful, take a peek at the [url=http://www.squidfingers.com/patterns/]free backgrounds available from Squidfingers.com[/url], all of which look great and could easily improve a web page.

Of course, there's no reason you have to use a tiled background on a site. Sometimes a single, simple image can be extremely effective. Sometimes a collection of background images works best, as a quick visit to [url=http://www.csszengarden.com]CSSZenGarden.com[/url] will demonstrate. If using a background image, make sure it doesn't clash with your design, and make sure your site works without it, as not everyone will be able to see it.

There's also no reason that the background you add needs to be a page background. Backgrounds can work well as borders to elements, or backgrounds to specific parts of pages, rather than the entire document.

Adding Backgrounds

Defining a background in CSS is fairly simple, and the below is an example of the quickest way to do it.

That code will place "background.gif" at the top left of the body of the page being styles. The image will also tile itself so it covers the entire page. And when you scroll down the page, the background will move as you do so.

Some people may not be seeing images though - they may have them turned off, for example - so it is important to set a background colour as well. This is done using the "background-color" property, as below. Please note that if you have transparent areas in your image, the colour you choose as a background will show through those areas too. Also, when setting a background to the <body> element, it is important to not assume that everyone has the same default background colour as you, as they may not.

Stop that Background!

The first thing many designers want to do is stop a background from tiling and moving. They want one image as the background, and they want it to stay still while you scroll. These two settings are controlled by "background-repeat" and "background-attachment".

"background-repeat" tells the browser which direction or directions the image should be tiled in, if at all. The values allowed for background-repeat are "no-repeat", "repeat-x", "repeat-y" and "repeat". "repeat" is the default behaviour for most browsers, so usually not worth specifying. "repeat-x" tells the browser to repat the image horizontally, and "repeat-y" vertically. "no-repeat" tells the browser to only use the image once - not to tile it in any direction. To tell the browser not to tile the image we used above, we might use the following code:

More control

"background-attachment" tells the browser whether or not the image should move when the user scrolls with a page. The default is for it to move with the window, so this property is generally only used when a designer wants an image to stay still while a user scrolls up and down a page. The "background-attachment" property can have one of two values, "scroll" (the default) or "fixed". Continuing with the same example we've used above, making a single image, that isn't going to tile, stay still while the user scrolls, could use the following code:

Positioning

The "background-position" property in CSS applies to any element with a background image applied. It can be used to move a background image around a page, and with a little creative use of server-side scripting could even be used to make a background image appear in a different place for each used who visits your site. However, for now, let's stick to the basics.

Background positions can be set in any one of three ways: using keywords, using percentages, or using pixels.

Keywords are the most commonly used of these, probably because they are quite simple to use. They work as a pair, though you do not need to name both of them. You name the vertical part first, and the horizontal second. The vertical part can have a value of "top", "center" or "bottom", and the horizontal can be "left", "center", or "right". The defaults for these are "top" and "left". If, however, you wanted the image we've been working with so far to be at the bottom right, you might use code like this:

Pixels are also easy to use. If you want to place a background image 100 pixels from the left hand side of the page, and 50 pixels from the top, you could use the following, though it's important to remember that when using pixels or percentages to position a background, it is the horizontal part you define first:

Percentages can be more tricky to work with. When you define a percentage, you do not always, as with pixels, define where the top left corner of the background image will be placed. For example, if you were to place a background image at "10% 10%", you might expect the top left corner of the image to be 10% of the way down the page, and 10% of the way across the page from the left hand side. However, what will happen in practice is that the point 10% of the way down the image, and 10% from the left hand side of the image, will be 10% of the way down the page, and 10% of the way across the page from the left hand side. (It is worth noting that the same principles apply to keywords - center being equivalent to 50% and right and bottom equivalent to 100% for positioning purposes - keywords are usually easier to get your head around though.)

While this can cause the occasional glitch, percentages are, however, quite easy to work with when you get used to them. For example, if you wanted to place an image dead center to the page, the following would place the center point of an image at the center point of a page:

Shorthand Laziness

All things considered, the final bit of code above is quite a handful. That's a lot to type in order to add a background to an image. If you want to save yourself some time, and some bytes, you can use shorthand declerations to set backgrounds. If you remember the default values for properties too, you'll save yourself even more time and bandwidth.

The above code, in shorthand, would be this:

You don't need to set every value in the above to use it though. For example, if you wanted to set a background image on a page, using a background colour of white, but you wanted the image to tile and to move when you scrolled, you could just use this:

As you can see, this makes background declerations far more manageable (and is actually slightly more widely supported than the longer alternative).

Getting Creative

Bearing in mind we can attach a background to a particular side of an element, there is no reason we can't use backgrounds as borders to elements. Apply a border to the bottom of links, with a little padding, and you'll have a very unusual underlining effect. Backgrounds can be applied to virtually any element - make the most of them!

Microsoft Difficuly

It may have occurred to you already that using semi-transparent images (for example PNGs), you could create some pretty impressive effects. Sadly, Microsoft do not yet support PNGs properly, meaning we can't use semi-transparent backgrounds very easily. However, all is not lost. If you want semi-transparent backgrounds, you can use IE's "AlphaImageLoader", which will make an image translucent by percentage to fake the effect. As the "AlphaImageLoader" is proprietary Microsoft technology, it will not affect how your site looks in other browsers.

Colours in XHTML are virtually redundant (really, no colour should ever be specified within an XHTML document, it should be specified through CSS), however it allows for deprecated elements, for example the <b> or <font> tags. Some deprecated elements do allow colour attributes.

The following 16 named colours (and only these names) are valid for HTML 4 and above, XHTML and CSS:

•        Black (#000000)
•        Green (#008000)
•        Silver (#C0C0C0)
•        Lime (#00FF00)
•        Gray (#808080)
•        Olive (#808000)
•        White (#FFFFFF)
•        Yellow (#FFFF00)
•        Maroon (#800000)
•        Navy (#000080)
•        Red (#FF0000)
•        Blue (#0000FF)
•        Purple (#800080)
•        Teal (#008080)
•        Fuchsia (#FF00FF)
•        Aqua (#00FFFF)

Colours can also be specified in RGB Hex codes in HTML, XHTML and CSS. RGB Hex codes are six digit hexadecimal numbers (hexadecimal numbers being made up of the digit 0-9 and letters A-F, A representing 10 as a single digit, through to F representing 15). They are made up of three pairs, each of which when translated to decimal will equal a value between 0 and 255 (00 to FF). An example colour would be "#FF9933". The first pair of digits refers to the amount of red in a colour ("FF"), the second the amount of green ("99"), and the last pair the amount of blue("33"). These numbers must always be prefixed with a hash symbol (#). Please see this [url=http://www.addedbytes.com/Resources/Colour_Chart/]RGB Hex Colour Chart[/url] for a list of web-safe colour codes, with examples (web-safe colours are those that should look the same across all systems, and should avoid issues with AOL's image-caching systems).

CSS allows further methods of defining colours. However, these will not work in HTML or XHTML.

The first of these is useful for saving yourself a few bytes in your CSS files. RGB Hex codes can be abbreviated to three digits. This is possible where each of the three pairs of a colour code consist of two of the same digit. In our example above, "#FF9933", the three pairs are all made of a two identical digits, so that can be abbreviated to "#F93". You still need the hash symbol, and this can only be done when all three of the pairs are made up of two identical digits.

You can also define colours in decimal form in CSS. This is quite useful if you have trouble working with hexadecimal definitions. The syntax for using decimal colour definitions in CSS is:

This will set the colour of all elements on a page to the decimal equivalent of "#FF9933". The "amount" of each of the three colours - red, green and blue - is defined as a number between 0 and 255 in this definition. For those of you who were wondering, here are values of hexadecimal numbers converted to decimal:

• FF - 255
• EE - 238
• DD - 221
• CC - 204
• BB - 187
• AA - 170
• 99 - 153
• 88 - 136
• 77 - 119
• 66 - 102
• 55 - 85
• 44 - 68
• 33 - 51
• 22 - 34
• 11 - 17
• 00 - 0

Last, you can define CSS colours as percentages in RGB, rather than in decimal or hexadecimal numbers. All you need do is add the percent sign (%) after the number you wish to use, in the same piece of code you use for decimal colour definitions:

Hexadecimal numbers convert into percentages like so:

• FF - 100%
• EE - 93%
• DD - 87%
• CC - 80%
• BB - 73%
• AA - 67%
• 99 - 60%
• 88 - 53%
• 77 - 47%
• 66 - 40%
• 55 - 33%
• 44 - 27%
• 33 - 20%
• 22 - 13%
• 11 - 7%
• 00 - 0%

In instances where a colour is defined that is outside the possible range of numbers allowed (eg 0-255 in decimal), numbers will be assumed to be equal to the maximum allows. For example, a colour of "rgb(500,0,0)" will be equivalent to "rgb(255,0,0)".

Personally, I try to always use the standard hexadecimal code for defining colours, as that has been the convention on the web for so long, and that is the only convention that works across all the languages in use on the web.

The above will turn all text within <h1> tags large, bold and red. The start of the rule, "h1", tells the user agent to only apply that rule, the large bold redness, to text within <h1> tags. This is a part of CSS1, the first level of CSS. Any browser that supports CSS at all should support basic selectors like these.

However, while the above is useful, it doesn't let you apply styles very specifically to individual elements, or to only a small subset of items of one type, or group. So next, we have classes and ids, used within code to allow us to apply styles to, respectively, elements of a specific group, and unique single elements on a page. You apply these by adding "class" and "id" attributes to the HTML of your document, and then adding selectors to the CSS, like so:

The first selector in the CSS tells the browser that the following style applies to all text within "<p>" tags. The second rule starts with the selector ".main_text", telling the browser that the following rule applies to all elements of class "main_text", the "." telling the browser this rule applies to a class, and the "main_text" identifying that class. The third rules starts with the selector "#first_paragraph". The "#" at the beginning tells the browser that the rule only applies to one element, with the id "first_paragraph".

Again, the above is a part of CSS1, and should be supported by any browser with basic CSS support.

If you want, you can apply styles to elements depending upon their position within a page. For example, if you want to apply styling to any list item in an unordered list, but not ordered lists, you can write a CSS rule like so:

The above will make any list item within an unordered list bold. This type of selector, where the style is applies to a specific descendant of an element within the code, will be supported by most browsers with any CSS support, the notable exception being Netscape Navigator 4, which does not understand descendant selectors.

Selectors can be combined as well. For example, if you wanted to apply a style to links within an unordered list, and make one stand out, the following CSS and HTML would do the job admirably:

The above will set all links within the list to red, then the link with the id "unique" to bold.

And there you have the basic CSS selectors. Beleive it or not, the simple rules above, when combined (and together with a few creative styles) can create amazing looks for sites with just a few lines of code.

CSS allows you to seperate your design from your markup, making maintenance infinitely easier, and your site more likely to work in different devices, both of which are definite pluses. It also, however, allows you to tell a page to display a different way depending upon what device is being used to render it.

This is achieved using the "media" attribute of the "<link>" or "<style>" tags, like so:

There are several media types available to you - [i]all, aural, braille, handheld, print, projection, screen, tty, tv[/i] - and a [url=http://www.w3.org/TR/1998/PR-CSS2-19980324/media.html#media-types]list of available media types with more detail[/url] is available from W3C (where you can find out more about media groups, as well).

With such a range of options, you can, if you like, create one HTML document that will display exactly as you like depending entirely upon which device is being used to view it. You can hide large images from PDAs, you can specify seperate font styling for overhead projectors - you can write your site so that it works well with the technology at the user's disposal. And one very useful side effect of this is that you can specify an entire print style without the need for copies of every page of your content, like the following, that will use the "normal.css" style sheet for screens, and the "printer.css" style sheet when printing.

For print styling, there are a lot of factors to consider. Are many users going to want to print out your header? No. But do you want your logo on the page? Yes. Is the navigation worth printing? No. Each item on a web page serves a purpose, and on paper, that may not be worth much.

It is best, then, to start at the beginning. With an unstyled HTML document. Pick a page to start working on, and remove all styles from it. With an unformatted page in front of you, it should be pretty easy to see what needs styling and how, but don't rush in. There's a lot to think about.

Fonts

Fonts are very different on the web to print. Sans-serif fonts are, allegedly, the best to use on the web. Serif fonts are, apparently, better on paper. So first things first, set your font to a serif font you like (personally, I like Georgia for Windows). As with picking all fonts, make sure you provide alternatives for those without the first-choice font.

Font sizing is a bit different on paper too. It's usually best just to leave this to the default, but if you want to specify a font, make sure you run plenty of tests to make sure it's easily legible.

Links

Links are not going to be a lot of use on paper, by their very nature. But that does not make them useless.

The above, if added to a printer style sheet, will make all links black and underlined, and add the address of the link in brackets afterwards, meaning that if a user did want to visit any site linked to from that page at a later date, they can.

Spacing

In print, margins and spacings are as important as with the web. There is no harm in adding in a little space between words and lines, and a decent gap around the edges, if it will make a print-version easier to read.

Hide Useless Stuff

You can hide elements in this style sheet easily enough, using display none. This will save some space on the paper, and reduce useless junk on the page, something the user will be very grateful for. Elements worth hiding are usually form elements, some images, marquees, and flash content. If you are unsure, print the page and then work through that page deciding what is useful and what is not.

Colours

Print colours will show up very differently to screen colours, especially as a high proportion still have black and white printers. Even those who don't will be grateful to you if you keep the proportion of colour to a minimum, simply because of the expense.

Highlight and emphasize things using italics, underlining, boldness and size in your print style sheet. Remove all references to colours where you can, save to set colours to black.

Page Address

You may want to add the address of the page itself to the page, and hide it, except when the page is printed, so that the user can return to your page later if they wish.

Tell the User

A user may see a page without a "printer friendly" link and print anyway, but they may be put off. Try and add a note to your page explaining that the page they are now viewing is printer friendly, and encouraging them to print it.

Finally

Do plenty of testing and reading. The print industry has been around a very very long time, and there are plenty of resources around for you to research what makes a document easy to read on paper as opposed to screen - make use of them. The more you test, too, the more likely you will be to notice small flaws in the print version of your site, in the same way that looking at your site during the design process highlights tiny imperfections that make all the difference once fixed.

Wish these simple measures, you should now be able to create an alternative version of your entire site, that will be invisible to the user until they actually print a page. They do not need to do anything bar click the print button.