Introduction:

In 2003 I wrote an article on how to use CSS to make web pages printable. I figure that it made sense to include it here … the article:

One of the classic problems with how web pages are designed, is that they are horrible to print. Horrible in the sense that page elements (text, images, etc.) don’t line up and unwanted images and navigation links get printed.

I am as guilty as anyone of creating pages like that, but I am aiming to fix it for your websites and mine. While most other web designers will create separate ‘printable’ pages (big waste of time), we will only be making some simple additions to our pages to make them ‘print friendly’.

Basic ideas:

* People will print your pages typically to be able to read the content, not to see pictures. You need to hide all images from the printer and this is done in the print style sheet. I will explain what the print style sheet is in a moment.
* Navigational elements are not needed in the printed document as well, so all navigational elements should be removed from the printed page.
* Let’s say you designed your pages with a black background with white text. You don’t want peoples printers printing all that black, they won’t be too happy with the price of ink these days! To solve this problem, in our print style sheet we will set the page color to ‘white’ and the text color to ‘black’.

The ‘print style sheet’:

I’ve mentioned the ‘print style sheet’ a few times with no explanation; let’s take care of that now:

CSS today allows you to link to more than one style sheet in your web page.

The simple reason you would want to do this is so that you could have the HTML page ‘change’ its appearance automatically when someone visits your page with a particular type of device. These types of devices can include a typical desktop computer, a PDA (Windows CE device, Palm Pilot, etc.) and a printer among other devices!

It works like this; when you link a style sheet to your HTML page, there is an attribute that you can specify in the CSS link tag that tells the device reading your page if it should use the style sheet specified in the link.

So the wise men and women that came up with the CSS specification, came up with a few ideas for device types that could be specified in the CSS link. For the sake of this short article we are concerned with only two of them:

1: ‘print’

2. ‘screen’

Here’s a sample pair of CSS links that point to different style sheets, one for the printer to use and the other for a normal PC monitor to use …

You can check out the rest of the tutorial on making web page printable with CSS on Killersites.com.

Thanks for reading,

Stefan

In this tip, you will learn how to specify a font’s size with CSS.

Being a practical nerd, I will not waste time talking about all the various methods for declaring font sizes with CSS … instead I will concentrate on the two widely used ways and then briefly explain the differences. First, the two main methods:

1. By pixel
2. By em

What is the difference between and EM and a pixel?

Pixels are an absolute measure of a font’s size and an EM is a relative measure – that means the actual pixel size of the font (as they appear on screen) set with EM’s, can fluctuate. This makes using EM’s trickier. So the nerd answer is NOT to use EMs!

Let’s look at a quick EM example anyway:

<div style="font-size:1.2em">

So the above would cause the fonts to be about 20% larger than the baseline font size – thus 1.2em. I am not going to go into all the nerd details about EM’s because I think pixels are the way to go.

Let’s look at a quick pixel example:

<div style="font-size:12px">

Thanks,

Stefan Mischook

In this ultra simple nerd-free CSS tip, I will show you how to change the color of your fonts with CSS.

Check out the samples:

h2 { color: green; }
 
h4 { color: #9000A1; } 
 
p { color: rgb(0, 210, 87); }

Comments:

You are able to specify the color in either:

• by Named color
• by Hexadecimal
• by RGB

Thanks,

Stefan Mischook

Hi,

I wanted to introduce this new series of articles, videos and the occasional podcast that will cover all sorts of cool CSS techniques. You will find things as simple as styling links, to complete page layout strategies.

This growing collection of CSS tips, tricks and techniques can used to learn CSS and then later, you can use them as a cookbook of recipes you can refer to.

Thanks for reading,

Stefan Mischook

I’ve read hundreds (sadly, this is true) of those 2-inch thick nerd books (I don’t get out much) and I can’t stand it when people waste paper on that kind of generally useless stuff. So read on, eager student, and you will be well on your way to building your own killer web sites!

The wise people who created CSS came up with 3 basic ways for you to use CSS in your web pages:

1. With an external file that you link to in your web page:

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

or using the import method:

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

Why use the import method versus the link method when using external style sheets? Use the import method if you want to support really old browsers like Netscape 4.0.

Read the rest of the 3 ways to add CSS code to your web pages.

Thanks,

Stefan Mischook

You can read the rest of inserting images with css.

Thanks,

Stefan Mischook