CSS Internal Style Sheets
Setting up a Internal text for style sheets
- and a lesson in Javascripting
1. Set style between </TITLE> and </HEAD> in your head of your html document
- Use this example in your page. ADjust this script to see the effects.
- Each type is a different effect.
- You can add more effects by adding another type ie; type4, but you will link only to one type
<style>
<!--
A.type1:link {color:#FFDD00; text-decoration:none;}
A.type1:visited {color:#FFDD00; text-decoration:none;}
A.type1:active {color:#FFDD00; text-decoration:none;}
A.type1:hover {color:#00FF80; text-decoration:underline;}
A.type2:link {color:#FF0000; text-decoration:underline;}
A.type2:visited {color:#FF0000; text-decoration:underline;}
A.type2:active {color:#FF0000; text-decoration:underline;}
A.type2:hover {color:#ABCDEF; text-decoration:underline;}
A.type3:link {color:#00CCFF; text-decoration:none;}
A.type3:visited {color:#00CCFF; text-decoration:none;}
A.type3:active {color:#00CCFF; text-decoration:none;}
A.type3:hover {color:#FF8000; text-decoration:overline underline;}
//-->
</style>
Step 2.
Attaching the individual styles to individual text links. This goes into the body of your doc
where you want the link to appear.
- For a text link, just include a class="styleName" in the
<a href> tag, like this...
<a class="type1" href="http://whatever.com">click</a>
<a class="type2" href="http://whatever.com">click</a>
<a class="type3" href="http://whatever.com">click</a>
where type1, type2, and type3 are the style names in the
<style> script above.
- Name each one same as above type1 and so on in the link and in the style sheet to link the style to your links
There is no real limit on the number of individual link
styles you can use on a page
To change the colors, just do the obvious -- the colors are
set in #RRGGBB exactly the same as in HTML.
text-decoration: none; will not show a link underline
text-decoration: underline; will show a link underline
One additional cool trick with this is to use:
text-decoration: overline underline;
Do not place added tags between the href and /a tags
I have a site with this effect so you may see it in action
HERE for style links in action
|
