Breadcrumbs

Four Quick CSS Tips

Tip #1 - Printer Friendly Made Easy

Many websites publish a printer friendly version of their content. Usually this consist of a link to a separate page containing the main content with the layout stripped away. These sites probably don't realize that CSS allows them to create a printer friendly version by just linking a second CSS stylesheet to their page. When the user prints their article, which on their monitor displays all the layout and normal styling, the printer will print a nice, clean version of the article - without the layout and unnecessary parts of the web page.

To do this add an extra stylesheet to your <head> tag:

Code: XHTML

<link rel="stylesheet" type="text/css" src="style.css" media="screen" />
<link rel="stylesheet" type="text/css" src="printer.css" media="print" />

This sets up two style sheets - style.css is displayed when being viewed on a screen/monitor; printer.css will be applied to the document when the user prints out the web page.

To set up your printer.css, use a web browser that allows you to view your page in different media types, such as Opera (external link) or Firefox equip with the Web Developer Toolbar (external link).

You can now edit printer.css until you are content on what will be printed by the user. You will want to set the display property to "none" (display: none;) for all non-essential items on your page.

There are many other tricks using the media attribute. For more information go to meyerweb.com (external link).

Tip #2 - Two At A Time

Normally, people only assign a tag just one class, but that's not all you can do. In fact, you're allowed to associate as many classes as you want with a tag. To do this you simply separate each name with a space (not a comma):

Code: XHTML

<div class="header text">Stuff</div>

If there are conflicting properties, the one that is physically lower in the stylesheet will be used:

Code: CSS

.header {
    font-weight: bold;
    color: black;
}
.text {
    color: blue;
}

The <div> above calls both of these classes, so their rules are combined. There are two different rules for the color of the text, but as the one for "blue" is lower in the stylesheet, you will end up with bold, blue text.

Tip #3 - Internet Explorer Is Wrong

If you find yourself making separate stylesheets just for Internet Explorer, there is another method that allows for just one stylesheet, but causes Internet Explorer to read sections differently.

For example, you have just completed a layout, which works in both Opera and Firefox. You haven't bothered to check its compatibility with Internet Explorer. You have found that this property makes your text the desired size in Opera and Firefox:

Code: CSS

.text {
    font-size: small;
}

In Internet Explorer, however, you find that the text is bigger than in the other web browsers. Therefore, you have to apply the following CSS to Internet Explorer only:

Code: CSS

.text {
    font-size: x-small;
}

In order to place both within the same stylesheet we use a child selector. Internet Explorer doesn't understand these, and therefore ignores them. Other, more CSS capable web browsers comprehend them fine.

Code: CSS

.text {
    font-size: x-small;
}
html>body .text {
    font-size: small;
}

Internet Explorer recognizes the first "text" class and applies it; then it cannot read the next "text" class, therefore skipping it. Opera, Firefox, and other real web browsers will apply both classes. The second rule has the higher priority as it is lower in the sequence of the stylesheet - therefore applying the correct font size.

Tip #4 - Mac Internet Explorer Is Even Worse

Internet Explorer on OS X does very, very strange things with CSS. Due to the fact that Microsoft no longer develops or supports it, these bugs will never become fixed. To hide CSS from IE OS X, developers rely on yet another bug - adding comments around what they want to hide:

Code: CSS

/* Hide from IE-Mac */
.text {
    text-size: small;
}
/* End Hide */

You can combine commented sections and non-commented sections to pick and chose which elements IE OS X will display and how it will display them.