| CSS or cascading style sheets are used to | | | | really embedded right into your cascading |
| create a set of styles that can be applied to | | | | style sheet. Lets take the rollover button |
| your fonts, tables and most other attributes | | | | effect one step further. Suppose you want to |
| of your web page. These styles allow you to | | | | manipulate your web page code in a way that |
| create a much cleaner, faster web page that | | | | your relevant keyword phrase(s) appear at the |
| search engines love and also makes life much | | | | top of the page. With CSS, you have the |
| easier on the designer when global changes to | | | | ability to do this with ease. CSS allows you |
| these styles need to be applied. It is also | | | | not only to adjust font and color attributes, |
| always critical to always keep in mind your | | | | but you can also adjust the spacing and |
| target audience and the average internet | | | | alignment of certain elements on your web |
| connection speed these users have. By using | | | | page. So with this in mind, creating your |
| styles sheets to their full advantage, you | | | | table structure usingtags allows you to |
| can help keep your web page size down to a | | | | layout your page in a way that the search |
| minimum. | | | | engine spiders see your important, relevant |
| | | | keyword phrase(s) ahead of your tables and |
| When you sit down to think about the sitemap | | | | images. The next step is to incorporate your |
| and the navigational structure of your | | | | cascading style sheet so you can still use a |
| website, you should consider using cascading | | | | header designed using graphics, while placing |
| style sheets wherever possible. This includes | | | | your important keyword phrase(s) at the top |
| everything from your text attributes to your | | | | of your web page which search engines love. |
| table padding. Each page you create should be | | | | In your style sheet, add these two styles: |
| tailored around one or two keyword phrases in | | | | |
| order to maximize the relevancy of the | | | | #header{ width: 373px; height: 53px; |
| content being displayed to the various | | | | background-image: url(header.gif); |
| internet browsers surfing your website. Using | | | | background-repeat: no-repeat; color: f7f7f7; |
| this technique allows you to have a web page | | | | }h1{ text-indent: -100em; |
| which, in the search engines spiders view, | | | | margin:0px,0px,0px,0px; } |
| only contains html and keyword rich text. | | | | |
| | | | As you can see, in the #header style, we have |
| Let's use an example to illustrate the power | | | | included the dimensions of the image along |
| and capability of cascading style sheets. | | | | with including the image you want to serve as |
| | | | your header as the background for this style. |
| Graphic Buttons with Rollover: In the past | | | | Make sure you input the correct dimensions |
| we created rollover buttons using graphics | | | | for the header image. This needs to be |
| programs like Adobe Photoshop and/or | | | | accurate as the style sheet will only display |
| Macromedia Fireworks, and embedded them on | | | | what can fit in the outlined dimensions and |
| our web page with all the unfriendly code | | | | will also affect the spacing of your tables |
| that is needed for the rollover effect. The | | | | and web page. On the h1 style, we have |
| problem with doing this can be two-fold. | | | | indicated we do not want the text visible on |
| First, search engines prefer text links | | | | the web page, rather the header image we |
| because text is always optimal and you can | | | | created which is contained in the #header |
| also put your desired keywords in the text of | | | | style. We are able to do this by using the |
| the link, which can help boost your rankings. | | | | text-indent: -100em attribute of the h1 |
| Images are also seen as inferior to html, | | | | style. You also want to include the margin |
| since search engine spiders are not able to | | | | attribute so you avoid any unwanted spacing |
| scan images as effectively as plain text. | | | | underneath the text contained in thetag. |
| When you create navigation with graphical | | | | Then, on your actual web page, put your |
| buttons, you lose out on both of these | | | | keywords at the top of the page in antag and |
| benefits and risk having some of your web | | | | include the #header style. This is what your |
| pages not indexed by the search engine | | | | code should look like for the text you are |
| spiders. This is why well-optimized web pages | | | | trying to display as anwhile displaying only |
| have text links at the bottom of the page; | | | | the header graphic. ( |
| text makes it easier for search engines to | | | | |
| spider your site and compensate for the | | | | YOUR IMPORTANT KEYWORD PHRASE |
| primary navigation menu. | | | | |
| | | | ). This can give you a HUGE advantage when |
| CSS allows you to create these buttons | | | | trying to optimize a website for a very |
| without having any images visible on your | | | | competitive category and achieve top 10 |
| html code (which is where search engines | | | | search engine rankings by making your |
| spider). Furthermore, you can embed your | | | | keywords visible right at the top of the |
| desired keyword phrase(s) as the text for | | | | page, in antag, while actually displaying a |
| your links. Try these steps and you will see | | | | nice header graphic to the person browsing |
| how easy it is to simulate the rollover | | | | your website. Although many changes have |
| button effect, how much more effective your | | | | occurred in the last few weeks in terms of |
| web site will be for the desired targeted | | | | Yahoo! adopting their own search engine |
| keywords and how much faster your web page | | | | spider and listings, Google making the switch |
| will be to load. | | | | to geo targeting and the ever growing |
| | | | importance in maintaining quality, theme |
| Your CSS Code: In CSS you have the ability | | | | related link partners, the placement of your |
| to create a background image on a particular | | | | keywords is still an important factor in |
| style. Create your table with an individual | | | | adding to your search engine optimization and |
| cell for each link. In your CSS styles, you | | | | ranking success. |
| need to update the a:link and a:hover styles. | | | | |
| For the a:link, make the graphic you have | | | | Another good practice when designing web |
| created to act as your button and/or the | | | | pages using CSS is to make sure your web page |
| background image for that style. Then update | | | | conforms to W3 standards for both HTML and |
| the font attributes so the text will be | | | | CSS. This is critical in ensuring your |
| visible on top of the background image. On | | | | website works across all platforms and |
| the a:hover style, put the over state of the | | | | browsers and also helps to ensure ALL search |
| button as the background of that style and | | | | engine spiders can index your site easily and |
| update the font attributes so you can see the | | | | effectively. There really is nothing worse |
| text on the page. This is what your actual | | | | then directing a few hundred hits per day in |
| CSS code should look like for the a:link and | | | | search engine traffic and having 50% of those |
| a:hover styles:a:link{ font-family: Verdana, | | | | people unable to view your website because of |
| Arial, Helvetica, sans-serif; font-style: | | | | poor coding, corrupted style sheets or broken |
| normal; font-variant: normal; | | | | links. Always test your web site and have a |
| text-decoration: underline; color: #000000; | | | | friend navigate through your website both on |
| font-weight: bold; width: 175px; height: | | | | a MAC and PC to ensure there are in fact no |
| 100px; background-image: url(images | | | | broken links and all pages are easily |
| home-button.gif); background-repeat: | | | | accessible and error free. |
| no-repeat; }a:hover{ font-family: Verdana, | | | | |
| Arial, Helvetica, sans-serif; font-style: | | | | The power of cascading style sheets is |
| normal; font-variant: normal; | | | | incredible. The above example only scratches |
| text-decoration: underline; color: #006699; | | | | the surface of how much you can do for your |
| font-weight: bold; width: 175px; height: | | | | page in terms of accessibility, |
| 100px; background-image: url(images | | | | functionality, speed and clean html. You can |
| home-button-over.gif); background-repeat: | | | | adjust your scrollbar, background image, and |
| no-repeat; } | | | | even the padding of your tables all in your |
| | | | style sheet. The only key is that you create |
| This effect creates the perception of a | | | | an external css and link it from the web page |
| rollover image. To site visitors, it will | | | | using those styles file ( ). This way, you |
| appear to be a regular rollover button | | | | don't add any cumbersome code on your page |
| created out of two graphics. The only | | | | that will risk confusing the search engine |
| difference is your cascading style sheet | | | | spiders and use CSS to its full advantage. |
| contains the images for both states of the | | | | |
| link. This way when search engine spiders | | | | By adjusting all these attributes in an |
| visit your website, they will only see clean | | | | externally linked css file, you are keeping |
| html code - without any images used for | | | | your web page small in physical size along |
| navigation - and your keyword-rich text. As | | | | with ensuring good clean html code which as |
| well, your web page should load much faster | | | | we have mentioned above, search engine |
| and be compatible with anyone still using an | | | | spiders love! As well, css makes life MUCH |
| old dial-up connection. | | | | easier on the web designer when future |
| | | | updates need to be made. It is far more |
| CSS Above and Beyond: With cascading style | | | | efficient to manage a website using cascading |
| sheets, as outlined above, you can create the | | | | style sheets then one that contains good old |
| perception to the user that images are | | | | font tags. |
| present on the actual page when they are | | | | |