CSS Links - CSS tutorial
1 of 5
http://www.echoecho.com/csslinks.htm
Link To Us | Bookmark EchoEcho.Com
What's New? | Site Map
Home > Tutorials > CSS > Attributes
Forums D-Zine Articles
Search
Go!
Tutorials Online Tools Free Resources References Quiz Hosting
CSS TUTORIAL :
- Printable Version
- Send Page To Friend
CSS Links
CSS ATTRIBUTES
CSS has several options for redefining the style of links.
CSS TEXT
CSS COLORS
CSS LINKS
LINK PROPERTIES
CSS LISTS
CSS LAYERS
CSS CURSORS
Property
Values
NS
IE
A:link
A:visited
A:active
A:hover
<style>
<style>
<style>
<style>
4+
4+
4+
6+
4+
4+
4+
4+
TAKE THE QUIZ!
CSS TUTORIAL
INTRODUCTION
CSS SELECTORS
WHERE TO PLACE IT
CSS TEXT
DEFINING STYLES FOR LINKS
As mentioned in the above table, there are four different selectors with respect to
links.
CSS COLORS
CSS LINKS
CSS LISTS
CSS LAYERS
CSS CURSORS
TAKE THE QUIZ!
You can specify whatever style you'd like to each of these selectors, just like you'd
do with normal text.
DHTML TOOLS
CUSTOM SCROLLBAR
The four selectors are:
A:link
Defines the style for normal unvisited links.
CUSTOM CURSOR
FLOATING LAYER
CSS REFERENCE
W3C CSS1
W3C CSS2
A:visited
Defines the style for visited links.
MICROSOFT CSS
NETSCAPE CSS
CSS COMPATIBILITY
A:active
Defines the style for active links.
A link becomes active once you click on it.
TOP TUTORIALS
A:hover
HTML
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
Note: Not supported by Netscape browsers prior to version 6.
CSS
JAVASCRIPT
FLASH
JAVA APPLETS
PRACTICAL EXAMPLES
Here you can see a few examples on how CSS can be used to replace the
traditional image based mouseover effects for links.
EchoEcho Hosting!
1 Gig Server space !!
30 Gigs Traffic !!
Php dynamic pages
Perl/cgi scripts
MySQL databases
8/8/2005 3:52 PM
CSS Links - CSS tutorial
2 of 5
http://www.echoecho.com/csslinks.htm
The hover style is not supported by Netscape browsers prior to version 6, but
since it does no harm, you can still use it for the benefit of the +90% of visitors that
arrive using MSIE).
One of the most common uses of CSS with links is to remove the underline.
Typically it's done so that the underline appears only when a hover occurs. In the
example below, we did just that. In addition we added a red color for hovered links.
Password protected folders
Advanced log file stats
Spam & Virus checked mail
Auto-installed scripts:
Forums, Chat, Shop,
Photo album, Livehelp etc.
Nothing beats this deal:
$7.50/month!
» Read More
Example: Hover
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE
Another example would be to create links that are both underlined and
overlined.
Example: Underline/Overline
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline overline; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE
A third example would be to create links that change in size
when hovered.
Example: Size changing links
<style type="text/css">
A:link {text-decoration: none}
8/8/2005 3:52 PM
CSS Links - CSS tutorial
3 of 5
http://www.echoecho.com/csslinks.htm
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size:24; font-weight:bold; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE
A final example would be to create links that have a permanent background color,
obviously standing out from the rest.
Example: Background colored links
<style type="text/css">
A:link {background: #FFCC00; text-decoration: none}
A:visited {background: #FFCC00; text-decoration: none}
A:active {background: #FFCC00; text-decoration: none}
A:hover {background: #FFCC00; font-weight:bold; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE TO SEE
MULTIPLE LINKSTYLES ON SAME PAGE
The final topic deals with how to add multiple link styles that can be used on the
same page.
In the above examples we addressed the HTML selector - A:link etc - and thus
redefined the overall link style.
How do we define a link style that is only active in a certain area of the page?
The answer is: context dependent selectors.
Rather than addressing the A:link selector we will address it while being
dependant on a certain outer class that surrounds the area where we'd like our link
style to be effective.
For example:
8/8/2005 3:52 PM
CSS Links - CSS tutorial
4 of 5
http://www.echoecho.com/csslinks.htm
<html>
<head>
<style type="text/css">
.class1 A:link {text-decoration: none}
.class1 A:visited {text-decoration: none}
.class1 A:active {text-decoration: none}
.class1 A:hover {text-decoration: underline; color: red;}
.class2 A:link {text-decoration: underline overline}
.class2 A:visited {text-decoration: underline overline}
.class2 A:active {text-decoration: underline overline}
.class2 A:hover {text-decoration: underline; color: green;}
</style>
</head>
<body>
ONE TYPE OF LINKS
<br>
<span class="class1">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
<br>
<br>
ANOTHER TYPE OF LINKS
<br>
<span class="class2">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
</body>
</html>
Note how we use the <span> to define the context.
This is smart for two reasons:
1) The obvious, that it allows us to use different link styles on
the same page, rather than being limited to using a single
overall link style.
2) We can define entire areas where a certain link style works for all links within
that area. Thus, we don't have to add a style definition to each and every link in
that area.
<< PREVIOUS
READ MORE >>
Got unanswered questions related to this page?
DEVELOPER TIP!
Visit the Talk Back Page and post your questions!
HOST WITH ECHOECHO - GET 1 GB SERVER SPACE AND 30GB TRAFFIC
PHP, PERL, MYSQL, SSI, PASSWORD PROTECTED DIRS, SITE STATS
PRICE IS ONLY $7.50/MONTH
>>READ MORE
FACT:
None of the leading
search engines will
crawl pages based on
framesets.
TIP:
Offer visitors a
non-framed option.
If for nothing else: to
make sure your pages
get listed with the
search engines!
8/8/2005 3:52 PM
CSS Links - CSS tutorial
5 of 5
http://www.echoecho.com/csslinks.htm
"Better Than Books - As Easy As It Gets!"
On EchoEcho: User Forums | D-Zine Articles | Tutorials | Online Tools | Free Resources | References | Quiz | Hosting
Contact us | Advertise info | Terms of use | Privacy policy
About EchoEcho
Copyright © 1999-2002 NetKontoret All rights reserved.
8/8/2005 3:52 PM