CSS Tricks & Tips

Since its early days, HTML has offered us many ways of altering the appearance of text. We have been able to create headings, bold text, text in italics and so on. With these tools, it has been easy to emphasize important words and ideas by making them stand out from the rest of the content.

Naturally, search engines have also noticed these features. They know as well as we do that headings and bolded words usually tell a lot about the contents of the page. So, they've adjusted their algorithms to place more weight on a word that appears in a heading, or in bold, than to one that just appears in the body text.

For a designer, the matter in which search engine algorithms work can be a problem. Search engines may like H1-sized headings, but many visitors consider them to be ugly. As long as the content of your pages has any effect on their ranking, there will always be a conflict between what search engines and users want.

These issues are usually solved by cloaking the page, which enables the designer to show one design to search engines and another to humans. However, cloaking takes plenty of work and sometimes money. If only minor visual changes are required to please both parties, a simpler solution would seem sufficient.

What is this thing called CSS?

As the Internet has developed, HTML has received an add-on called Cascading Style Sheets. This new language opens the possibility of altering the visual representation of pages without the use of HTML.

While search engines still do not understand CSS very well, nearly all browsers support it to some degree. TheCounter.com's statistics for March 2002 show that over 95% of their visitors use browsers with at least partial CSS support (IE3 or later, NN4 or later). This means that by using CSS, you can currently provide somewhat different-looking content to search engines and other visitors.

Although CSS doesn't offer the same flexibility and protection as cloaking, it is well-suited for making small design changes. You should however keep in mind that while an overwhelming majority of browsers understand CSS, most of them do not support all of its features. To avoid nasty surprises, it is best to check your pages in both NN4 and IE4. As more recent versions of these browsers have better CSS support, you're usually safe if your tricks work in the 4's.

To get something out of this article, you should know the very basics of CSS. If you're completely unfamiliar with the language, visit the CSS tutorials at HTML Help or House of Style.

What can you do with CSS tricks?

There are some "legal" things you can do with CSS. For example, you can use it to build your layout or to slightly adjust the size of your headings and body text. However, because loads of tutorials have already been written about those subjects, we won't be looking at them more closely.

Instead, we'll focus on the darker side of CSS tricks. Many search engines consider the techniques we're about to discuss to be spam, and may ban your site if you choose to use them. Using CSS to cheat the engines isn't safe - it's just somewhat safer than doing it with the traditional HTML method.

I do not use the tricks listed below, nor do I advise anyone to do so. However, they are included for informational purposes and for the pleasure of those who like to take risks. Just don't come crying to me when your site gets banned, because that is what's likely to happen sooner or later.