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

Your CSS Code - Style Sheets

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.

TABLE OF CONTENTS:
  1. The Power of CSS
  2. Your CSS Code
  3. CSS - Above and Beyond
  4. Final Notes
By: Cliff Ritter
Rating: starstarstarstarstar / 38
April 27, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



 
 
>>> More Style-Sheets Articles          >>> More By Cliff Ritter
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

STYLE-SHEETS ARTICLES

- What is CSS?
- The Power of CSS
- Understanding Style Sheets (part 2)
- Understanding Style Sheets (Part 1)

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: