SEO Benefits Of CSS

Posted by Anonymous | 10:45 PM | | 0 comments »

Like many other web designers, I began laying out web pages using graphical tools and discovered the wonders of tables for layout without anyone telling me to use them. Since browser support for CSS Is better than it used to be, and tables cause problems, CSS offers you a benefit you may not have thought about before, the benefit of better SEO.

I want to say right away that quality content should be your highest priority, not SEO tricks. The advice given here will help you get better search engine results because the key to real SEO begins with good page structure and organizing your content . By understanding how search engines "see" your pages, you can build better page structure.

Search engines use what is called "top down" logic in looking at web pages. They look at your code, not the visual display that users see. Human eyes are drawn to the page content right away, even when there are other things on the page. Search engine robots do not see things the same way, but, they are logical and predictable once you understand them.

You have most likely seen search engine results that do not make sense because some obscure content gets displayed instead of the actual content of the page. I will illustrate top down logic so you can understand how to make CSS work for you.

In the mind of a search engine, the gist of your web page is determined first by what content is at the top of the page. If you start with certain words, they appear often throughout the page, and then again at the bottom so it is essentially your closing point, that, in the automated brains of a search engine is what your page is about.

Your well trained eyeballs will probably look for a title, then read the content; so to you, this is the top down logic of the page. Read your HTML code from the top down. You may be surprised how far you have to scroll before you get to the real content, and, how much other "content" a search engine will see first. If you use tables for layout, the top down logic of your code looks like it has the legs cut off and the place settings are on the floor.

Using CSS, you can organize your code so the search engines see your real content first regardless of where it appears on the page.

It has been almost ten years since CSS was first introduced to the World Wide Web and till today, Web developers and designers have not ceased to sing its praises. CSS, which stands for Cascading Style Sheets, is a stylesheet language which has been sort of a revelation for both, Web developers and designers alike. The reason for this is apparent - CSS has made Web design so much simpler by separating document structure from style. A simple process nonetheless, but the benefits reaped are profound, as you'll soon see.
As a stylesheet language, CSS requires a document written in markup language to perform its tasks. The best known markup language today is HTML, short for HyperText Markup Language. Almost everybody who has ever used the Internet has heard of HTML, even if they aren't professional Web designers. Every webpage is powered by this language and variants of it.

But, if you had been an early adopter of the Web back in the early 90s, you can attest to the fact that HTML was really bare-boned. Reason being, it was originally conceived to describe only parts of a document and had very little concern for appearance and presentation. Then came Mosaic and HTML was forced to evolve into something more than just a structural markup language due to the increasing demands for better web presentations.

Web developers and designers were clamoring for HTML to contribute more functionality like boldfacing and italicizing texts, something HTML wasn't equipped to do. But that didn't stop HTML from introducing new elements like and into its language in an attempt to satisfy the masses. The results as expected, were frustrating.

Websites were being built with extraneous HTML elements at the expense of useful content, which presented a few considerable issues, mainly, unstructured Web pages. Unstructured Web pages made and still make content indexing in search engines very grueling and this was certainly something that Web businesses seeking coveted high search engine rankings were concerned about.
What may appear to be an innocuous tag used in place of a H1 tag for page titles, can have disastrous consequences as far as search engine optimization is concerned. This can mean the difference between attaining the number one spot on Google's front page, or not being indexed at all, something that in today's new economics of commerce, can either make or break a business.

But just when website owners were resigned to the fact of having to cope with bloated HTML code on their sites, CSS presents itself with aplomb. Though it made its grand entrance onto the World Wide Web in 1996, CSS is only now starting to be recognized by the masses as a necessary element of any Web design process. Here's why.

CSS removes the presentational markup burden that HTML had to carry and allows HTML to perform what it does best - structural markup. So, what CSS does is create a much richer document appearance by separating presentation and structure. This is a sample of what CSS is capable of:
  • Allows you to define the color on text
  • Allows you to define the color of any element
  • Gives you control over spacing of elements
  • Allows you to create borders around elements
  • Gives you control over the presentational style of texts. You can very easily capitalize, italicize, bold, underline, or space texts as you see fit.
Perhaps the most telling contribution of CSS is the amount of time it saves a Web designer. Where in HTML, a Web designer had to explicitly describe the presentational attributes, often repeatedly throughout the document, CSS only requires a separate stylesheet. This stylesheet acts as the centralized command center for the entire document's styles. This also makes it extremely easy for a website owner to make changes to his or her site without having to trouble the designer for a simple tweak in heading color.

This is also a huge advantage for website owners who manage large content-based sites of over a thousand pages. Because this single stylesheet can be applied to multiple pages simply by linking it, a website owner can achieve a very consistent look throughout the website and make changes to thousands of pages by editing only a single line on the stylesheet. Without CSS, this process would have necessitated a visit to every single one of those thousand or more pages to make that simple edit. Now you see why Web designers are so fond of CSS.

This element of a single stylesheet has also allowed websites to become much smaller in size, having been stripped of all that bloated code that HTML was once guilty of serving. Lighter weight websites mean faster download and loading speeds for Web users, which can only mean that it'll only be a matter of time before they too join in with Web designers in the song of praise for CSS.

The rapid development of internet has result in constant advancement in web designing and coding. HTML has emphasized more the content of a web page rather than its aesthetics. However, times have changes and immaculate web design is a key to a website's reach and popularity. CSS has now become a key element which addresses the presentation of websites.

The idea of CSS stems from the need of eliminating the frequent use of similar tags in HTML while on the same page. The initial idea was to have one file which will define all the values for the repetitive similar tags. All the other ensuing pages could then check this single file and get formatted accordingly. This would result in lesser work load and HTML coders can leave out a majority of formatting tags in HTML. They can focus on using structural elements link paragraphs, links etc.

What It Stands for?

CSS stands for Cascading Style Sheets. These style sheets works as an accomplice to HTML coding by addressing the issues of color, font, layout and even the entire look and feel of the website. To change a look of a particular website, all that is needed is to modify the single CSS file and every concerned HTML page will automatically display in a different manner. This makes website maintenance quick and easy.

The List of Benefits

CSS has made the entire process of coding and recoding faster and easier. It takes the hassle of defining and redefining the same things on every HTML page. The benefits of CSS translate into these:

  •  With the use of CSS, web pages take lesser time to download. The time gets reduced by as much as 50% in some cases.
  • HTML coders now have to type less code and the web pages are concise and look better.
  • CSS helps in maintaining a consistent look of the entre website as the pages read from a single style sheet.
  • The amount of errors while coding gets reduced dramatically as coders do not have to type the same code many times over.
  • Site maintenance and updating the website's design is much easier.
Ushering the Future

CSS can prove to be difficult for beginners. If one urgently needs to convert PSD to CSS or other services like table-less XHTML, XHTML slicing among others, it is better to seek professional help. However, the effort of leaning it is more than worth it as it is a well designed and neat language. It is a key element in the development of future design and has been a welcome change from the days when coders would have to contend with frequent usage of presentational HTML tags.

CSS provides for greater accessibility and visibility of a website's content. It facilitates the working of the website in many of the popular browsers and even provides for website access through devices like PDAs etc. It also comes with many powerful formatting options and presents vast possibilities which were missing in the case of HTML.