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.

Making links vanish

Some search engines take outbound links into account when they rank your page. For example, linking to a well-known page about root beer and including the words "root beer" in the link text could boost your ranking for those words.

Occasionally, it would be nice to get this advantage without encouraging visitors to leave the site. The solution is to use a bit of CSS to hide the link from human visitors. Because search engines don't see what is happening on the screen, they can't differentiate the hidden link from the normal links on your page.

Simply include the following in an external CSS file:

This removes the underline from the link and changes its color to black. Should the browser support CSS2, it will also prevent the cursor from turning into a hand when it is located above the link.

Then use the following in your HTML:

To perfect the transformation, use this JavaScript along with the above CSS. The script can easily be configured to prevent the status bar from changing when the pointer is over the hidden link.

Hiding H1's, bold text and text in italics

As already mentioned, many search engines place additional weight to words that appear inside these tags. Cancelling the visual changes caused by the bold and italic tags is fairly uncomplicated. Again, add the following string of code into your external CSS file:

After doing that, fooling the search engines into thinking that your keyword is bolded or in italics is easy. To achieve this, just use:

H1 headings can also be made to imitate normal text. Add this to your CSS file:

Whenever you wish to, you can now apply the following tag:

Invisible text in many ways

The oldest trick in the book is to place keyword-rich text on a page and then hide it from humans. In the past, this was usually done by using the same color for the background and the text. However, search engines have figured this trick out long ago, so hiding text with HTML tags is definitely out of question.

CSS makes it possible to add several new twists to the old trick.

Classic style

This trick is best used in combination with HTML. First, define for example a black background color, red text color and a background image in the HTML of the page:

Of course, white.gif should be nothing more than a fully white image. So, most visitors would see red text on a white background, while those with background images turned off would see red text on a black background.

Now, let's suppose you were to create a CSS class that turns the text color to white:

Because the background image is white, a paragraph such as

But why are we setting the background color to black in the HTML? Well, we're simply placing a safeguard just in case we happen to encounter a very intelligent spider.

Comparing the HTML background color statement with the text color defined in CSS is hard for spiders, but not impossible. On the other hand, comparing the color of the background image with the CSS-defined text color is much, much harder.

With layers

The classic invisible text trick doesn't really hide anything, it just camouflages the text so that it doesn't stand out from the background. The more advanced solution is to use layers and position them off the chart:

Then use the following code in your HTML:

This trick doesn't make the text disappear, either. It just positions the text to a place where users with graphical browsers that support CSS won't be able to see it.

When using this trick, it's vital to remember that the negative values of "left" and "top" must exceed the positive values of "width" and "height". Simply put, "width: 132px; height: 85px" together with "left: -165px; top: -100px" is OK, "width: 132px; height: 85px" combined with "left: -100px; top: -75px" is not.

Invisible? You ain't seen nothing yet

Of course, the ultimate way of hiding something is making it non-existent. One CSS property, display, provides us with the power to do just that:

The "display: none" instructs the browser to render the document as if the above HTML tag and its contents did not even exist. Naturally, "display: none" isn't limited to the P tag, it can be used with all other HTML elements as well.

Minimize your risk

If you're planning on starting to seriously play with CSS tricks, I recommend that you only use external stylesheets that are linked from the HTML. Also, don't forget to create a robots.txt file that forbids spiders from grabbing the external CSS file. Although most spiders usually ignore external CSS files, some have on occasion requested them. It's better to be safe than sorry.

While the examples on this page use class selectors, you'd be wise to use HTML element selectors instead. Class selectors are an inferior solution for this purpose and I only chose to use them to make the examples easier to understand.