You go through all the work of creating a nicely designed element on your page, centering the graphics, making things bold or italic, playing with the font sizes, and then you enclose all of this code inside a DIV block, give it an ID name and then create a style rule to tell that name to "display: none". What happens? The entire block that you worked so hard to create completely disappears off the page! This has to be the most useless command in the CSS world.

Actually, it is one of the most useful commands! Let's forget Variable HTML for the moment, and consider the following. You create a well designed page for 1,024 or 1,280 screens with an attractive banner graphic that displays your company name. How are you going to print this page when the default print area is only 7 inches, 672 pixels, and the max print area with ¼ inch margins is still only 8 inches or 768 pixels wide?

The answer is very simple, you can't! At least not without either shrinking the page size and making the fonts so small that they become almost impossible to read or just chopping off the right edge of the page.

This is where display none becomes extremely useful. Enclose the original banner inside a DIV with ID "monitor", and then create a smaller banner for the printed pages enclosed in a second DIV with ID "printer". Now create two CSS files and link them into your page with the media type of the first set to screen and the other set to print. Include the line "#printer { display: none;}" in the screen media CSS file and the line "#monitor { display: none;}" in the print media CSS file.

When you print the page, the print media CSS file will print the alternate banner instead of the video display banner.

A little history:

• Style sheets have existed in one form or another for printed material since the beginnings of SGML in the 1970s.
• The first publicly available description of HTML was a document called HTML Tags, which was first mentioned on the Internet in late 1991, and yes, there was an Internet long before the World Wide Web.
• The first CSS proposal was presented at the "Mosaic and the Web" conference in 1994.
• Windows 95, which was released on August 24, 1995, included dial up networking as part of the operating system for the first time.
• The first CSS specification to become an official W3C Recommendation was CSS level 1, published in December 1996.

CSS was designed primarily to enable the separation of document content from document presentation. From the very beginning CSS had two primary goals:

1. Reduce the bloated content of HTML files by removing the repetitive font, bold, italic, and other tags used to enhance the appearance of web documents.
2. Provide a standard method that allowed web pages to be reformatted and presented differently on various devices such as video monitors and printers.

This second CSS goal is extremely powerful, but unfortunately highly unused by today's designers. After reading this page you will have a reasonable understanding of this feature, you will know how to make your pages printable, and you will see how the Variable HTML script was built as an enhancement of it.

A quick CSS tutorial:

I'm assuming that you already familiar with CSS, so this is just the additional information you will need to make your pages printable. All CSS directives have the same basic format:

• selector { property:value; property:value; ... }
• h1 {color:red;} will display the text of every level 1 headline as red.

Sometimes you don't want every headline or every paragraph to look the same. CSS allows you to "tag" individual or groups of page elements with extended selector tags.

ID & class: You can sub-define any html tag by giving it a class or id definition. The CSS selector p.xyz would reference all of the paragraphs using the html tag <p class=xyz>. The CSS selector p#abc would reference the single paragraph with the html tag <p id=abc>. Classes can be used multiple times in a document and are represented by a period. Each ID must be unique on a page and is represented by the pound sign.

There are many circumstances when the block of text that you want to reference exists inside another HTML tag or consists of multiple HTML tags. Enclosing the block of text within most of the existing HTML tags will also change the appearance of the block, so HTML has provided us with a pair of tags that by definition do absolutely nothing on every browser, that is, except for what you tell the tags to do in your CSS file.

Div & Span: The HTML language has a number of commands that break up the content into blocks of text: p, h1, h2, pre, blockquote, etc. It also has a number of commands that surround words or phrases within blocks of text: b, i, strong, em, etc. Browsers have an internal stylesheet that tells them how to modify the representation of the page for each of these commands. A great feature of HTML is the existence of two other commands that do absolutely nothing! Do nothing, great feature? The <DIV> command acts like any other block command, it creates a new block of text, but since the browser does nothing with it other than make it a separate text block, you, the designer have complete control via style command to define how the block will be displayed. The <SPAN> command give you the same control over the words or phrases within the block.

The first thing we want to do is to stop looking at the web page as a single entity. Instead, look at the page as if it were a collection of components; company banner, navigation, content, advertisements, copyright, etc.

The navigation has no real useful purpose on a printed page. The first thing you need to do to eliminate the navigation from your printed pages is surround the <div id=nav> navigation code </div> with DIV commands, making the code uniquely identifiable. Once that is done you can create a print.css file that includes the line "div#nav {display:none;}". This CSS directive does exactly what is sounds like, it does not display the "nav" section of your page, or in this case, it does not print it.

You can use the same technique to "hide" the advertisements. And use it again to create an alternate company banner for the printed page, then use the display:none feature to hide the printer banner in the screen.css file and hide the screen banner in the print.css file.

