Technical level: Basic/Beginner || Date: 18th April
2003 || Author: Nigel Peck
This article is based on part of a larger book 'Website
Findability' by Michael Heraghty.
Cascading Style Sheets (CSS) are used to separate
the stylistic elements of a page such as layout, colour
and fonts from the content of the page such as paragraphs
and images. We call this Separation of Content from
Presentation.
If you don't understand CSS at all then you may decide
not to use it for your site. However I would suggest
that the advantages to be gained from using CSS, not
just for Google, are well worth the time invested
in learning it. For an introduction to CSS see CSS
Is Easy by Kevin Yank or see the many other quality
articles over at SitePoint's CSS Section.
So why is CSS good for Google?
>>
CSS allows for smaller file sizes
>>
CSS allows you greater control of page structure
>>
CSS allows you to hide certain content from browsers
while it still gets picked up by Google
CSS allows for smaller file sizes
By taking styles out of the HTML page and putting it
into a standalone (imported) style sheet (.css file),
you can reduce the overall amount of code in your web
pages. Pages with less code have smaller file sizes
and Google prefers pages with smaller file sizes (many
other search engines do too).
Though Google doesn't offer specific advice on this
matter, the search engine optimisation community is
generally agreed that 100KB is a good upper limit
for page sizes.
CSS allows you greater control of page structure
CSS allows you to structure your document according
to HTML standards without comprimising the look-and-feel
of the page.
Google rewards pages that are well structured, though
many designers choose to ignore standards and guidelines
as much as possible, because they (incorrectly) believe
standards lead to bland pages. Using CSS, designers
can create attractive pages with much flair, while
adhering to the findability design principles identified
in the book (yes you'll have to buy it to get more!).
CSS allows you to hide content from browsers
while it still gets picked up by Google
Using CSS you can hide content from certain browsers
in certain situations. For example you may have some
content that you only want to appear in print, or
you may want certain content to only be shown on screen
and not in print (such as page navigation). The advantage
is that Google will still index all of the content
and you will still get the benefit that content brings.
For an example of this technique see my article Random
Content Rotation.
Browser Compatibility
If you are new to CSS, be aware that different browsers
still interpret CSS standards in different ways, while
some (very) old browsers don't read CSS at all. Ensure
that your CSS is as cross-browser compatible as possible,
and that your HTML pages look acceptable even without
CSS.
Resources
There are many useful resources for those seeking
to learn more about the effective use of CSS. A useful
place to start is Glish.com or SitePoint (mentioned
above).
Good books on CSS include "Eric Meyer on CSS"
by Eric Meyer, and "Designing with Web Standards"
by Jeffrey Zeldman.
