When I started Technically Easy the one thing that I wanted to do was make sure that my posts were printable. By this I mean I wanted the printed pages to not include the menubar and sidebars, only the content.
Those who are just starting out in Web development may just create a second copy of the current page, and then create a text link to this page for printing. I wanted a more simple solution and realized the same task can be done easily with CSS.
CSS Files
I have talked briefly about CSS in a previous post title Introduction to Cascading Stylesheets. In a nutshell, a Cascading Stylesheet (CSS) is a separate text file that controls the look and feel of your web pages. If you need to change the look of your web pages, you only need to change the CSS file.
For most Web developers, they use CSS files to control the look of a web page in a browser only. CSS files also allow you to control the look of the web pages when they are printed as well. Implementing this feature is as simple as creating a second CSS file and referencing that file in your web pages. The next section will show you how.
Controlling Printing with CSS
As mentioned previously, CSS files are separate text files that are referenced in the HTML of a web page, as such:
This will apply the styles included in the CSS file to the web page, for both displaying in a browser, and when the web page is printed. What we want to do is define a separate CSS file for the browser and the printer. To accomplish this we include the media attribute in the HTML.
To define a CSS file for the browser:
To define a CSS file for printing:
As you can see the above two definitions now include the media attribute that defines when the CSS file should be used. Both statements need to be added to your HTML files for this to work. Let’s take a look at an example of how to use the two CSS files.
Defining a Screen and Print Layout
The easiest way to create the two CSS files is to first concentrate on the screen version. Once you have the web site the way you like it, you can then copy the CSS file and modify it to make the print version. Let’s look at a simple example.
Suppose you have a Web page with a header and menubar, a content section on the left, and a single sidebar on the right. You want the header and content to print, but not the menubar and sidebar. After all, the visitor can’t click the links on the printed page, so you want as much of the page to contain the content.
A stripped down screen CSS file may look like:
#header { width: 100%; }
#menubar { width: 100%; }
#content { width: 700px; }
#sidebar { width: 200px; }
The above CSS definitions are missing a lot of other attributes, but for this example this is all we need. The above simply defines a container 900 pixels wide, with a header and menubar that match the width. The content is 700 pixels wide with the sidebar taking up the remaining 200 pixels. In this case, these definitions would be located in the screen version of the CSS file.
Now, when the screen version is complete, we would make a copy of it to start the print version. This means that the same definitions will be located in both CSS files.
As mentioned earlier, we don’t want the menubar and sidebar to be displayed when the web page is printed. We also want as much of the page to contain the content as possible. To accomplish this, we modify the print version to the following:
#header { width: 100%; }
#menubar { display: none; }
#content { width: 100%; }
#sidebar { display: none; }
You now notice that we stretched the content section to fill 100% of the page. We have also hid the menubar and sidebar by using the display attribute with the value none. This will prevent those two elements from showing on the printed page.
Once you have the printed version of the CSS files, you can now include them both in your HTML web page as explained above. To watch the two files in action, open your web page in a browser to see the screen version. To view the print version simply select Print Preview in the browser.
Summary
This post provided a quick method of creating a printable version of a web page using a separate CSS file. Using CSS files, you can control what your web pages will look like in a web browser, as well as how they will look when they are printed.
Since this method uses CSS files, any author of a web site or blog can easily implement this feature.