justlivyalife
November 24 '03, 05:16 PM
Creating Rollover Links using CSS - An Introduction
This basic introdcution to CSS Rollover Links explains the basics of implementing the styles into your own webpage, while explaining some of the complicated Jargon on the way.
When you create a basic stylesheet, it will look something similar to this, just containing your 'link' properties.
<style type="text/css">
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600 ;
font-weight: normal;
text-decoration: none;
}
</style> So that you can understand what each line means, here is a little Jargon buster:
"font-family:" - This line contains information on a variety of fonts that can be used. The system automatically goes through each of the fonts until it finds a chosen font on the users system.
"font-size:" - This indicates what size the font needs to be. It can either be determined in 'px' (pixels), or 'pt' (points).
"color:" This indicates what colour the links will be on the web page.
"font-weight:" - This indicates whether you want the links emboldened or not. To have bold links, change 'normal;' to 'bold;'
"text-decoration:" - This indicates a variety of options, however it is more commonly used to unndicatee whether you want underlined links or not. If you do, change 'none;' to 'underlined;'.
To add rollover properties to this stylesheet, we just need to add the following code to our '<style>' tag:a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF ;
font-weight: normal;
text-decoration: none;
}This code will change links on the web page from orange to blue upon rollover
Creating Multiple Link Styles on one page
Following on from the basics, above, I now explain how to simply include two different link styles in your webpages.
We already have the following coding from above:<style type="text/css">
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600 ;
font-weight: normal;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF ;
font-weight: normal;
text-decoration: none;
}
</style>To enable us to include two different link styles in our webpages, it is not neccesary for us to name this default style, however, in this instance, it is simpler for us to do so. For example purposes, we will call this style 'link1'. To enable us to set it using 'class=' properties, we add a "." before the name, so the class is now called '.link1', like so:<style type="text/css">
.link1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600 ;
font-weight: normal;
text-decoration: none;
}
.link1:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF ;
font-weight: normal;
text-decoration: none;
}
</style>From this, we can duplicate the set of properties, so get a different link, which underlines and emboldens the hyperlink upon rollover. We'll call this style '.link2'.<style type="text/css">
.link1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600 ;
font-weight: normal;
text-decoration: none;
}
.link1:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000 ;
font-weight: normal;
text-decoration: none;
}
.link2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000 ;
font-weight: normal;
text-decoration: none;
}
.link2:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000 ;
font-weight: bold;
text-decoration: underline;
}
</style>And there we have it, all you need to do now is, to assign the style to certain links, add the property 'class="link2" ', or 'class="link1" ' to the "<a href>" property.
This basic introdcution to CSS Rollover Links explains the basics of implementing the styles into your own webpage, while explaining some of the complicated Jargon on the way.
When you create a basic stylesheet, it will look something similar to this, just containing your 'link' properties.
<style type="text/css">
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600 ;
font-weight: normal;
text-decoration: none;
}
</style> So that you can understand what each line means, here is a little Jargon buster:
"font-family:" - This line contains information on a variety of fonts that can be used. The system automatically goes through each of the fonts until it finds a chosen font on the users system.
"font-size:" - This indicates what size the font needs to be. It can either be determined in 'px' (pixels), or 'pt' (points).
"color:" This indicates what colour the links will be on the web page.
"font-weight:" - This indicates whether you want the links emboldened or not. To have bold links, change 'normal;' to 'bold;'
"text-decoration:" - This indicates a variety of options, however it is more commonly used to unndicatee whether you want underlined links or not. If you do, change 'none;' to 'underlined;'.
To add rollover properties to this stylesheet, we just need to add the following code to our '<style>' tag:a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF ;
font-weight: normal;
text-decoration: none;
}This code will change links on the web page from orange to blue upon rollover
Creating Multiple Link Styles on one page
Following on from the basics, above, I now explain how to simply include two different link styles in your webpages.
We already have the following coding from above:<style type="text/css">
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600 ;
font-weight: normal;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF ;
font-weight: normal;
text-decoration: none;
}
</style>To enable us to include two different link styles in our webpages, it is not neccesary for us to name this default style, however, in this instance, it is simpler for us to do so. For example purposes, we will call this style 'link1'. To enable us to set it using 'class=' properties, we add a "." before the name, so the class is now called '.link1', like so:<style type="text/css">
.link1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600 ;
font-weight: normal;
text-decoration: none;
}
.link1:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000FF ;
font-weight: normal;
text-decoration: none;
}
</style>From this, we can duplicate the set of properties, so get a different link, which underlines and emboldens the hyperlink upon rollover. We'll call this style '.link2'.<style type="text/css">
.link1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600 ;
font-weight: normal;
text-decoration: none;
}
.link1:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000 ;
font-weight: normal;
text-decoration: none;
}
.link2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000 ;
font-weight: normal;
text-decoration: none;
}
.link2:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000 ;
font-weight: bold;
text-decoration: underline;
}
</style>And there we have it, all you need to do now is, to assign the style to certain links, add the property 'class="link2" ', or 'class="link1" ' to the "<a href>" property.