Creating a New Link Class

Css styles for link colors and fonts

Pinned Note Link Colors
Create a custom class that allows some links to have a different color. The css file to edit may be named "style.css", "coolstyle.css" or "corporatestyle.css". In color theme templates the css files will be in the "colors" folder. Edit css files in Notepad, TextEdit or a plain text editor.

Creating the class
You will be creating a new link class. In our example we'll call it ".pagelink". Locate code similar to the following in your .css file near the top:


/* NON-MENU LINK COLORS */

a:link,
a:visited,
a:active { color: #3366FF; text-decoration: none; }

a:hover { color: #006699; text-decoration: underline; }


Copy and paste that in the css file and create a new set of link classes like the following:


/* OUR CUSTOM LINK COLORS */

a.pagelink:link,
a.pagelink:visited,
a.pagelink:active { color: #3366FF; text-decoration: none; }

a.pagelink:hover { color: #006699; text-decoration: underline; }


In the above example you have added ".pagelink" to each line of your new class. Edit the hex colors as in the above example. Then in the HTML pages you must tell a link to use the new class like the following example:

<a href="linkhere.htm" class="pagelink">Link Text</a><br>


Now the new link color will be used for that link only.




Related Topics:
Changing Font Colors
Changing Link Colors
Adding New Font Styles
Editing the Flash Animation

Links:
Font Colors
Color Mixer Software