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-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;
}
a:hover{
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.
Next: CSS - Above and Beyond >>
More Style Sheets Articles
More By Cliff Ritter
/ 8 
