Style Sheets
  Home arrow Style Sheets arrow The Power of CSS
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Actuate Whitepapers 
VeriSign Whitepapers 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

The Power of CSS
By: Cliff Ritter
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 8
    2004-04-27

    Table of Contents:
  • The Power of CSS
  • Your CSS Code
  • CSS - Above and Beyond
  • Final Notes

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
    Iron Speed
     
    ADVERTISEMENT

    At the virtual BlackBerry Technical Seminar 2008, you can ask your development questions directly of Research In Motion® (RIM) experts, and take advantage of learning opportunities designed uniquely for BlackBerry solution developers. Register Today!

    The Power of CSS


    (Page 1 of 4 )

    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.

    More Style Sheets Articles
    More By Cliff Ritter


     

    STYLE SHEETS ARTICLES

    - Creating Gradients for Individual Containers...
    - Creating Gradients for Web Page Headers with...
    - SEO Scrolling Frames Problem Solved
    - Building Cross-Browser Background Effects wi...
    - CSS: Pseudo
    - Using PNG Images to Build Background Effects
    - CSS: Continuing the Clarification of CSS Cla...
    - CSS: Top Secret Classification
    - CSS: Dimensions
    - CSS: Margins and Padding
    - CSS: Crossing the Border
    - CSS: Text, Fonts, and Tables
    - CSS: Working with Text
    - CSS: Backgrounds
    - CSS for the Newbie


    Iron Speed





    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 3 hosted by Hostway