Vyoms OneStopTesting.com - Testing EBooks, Tutorials, Articles, Jobs, Training Institutes etc.
OneStopGate.com - Gate EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopMBA.com - MBA EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopIAS.com - IAS EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopSAP.com - SAP EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopGRE.com - of GRE EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
Bookmark and Share Rss Feeds

The Power of CSS | Articles | Recent Articles | News Article | Interesting Articles | Technology Articles | Articles On Education | Articles On Corporate | Company Articles | College Articles | Articles on Recession
Sponsored Ads
Hot Jobs
Fresher Jobs
Experienced Jobs
Government Jobs
Walkin Jobs
Placement Section
Company Profiles
Interview Questions
Placement Papers
Resources @ VYOMS
Companies In India
Consultants In India
Colleges In India
Exams In India
Latest Results
Notifications In India
Call Centers In India
Training Institutes In India
Job Communities In India
Courses In India
Jobs by Keyskills
Jobs by Functional Areas
Learn @ VYOMS
GATE Preparation
GRE Preparation
GMAT Preparation
IAS Preparation
SAP Preparation
Testing Preparation
MBA Preparation
News @ VYOMS
Freshers News
Job Articles
Latest News
India News Network
Interview Ebook
Get 30,000+ Interview Questions & Answers in an eBook.
Interview Success Kit - Get Success in Job Interviews
  • 30,000+ Interview Questions
  • Most Questions Answered
  • 5 FREE Bonuses
  • Free Upgrades


Wipro Technologies
Tata Consultancy Services
Cognizant Technologies

Home » Articles » The Power of CSS

The Power of CSS

Article Posted On Date : Saturday, May 23, 2009

The Power of CSS

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:

     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;
     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:

     width: 373px;
     height: 53px;
     background-image: url(header.gif);
     background-repeat: no-repeat;
     color: f7f7f7;
     text-indent: -100em;

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.

Sponsored Ads

Interview Questions
HR Interview Questions
Testing Interview Questions
SAP Interview Questions
Business Intelligence Interview Questions
Call Center Interview Questions


Clipper Interview Questions
DBA Interview Questions
Firebird Interview Questions
Hierarchical Interview Questions
Informix Interview Questions
Microsoft Access Interview Questions
MS SqlServer Interview Questions
MYSQL Interview Questions
Network Interview Questions
Object Relational Interview Questions
PL/SQL Interview Questions
PostgreSQL Interview Questions
Progress Interview Questions
Relational Interview Questions
SQL Interview Questions
SQL Server Interview Questions
Stored Procedures Interview Questions
Sybase Interview Questions
Teradata Interview Questions

Microsof Technologies

.Net Database Interview Questions
.Net Deployement Interview Questions
ADO.NET Interview Questions
ADO.NET 2.0 Interview Questions
Architecture Interview Questions
ASP Interview Questions
ASP.NET Interview Questions
ASP.NET 2.0 Interview Questions
C# Interview Questions
Csharp Interview Questions
DataGrid Interview Questions
DotNet Interview Questions
Microsoft Basics Interview Questions
Microsoft.NET Interview Questions
Microsoft.NET 2.0 Interview Questions
Share Point Interview Questions
Silverlight Interview Questions
VB.NET Interview Questions
VC++ Interview Questions
Visual Basic Interview Questions

Java / J2EE

Applet Interview Questions
Core Java Interview Questions
Eclipse Interview Questions
EJB Interview Questions
Hibernate Interview Questions
J2ME Interview Questions
J2SE Interview Questions
Java Interview Questions
Java Beans Interview Questions
Java Patterns Interview Questions
Java Security Interview Questions
Java Swing Interview Questions
JBOSS Interview Questions
JDBC Interview Questions
JMS Interview Questions
JSF Interview Questions
JSP Interview Questions
RMI Interview Questions
Servlet Interview Questions
Socket Programming Interview Questions
Springs Interview Questions
Struts Interview Questions
Web Sphere Interview Questions

Programming Languages

C Interview Questions
C++ Interview Questions
CGI Interview Questions
Delphi Interview Questions
Fortran Interview Questions
ILU Interview Questions
LISP Interview Questions
Pascal Interview Questions
Perl Interview Questions
PHP Interview Questions
Ruby Interview Questions
Signature Interview Questions
UML Interview Questions
VBA Interview Questions
Windows Interview Questions
Mainframe Interview Questions

Copyright © 2001-2021 Vyoms.com. All Rights Reserved. Home | About Us | Advertise With Vyoms.com | Jobs | Contact Us | Feedback | Link to Us | Privacy Policy | Terms & Conditions
Placement Papers | Get Your Free Website | IAS Preparation | C++ Interview Questions | C Interview Questions | Report a Bug | Romantic Shayari | CAT 2021

Fresher Jobs | Experienced Jobs | Government Jobs | Walkin Jobs | Company Profiles | Interview Questions | Placement Papers | Companies In India | Consultants In India | Colleges In India | Exams In India | Latest Results | Notifications In India | Call Centers In India | Training Institutes In India | Job Communities In India | Courses In India | Jobs by Keyskills | Jobs by Functional Areas

Testing Articles | Testing Books | Testing Certifications | Testing FAQs | Testing Downloads | Testing Interview Questions | Testing Jobs | Testing Training Institutes

Gate Articles | Gate Books | Gate Colleges | Gate Downloads | Gate Faqs | Gate Jobs | Gate News | Gate Sample Papers | Gate Training Institutes

MBA Articles | MBA Books | MBA Case Studies | MBA Business Schools | MBA Current Affairs | MBA Downloads | MBA Events | MBA Notifications | MBA FAQs | MBA Jobs
MBA Job Consultants | MBA News | MBA Results | MBA Courses | MBA Sample Papers | MBA Interview Questions | MBA Training Institutes

GRE Articles | GRE Books | GRE Colleges | GRE Downloads | GRE Events | GRE FAQs | GRE News | GRE Training Institutes | GRE Sample Papers

IAS Articles | IAS Books | IAS Current Affairs | IAS Downloads | IAS Events | IAS FAQs | IAS News | IAS Notifications | IAS UPSC Jobs | IAS Previous Question Papers
IAS Results | IAS Sample Papers | IAS Interview Questions | IAS Training Institutes | IAS Toppers Interview

SAP Articles | SAP Books | SAP Certifications | SAP Companies | SAP Study Materials | SAP Events | SAP FAQs | SAP Jobs | SAP Job Consultants
SAP Links | SAP News | SAP Sample Papers | SAP Interview Questions | SAP Training Institutes |

Copyright ©2001-2021 Vyoms.com, All Rights Reserved.
Disclaimer: VYOMS.com has taken all reasonable steps to ensure that information on this site is authentic. Applicants are advised to research bonafides of advertisers independently. VYOMS.com shall not have any responsibility in this regard.