| ays, when everybody is interested in getting the | | | | faster. |
| highest rankings possible for their sites with the | | | | • Images can be set as backgrounds. They |
| search engines, it seems that the era of tables-based | | | | will load faster than images placed between HTML |
| web sites is getting closer and closer to its end. CSS | | | | tags. |
| programming appears to hold the upper hand in this | | | | • As opposed to tables, CSS needs less |
| race for SEO, and it gains more ground as its | | | | code, which means that browsers will read and |
| popularity increases. | | | | display page content faster than they would in the |
| What is CSS? | | | | case of tables-based pages. |
| Cascading Style Sheet is a web tool that can be | | | | 3. Faster update |
| utterly necessary if you want to give a professional, | | | | Since CSS brings forth a simplification of the code on |
| qualitative look to your site. It is recommended by | | | | each page, they are much faster to read and |
| W3C, who manages the standards for the Internet, | | | | changes can be performed easier. HTML code that |
| in order to add style (e.g. fonts, colors, spacing, | | | | needs to be modified is easier to track, and a simple |
| padding, alignment, etc.) to web documents. | | | | change in the presentation of an element in the CSS |
| The style sheet is more and more used presently | | | | file will reflect in all the pages where that particular |
| due to its usefulness and its advantages that are far | | | | element is present, without being necessary to |
| from minor: it mainly allows to dissociate the content | | | | update each and every page separately. |
| and the presentation of web pages, which makes | | | | 4. Increased browser compatibility |
| them compatible for various browsers, and also | | | | CSS-based web sites are compatible with PDA and |
| accessible to people with disabilities (who must use | | | | mobile phone browsers. Also, people with various |
| accessibility readers), to PDAs or to WAP. | | | | disabilities (mainly visual) use what are called |
| Benefits of Using CSS for SEO | | | | "accessibility readers", that translate the HTML code |
| Among the most common examples of CSS usage | | | | into various formats that contain no HTML tags. |
| there are the modification of the colors of hovered | | | | When translated, traditional, pure HTML stands many |
| links, text placement, establishing the spacing | | | | chances of being turned into something that does |
| between words, and the modification of border size | | | | not make much sense to the impaired visitor. CSS, on |
| and style. The style sheets can be inserted directly | | | | the other hand, properly combined with HTML, can |
| into the HTML code of each page, but they can also | | | | render useless the elimination of the HTML tags, and |
| be written on a different page, in an external file | | | | therefore make the reorganization of the content for |
| (.css). | | | | readability unnecessary. |
| This second solution is by far the best one, primarily | | | | 5. Higher rankings with the search engines |
| because it holds undeniable advantages such as: | | | | CSS improves the readability of your pages. Search |
| • The HTML code on each page is much | | | | engines spider will be able to index your pages much |
| cleaner | | | | faster, as the important information can be placed |
| • The CSS file is cached from the very | | | | higher in the HTML document. Also, the amount of |
| beginning, and this speeds up the load time for the | | | | relevant content will be greater than the amount of |
| next pages | | | | code on a page. |
| • The update process can be performed | | | | The search engine will not have to look too far in |
| much faster: it suffices to modify a single file to | | | | your code to find the real content. You will be |
| change the entire site, no matter the number of its | | | | actually serving it to the spiders "on a platter". CSS |
| pages. | | | | will help you create highly readable pages, rich in |
| It is quite easy to see the close connection between | | | | content, which will prove extremely helpful in your |
| search engine optimization and CSS. Style sheets will | | | | SEO campaign. As you very well know, better site |
| help you decrease the file size of your web pages, | | | | ranking means better visibility on the web, and this |
| and will give you the opportunity to use more text | | | | can translate into more visitors and, ultimately, into |
| and links than regular HTML, without being constantly | | | | increased sales or number of contracts. |
| afraid of spamming the search engines. | | | | The Caveat of CSS |
| Here is what you can achieve with CSS: | | | | CSS and SEO make a good pair when it comes to |
| 1. Reduced file-size | | | | potentially gaining more income, based on a clean, |
| While "traditional" HTML is overcharged with tags that | | | | well-built web site. Nevertheless, there is a very |
| offer to search engine spiders both the content and | | | | important matter that you should consider when |
| the presentation on the same page, CSS actually | | | | using CSS in order to optimize your web site: never |
| allows you to clean up your code and separate these | | | | use CSS in order to hide text. |
| two. | | | | It is quite common practice to attempt to offer |
| By including the styling of the text in a separate file, | | | | different versions of text on a web page: one that is |
| you can dramatically decrease the file-size of your | | | | harder to read - to spiders, and a friendlier one - to |
| pages. Also, the content-to-code ratio is far greater | | | | human web readers. Most of the times, search |
| than with simple HTML pages, thus making the page | | | | engines will perceive this as cloaking, and even if it's |
| structure easier to read for both the programmer | | | | made with the best intentions in mind, it could actually |
| and the spiders. | | | | pass as spamming. Consequently, your site can be |
| It is also possible to avoid using JavaScript for | | | | penalized and even banned for such practices. |
| rollovers and mouseovers. With CSS you can define | | | | Conclusions |
| the visual effect that you want to apply to images, | | | | The bottom line would be that CSS is much easier to |
| instead of using images per say. The space you gain | | | | understand and to optimize than simple HTML. It |
| this way can be used for text that is relevant for | | | | simplifies both the work of the SEO professional, as |
| spiders (i.e. keywords), and you will also lower the | | | | well as that of the programmer. CSS programming |
| file-size of the page. | | | | means providing the site with the ability of faster |
| 2. Less load time | | | | updates in the future, of faster information transfer, |
| If you have a web site with lots of traffic, | | | | and brings along the advantage of a simple code for |
| slow-loading pages will not make your life easier. The | | | | search engines. |
| benefit of having low file-size pages translates into | | | | If we think only about the fact that keywords can |
| reduced bandwidth costs. | | | | be highlighted on a page without negatively affecting |
| CSS can help you save some money by offering you | | | | its look, the page file-size decreases, the code |
| the following advantages: | | | | becomes cleaner and more readable, and the |
| • If the presentation information is placed in | | | | bandwidth costs are diminished by lowering the page |
| an external CSS file, this will be accessed only once, | | | | load time, then it would be safe to say that there is |
| when the homepage is loaded. The CSS file will be | | | | virtually no limit in the series of advantages of using |
| cached on the user's computer, and the other pages | | | | CSS in SEO campaigns. |
| of the site, that use the same CSS file, will load much | | | | |