I was asked recently how to use CSS to format links on a web page. This is a very basic introductory tutorial. There are many additional features one can use to spice up your buttons, but this will get you started.
In this brief tutorial, I define how I want my links to appear via CSS (white text with no underline), then I define how I want the links to behave when ‘rolled over’ (text changes to gold, with a navy background).
Here is the code to define those behaviors:
#navbar a:link, a:visited {
color: #FFF;
text-decoration: none;
}
#navbar a:hover {
color: #FC0;
background-color: #036;
}
I make these behaviors specific to a section on my page (within the navbar area). If I wanted the links to take on these attributes for the entire page, I would eliminate the ‘#navbar’ in front of each of these styles.
Within the CSS file, I:
- set up my entire page (it is a very basic page intentionally kept simple to focus on the links behavior),
- define the navbar area
- define the behavior for the links within the navbar area
If you are familiar with CSS, some additional attributes to consider using within the CSS styles to spice up your links might be:
background-image: (url/location of image)
font-family
font-size
font-variant (sometimes I use small caps)
If you have any questions/comments, feel free to respond. I’d love to hear from you.