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