Home arrow Style Sheets arrow Page 2 - The Power of CSS
STYLE SHEETS

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.

Author Info:
By: Cliff Ritter
Rating: 4 stars4 stars4 stars4 stars4 stars / 8
April 27, 2004
TABLE OF CONTENTS:
  1. · The Power of CSS
  2. · Your CSS Code
  3. · CSS - Above and Beyond
  4. · Final Notes

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
The Power of CSS - Your CSS Code
(Page 2 of 4 )

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:


a:link{
 font
-familyVerdanaArialHelveticasans-serif;
 font
-stylenormal;
 font
-variantnormal;
 text
-decorationunderline;
 color
#000000;
 font-weight: bold;
width: 175px;
 height: 100px;
 background-image: url(images/home-button.gif);
 background-repeat: no-repeat;
 }
 
a:hover{
 font
-familyVerdanaArialHelveticasans-serif;
 font
-stylenormal;
 font
-variantnormal;
 text
-decorationunderline;
 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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials