Talk:Cascading Style Sheets/Background

Nainaputhur Maheshkumar.v

Building a CSS menu:

Here is another useful way to use classes. Lets make a menu using only CSS and a table that has rollover effects. We are going to set up a special class just for the links in the menu. Why? Because you wouldn’t want the text links in a sentence to look like the ones in your menu.

We will call our menu class, “navlink.” We will use 3 standard selectors to define it, a:link, a:visited and a:hover. We will define these links just as we did in Lesson 2, but with a few more properties to add the rollover effects, and our new class at the beginning.

Let’s get started. Add this to a style sheet:

.navlink a:link { font-family: Verdana, Geneva; font-size : 80%; font-weight : bold; color: #000000; text-decoration : none; padding: 5px; margin: 5px; border : 1px outset gray; display: block; width: 100%; }

.navlink a:visited { font-family: Verdana, Geneva; font-size : 80%; font-weight : bold; color: #000000; text-decoration : none; padding: 5px; margin: 5px; border : 1px outset gray; display: block; width: 100%; }

.navlink a:hover { font-family: Verdana, Geneva; font-size : 80%; font-weight : bold; color: #000000; text-decoration : none; padding: 5px; margin: 5px; border : 1px inset black; display: block; background-color : #FFFFFF; width: 100%; }

The new properties we added to the link selectors are:

padding: 5px; margin: 5px; border : 1px outset gray; border : 1px inset black; display: block; background-color : #FFFFFF;