The Power of CSS

CSS or cascading style sheets are used to create a set of styles that can be applied to your fonts, tables and most other attributes of your web page. These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much easier on the designer when global changes to these styles need to be applied. It is also always critical to always keep in mind your target audience and the average internet connection speed these users have. By using styles sheets to their full advantage, you can help keep your web page size down to a minimum.

When you sit down to think about the sitemap and the navigational structure of your website, you should consider using cascading style sheets wherever possible. This includes everything from your text attributes to your table padding. Each page you create should be tailored around one or two keyword phrases in order to maximize the relevancy of the content being displayed to the various internet browsers surfing your website. Using this technique allows you to have a web page which, in the search engines spiders view, only contains html and keyword rich text.

Let’s use an example to illustrate the power and capability of cascading style sheets.

Graphic Buttons with Rollover:
In the past we created rollover buttons using graphics programs like Adobe Photoshop and/or Macromedia Fireworks, and embedded them on our web page with all the unfriendly code that is needed for the rollover effect. The problem with doing this can be two-fold. First, search engines prefer text links because text is always optimal and you can also put your desired keywords in the text of the link, which can help boost your rankings. Images are also seen as inferior to html, since search engine spiders are not able to scan images as effectively as plain text. When you create navigation with graphical buttons, you lose out on both of these benefits and risk having some of your web pages not indexed by the search engine spiders. This is why well-optimized web pages have text links at the bottom of the page; text makes it easier for search engines to spider your site and compensate for the primary navigation menu.

CSS allows you to create these buttons without having any images visible on your html code (which is where search engines spider). Furthermore, you can embed your desired keyword phrase(s) as the text for your links. Try these steps and you will see how easy it is to simulate the rollover button effect, how much more effective your web site will be for the desired targeted keywords and how much faster your web page will be to load.

Your CSS Code:
In CSS you have the ability to create a background image on a particular style. Create your table with an individual cell for each link. In your CSS styles, you need to update the a:link and a:hover styles. For the a:link, make the graphic you have created to act as your button and/or the background image for that style. Then update the font attributes so the text will be visible on top of the background image. On the a:hover style, put the over state of the button as the background of that style and update the font attributes so you can see the text on the page. This is what your actual CSS code should look like for the a:link and a:hover styles:

a:link{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
text-decoration: underline;
color: #000000;
font-weight: bold;
width: 175px;
height: 100px;
background-image: url(images/home-button.gif);
background-repeat: no-repeat;
}

a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
text-decoration: underline;
color: #006699;
font-weight: bold;
width: 175px;
height: 100px;
background-image: url(images/home-button-over.gif);
background-repeat: no-repeat;
}

This effect creates the perception of a rollover image. To site visitors, it will appear to be a regular rollover button created out of two graphics. The only difference is your cascading style sheet contains the images for both states of the link. This way when search engine spiders visit your website, they will only see clean html code – without any images used for navigation – and your keyword-rich text. As well, your web page should load much faster and be compatible with anyone still using an old dial-up connection.

CSS Above and Beyond:
With cascading style sheets, as outlined above, you can create the perception to the user that images are present on the actual page when they are really embedded right into your cascading style sheet. Lets take the rollover button effect one step further. Suppose you want to manipulate your web page code in a way that your relevant keyword phrase(s) appear at the top of the page. With CSS, you have the ability to do this with ease. CSS allows you not only to adjust font and color attributes, but you can also adjust the spacing and alignment of certain elements on your web page. So with this in mind, creating your table structure using <DIV> tags allows you to layout your page in a way that the search engine spiders see your important, relevant keyword phrase(s) ahead of your tables and images. The next step is to incorporate your cascading style sheet so you can still use a header designed using graphics, while placing your important keyword phrase(s) at the top of your web page which search engines love. In your style sheet, add these two styles:

#header{
width: 373px;
height: 53px;
background-image: url(header.gif);
background-repeat: no-repeat;
color: f7f7f7;
}

h1{
text-indent: -100em;
margin:0px,0px,0px,0px;
}

As you can see, in the #header style, we have included the dimensions of the image along with including the image you want to serve as your header as the background for this style. Make sure you input the correct dimensions for the header image. This needs to be accurate as the style sheet will only display what can fit in the outlined dimensions and will also affect the spacing of your tables and web page. On the h1 style, we have indicated we do not want the text visible on the web page, rather the header image we created which is contained in the #header style. We are able to do this by using the text-indent: -100em attribute of the h1 style. You also want to include the margin attribute so you avoid any unwanted spacing underneath the text contained in the <h1> tag. Then, on your actual web page, put your keywords at the top of the page in an <h1> tag and include the #header style. This is what your code should look like for the text you are trying to display as an <h1> while displaying only the header graphic. (<h1 id=header>YOUR IMPORTANT KEYWORD PHRASE</h1>). This can give you a HUGE advantage when trying to optimize a website for a very competitive category and achieve top 10 search engine rankings by making your keywords visible right at the top of the page, in an <h1> tag, while actually displaying a nice header graphic to the person browsing your website. Although many changes have occurred in the last few weeks in terms of Yahoo! adopting their own search engine spider and listings, Google making the switch to geo targeting and the ever growing importance in maintaining quality, theme related link partners, the placement of your keywords is still an important factor in adding to your search engine optimization and ranking success.

Another good practice when designing web pages using CSS is to make sure your web page conforms to W3 standards for both HTML and CSS. This is critical in ensuring your website works across all platforms and browsers and also helps to ensure ALL search engine spiders can index your site easily and effectively. There really is nothing worse then directing a few hundred hits per day in search engine traffic and having 50% of those people unable to view your website because of poor coding, corrupted style sheets or broken links. Always test your web site and have a friend navigate through your website both on a MAC and PC to ensure there are in fact no broken links and all pages are easily accessible and error free.

The power of cascading style sheets is incredible. The above example only scratches the surface of how much you can do for your page in terms of accessibility, functionality, speed and clean html. You can adjust your scrollbar, background image, and even the padding of your tables all in your style sheet. The only key is that you create an external css and link it from the web page using those styles file ( <link href="your-style.css" rel="stylesheet" type="text/css"> ). This way, you don’t add any cumbersome code on your page that will risk confusing the search engine spiders and use CSS to its full advantage.

By adjusting all these attributes in an externally linked css file, you are keeping your web page small in physical size along with ensuring good clean html code which as we have mentioned above, search engine spiders love! As well, css makes life MUCH easier on the web designer when future updates need to be made. It is far more efficient to manage a website using cascading style sheets then one that contains good old font tags.