Luca Vassalli's Website - Home page



2.Ethical SEO

3.Spider's view

4.SEO spam

5.General topics


4.4 CSS tricks

CSS, like JavaScript, has a legal side and a dark one. The legal side is when you use CSS to set the layout of a page or the used font for the website. The dark one is when you hide in various ways the text in the page; you make the italic or bold text look normal or resize the <h1> heading. The reason you should use CSS tricks is the same that leads to use cloaking: what is appreciate by search engines often is ugly for the human reader. Instead of having two different versions of the same page, as using cloaking, you will have just one version where some optimizations are invisible to the readers.

The most famous way to use CSS is to hide text. The text contains important keywords that may be difficult place inside the page producing a meaningful content. In order to hide the content, the background colour, or image, has to be of the same colour of the text. This is an example really difficult to spot:
<BODY BGCOLOR=black TEXT=red BACKGROUND="white.gif">
We set with an HTML tag the colour of the background, the colour of the text and an image. The image will have a white background but its name will be something different from"white.gif", I called it in that way to help to understand the example.
Then we use a CSS to turn the text colour to white:
.adjust {color: white}
Finally we add a paragraph were we use the defined style:
<P class="adjust">Keywords invisible for readers</P>
If a spider is clever, it may compare the background colour with the text colour set in the CSS, in this case white with black, but comparing the colour of the background image with the CSS-defined text colour is much harder.

Another way to hide text is using layers. In this example you will display out the chart the keywords rich text:
.position {position: absolute; width: 200px; height: 95px; z-index:3; left: -250px; top: -110px; visibility: visible }
Then put in the HTML page:
<DIV class="position">A very keywords rich text</DIV>
In this trick since the negative value is superior to the dimension of the chart, the text is positioned to a place where users, with graphical browsers that support CSS, will not be able to see it.

CSS can also be used to resize the dimension of headings. In the text you use lots of <h1> headings so that the spider considers more important the words inside, and then you make them imitating normal text.
H1.type { font-size: 100% ; font-weight: normal; font-style: normal }
<H1 class="type">write here keywords which appear of normal dimension</H1>
The same can be done with bold or italic. .style { font-weight: normal; font-style: normal }
<B class="style">fake bolded text</B>
<I class="style">fake italic text</I>