As you get more familiar with the use of CSS, you can use CSS positioning to completely redesign your page layout when it is printed. If you prefer table layouts you can use HTML codes such as <td id=nav> instead of the div command to completely eliminate table columns and or rows. CSS does not have the ability to change the colspan and rowspan attributes of HTML table elements, so you will need to use other techniques to eliminate the need for that. This page is an example of using those techniques.

We started with a web page that was designed at say 1200 pixels wide. It had a nice graphical company banner with three columns under it; navigation, content, advertisements. We created a secondary variable width banner for printing and used display:none; directives to hide different elements on both the printed and displayed pages. For now, just to make things simple, let's forget the bulleted list of other items just mentioned and let's turn this into a Variable HTML page.

Normal pages will have a single CSS file for printing and another single CSS file for screen display. A VariableHTML page will have a series of CSS files for screen display. Each file will start with a common prefix or root name and will be followed by a number that represents the variable content.

The first thing we do is rename the screen.css file to style1.css and copy the print.css file to a file called style0.css, then edit that file to remove the display:none; directive from the navigation. We now have one CSS file, the original one, that will display the page nicely on screens that are at least 1200 pixels wide -- and -- another CSS file that will display a page for screens that are less than 1200 pixels wide.

When you started designing your page you had to make a decision as to what screen width your page would support. You built your original page to support just that one width. Larger widths will be filled with blank space and smaller widths will have to scroll sideways. When you use Variable HTML, you have to make the same decision, but this time only for the 5% of visitors who have java script blocked. Let's choose our default page width at 1200 pixels or screen1.css. We enter the following lines in the head section of our HTML file:

As you will see later, Variable HTML can control the appearance of your web pages by using up to 5 combinations of up to 5 variable items. In this example the (Variable Style A) vsa is set to monitor the W or width variable. The script will modify the "active" flag of all stylesheets that start with the Root "style" and followed by the single digit that represents the W variable.

The 1200 in the "vBr" (variable breakpoints) variable tells VariableHTML to break the possible screen widths into two groups at 1200 pixels . The ,0 in the list is there to end the list.

Create a second banner graphic that is 960 pixels wide, rename style1.css to style2.css and copy style0.css to style1.css. Edit the css files so that style 0 displays only the variable banner, style 1 displays only the 960 banner and style 2 displays only the 1200 banner. Add another link to the head of your file for style2.css and change vBr to 960,1200,0. Now the 960 and 1200 break the page width into 3 ranges, 0, 1, and 2.

But, we are not done yet. Display your page in a browser window that is less than 960 pixels wide (we supply a tool for displaying the browser width) and keep making the window smaller. At some point having the content and navigation side by side becomes undesirable. For the sake of discussion, let's say that width is 650 pixels. Roll up the styleX.css files again to make styles 0, 1, 2, and 3. Change vBr to 650,960,1200,0 and create an alternate set of navigation links that display above the content instead of next to it. You already know how to use the display:none; directive to hide things!

Is the page that displays at 645 pixels as impressive as the page that displays at 1280? The simple answer is no. Will a visitor with a 645 pixel wide browser window be more likely to stay on your site with the less impressive display or if you forced him to scroll sideways to view your fancy page? Forcing a visitor to scroll sideways to view your page is one of the fastest ways to lose customers!

Variable HTML allows you to display the "most impressive" page possible to every visitor while at the same time not forcing any of your visitors to scroll sideways.

Let's look at that statement from another perspective. You can now create an even more impressive page for the small percentage of visitors with 1366x768 monitors or 1600 x 900 monitors and not worry about forcing the vast majority of your visitors to perform horizontal scrolling. As stated before, you can customize your pages to give the best possible impression of your company to every visitor based the size of their browser window.

Media = print

A page is printed at 96 pixels per inch, our boring numbers page explains why. The default left and right indents for older versions of IE are 3/4 inch. The printed area is only 7 inches or 672 pixels. Even at minimum 1/4 inch margins, an 8 inch page would be 768 pixels wide. But, most of today's websites are designed at widths of 1,000 pixels or more.

Many of today's browsers compensate by shrinking the page, no matter how wide it is, until it fits on the printer, even to the point where you need a magnifying glass to read the results.

A better way to handle this is to create a print media stylesheet that will hide things like the site navigation or advertisements, or it might change the width of the columns of text. You are basically redesigning the page to make it fit on the printer.

Media = screen & screen & ...

The web is full of opinions on the proper design width for your website. Every one of the answers is based on a single page design. Each site will tell you the percentage of monitor resolutions that will visit the average website.

You do not have to look very closely to see that not one of those sites is telling you that 100% of the visitors will have just one monitor resolutions. The reality is that visitors will view your website using everything from cell phones to high definition television sets. There is no single page design that looks good and is readable on every possible device.

Variable HTML is an expansion of the media = print design concept. It allows you to create a series of CSS files to redesign your pages.