CSS or cascading style sheets are used to create a set of stylesthat can be applied to your fonts, tables and most otherattributes of your web page. These styles allow you to create amuch cleaner, faster web page that search engines love and alsomakes life much easier on the designer when global changes tothese styles need to be applied. It is also always critical toalways keep in mind your target audience and the averageinternet connection speed these users have. By using stylessheets to their full advantage, you can help keep your web pagesize down to a minimum.
When you sit down to think about the sitemap and thenavigational structure of your website, you should considerusing cascading style sheets wherever possible. This includeseverything from your text attributes to your table padding. Eachpage you create should be tailored around one or two keywordphrases in order to maximize the relevancy of the content beingdisplayed to the various internet browsers surfing your website.Using this technique allows you to have a web page which, in thesearch engines spiders view, only contains html and keyword richtext.
Let's use an example to illustrate the power and capability ofcascading style sheets.
Graphic Buttons with Rollover: In the past we createdrollover buttons using graphics programs like Adobe Photoshopand/or Macromedia Fireworks, and embedded them on our web pagewith all the unfriendly code that is needed for the rollovereffect. The problem with doing this can be two-fold. First,search engines prefer text links because text is always optimaland you can also put your desired keywords in the text of thelink, which can help boost your rankings. Images are also seenas inferior to html, since search engine spiders are not able toscan images as effectively as plain text. When you createnavigation with graphical buttons, you lose out on both of thesebenefits and risk having some of your web pages not indexed bythe search engine spiders. This is why well-optimized web pageshave text links at the bottom of the page; text makes it easierfor search engines to spider your site and compensate for theprimary navigation menu.
CSS allows you to create these buttons without having any imagesvisible on your html code (which is where search enginesspider). Furthermore, you can embed your desired keywordphrase(s) as the text for your links. Try these steps and youwill see how easy it is to simulate the rollover button effect,how much more effective your web site will be for the desiredtargeted keywords and how much faster your web page will be toload.
Your CSS Code: In CSS you have the ability to create abackground image on a particular style. Create your table withan individual cell for each link. In your CSS styles, you needto update the a:link and a:hover styles. For the a:link, makethe graphic you have created to act as your button and/or thebackground image for that style. Then update the font attributesso the text will be visible on top of the background image. Onthe a:hover style, put the over state of the button as thebackground of that style and update the font attributes so youcan see the text on the page. This is what your actual CSS codeshould look like for the a:link and a:hover styles:
This effect creates the perception of a rollover image. To sitevisitors, it will appear to be a regular rollover button createdout of two graphics. The only difference is your cascading stylesheet contains the images for both states of the link. This waywhen search engine spiders visit your website, they will onlysee clean html code - without any images used for navigation -and your keyword-rich text. As well, your web page should loadmuch faster and be compatible with anyone still using an olddial-up connection.
CSS Above and Beyond: With cascading style sheets, asoutlined above, you can create the perception to the user thatimages are present on the actual page when they are reallyembedded right into your cascading style sheet. Lets take therollover button effect one step further. Suppose you want tomanipulate your web page code in a way that your relevantkeyword phrase(s) appear at the top of the page. With CSS, youhave the ability to do this with ease. CSS allows you not onlyto adjust font and color attributes, but you can also adjust thespacing and alignment of certain elements on your web page. Sowith this in mind, creating your table structure using
tags allows you to layout your page in a way that the searchengine spiders see your important, relevant keyword phrase(s)ahead of your tables and images. The next step is to incorporateyour cascading style sheet so you can still use a headerdesigned using graphics, while placing your important keywordphrase(s) at the top of your web page which search engines love.In your style sheet, add these two styles:
As you can see, in the #header style, we have included thedimensions of the image along with including the image you wantto serve as your header as the background for this style. Makesure you input the correct dimensions for the header image. Thisneeds to be accurate as the style sheet will only display whatcan fit in the outlined dimensions and will also affect thespacing of your tables and web page. On the h1 style, we haveindicated 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 themargin attribute so you avoid any unwanted spacing underneaththe text contained in the
tag. Then, on your actual webpage, put your keywords at the top of the page in an
tagand include the #header style. This is what your code shouldlook like for the text you are trying to display as an
while displaying only the header graphic. (
YOURIMPORTANT KEYWORD PHRASE
). This can give you a HUGEadvantage when trying to optimize a website for a verycompetitive category and achieve top 10 search engine rankingsby making your keywords visible right at the top of the page, inan
tag, while actually displaying a nice header graphic tothe person browsing your website. Although many changes haveoccurred in the last few weeks in terms of Yahoo! adopting theirown search engine spider and listings, Google making the switchto geo targeting and the ever growing importance in maintainingquality, theme related link partners, the placement of yourkeywords is still an important factor in adding to your searchengine optimization and ranking success.
Another good practice when designing web pages using CSS is tomake sure your web page conforms to W3 standards for both HTMLand CSS. This is critical in ensuring your website works acrossall platforms and browsers and also helps to ensure ALL searchengine spiders can index your site easily and effectively. Therereally is nothing worse then directing a few hundred hits perday in search engine traffic and having 50% of those peopleunable to view your website because of poor coding, corruptedstyle sheets or broken links. Always test your web site and havea friend navigate through your website both on a MAC and PC toensure there are in fact no broken links and all pages areeasily accessible and error free.
The power of cascading style sheets is incredible. The aboveexample only scratches the surface of how much you can do foryour page in terms of accessibility, functionality, speed andclean html. You can adjust your scrollbar, background image, andeven the padding of your tables all in your style sheet. Theonly key is that you create an external css and link it from theweb page using those styles file ( ). This way, you don't add anycumbersome code on your page that will risk confusing the searchengine spiders and use CSS to its full advantage.
By adjusting all these attributes in an externally linked cssfile, you are keeping your web page small in physical size alongwith ensuring good clean html code which as we have mentionedabove, search engine spiders love! As well, css makes life MUCHeasier on the web designer when future updates need to be made.It is far more efficient to manage a website using cascadingstyle sheets then one that contains good old font tags.
This article is written by Cliff Ritter and Copyright of Logical Sense SEOServices.
