Featured Tutorials

software articles, free software, converting, encoding, downloads,avi to flv,create flv,flash video converter,mov to flv,mov to avi,avi to mov,avi conversion,mov conversion,sorenson FREE Video Encoding/Converting Software

FREE Video Encoding/Converting Software

A great list of freeley available video encoding/converting software for converting AVI to..

drag,drop,jigsaw,puzzle,flash,drag drop,drag in flash,drag drop flash,flash jigsaw,flash puzzle,flash game,actionscript drag,draggable button   Drag and Drop Jigsaw Puzzle in Flash

Drag and Drop Jigsaw Puzzle in Flash

This flash tutorial will teach you how to create a drag and drop jigsaw puzzle, by creatin..

flash,game design,platform shooter,side scrolling,platform games,duplicate movie clips,keyboard input,key input,key press,movement in flash,user controlled,flash game design,how to design games Flash Game Design, Jet Fighter Shooter

Flash Game Design, Jet Fighter Shooter

Learn some of the basics scripts used to create this side scrolling jet fighter game. Lear..

flash tutorials, animated eyes, follow mouse, interactivity,eyes in flash,eyes that follow,eye tracking,animate eyes,photos of eyes,womans eyes Realistic Eye Animation

Realistic Eye Animation

Create animated eyes that blink, wink and following the mouse pointer using Flash...

graphics design tutorials, how to design logos, logo design,flash drawing,drawing in flash,design in flash,logo illustration,how to logo design,easy logo design,how to design logos,logos,flash logos Tips and tricks for designing logos

Tips and tricks for designing logos

How to design a logo covering some good font techniques, how to get inspiration, playing w..

Featured Videos

A very cool tutorial on one of Photoshop CS3's fancy new tools, t..

If you've noticed a drop in traffic since your new website went l..

This comedy video points out some of the common yet funny mistake..

Heres a great spoof video for the technically challenged develope..

This video tutorial gives you a very detailed insight into the wo..

Learn CSS: Link Classes

Basic Links

When you create a link in CSS it can be just a standard link with a few basic properties simular to standard HTML links, heres an example:

As a class in your stylesheet document

a {font-family:Verdana; font-size: 12pt; color: black; font-weight: bold;}

or directly within an <a> tag

<a style="font-family:Verdana; font-size: 12pt; color: black; font-weight: bold;">Link Example</a>

 

Link Properties

Here a list of the additional properties that you can apply to your links:

color: black;
color: #000000;
font-weight: bold;
font-weight: normal;
font-size: 10pt;
font-size: 10px;
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

 

Dynamic Links (Pseudo-classes)

If you want your links to do more you will need to add classes to them within your stylesheet document, below are some example of links that use different classes:

a:link {font-family: Verdana; font-size: 12pt; color: black;}
a:active {font-family: Verdana; font-size: 12pt; color: black;}
a:visited {font-family: Verdana; font-size: 12pt; color: grey;}
a:hover {font-family: Verdana; font-size: 12pt; color: red; font-weight: bold;}

Link example 1

This example has not been given any class before the ":link :acive :visited or :hover" this means that these settings will effect all <a> tag links that havent been given a class a bit like a universal setting.

 

a.example12link {font-family: Verdana; font-size: 12pt; color: black; text-decoration: none;}
a.example2:active {font-family: Verdana; font-size: 12pt; color: black; text-decoration: none;}
a.example2:visited {font-family: Verdana; font-size: 12pt; color: grey; text-decoration: none;}
a.example2:hover {font-family: Verdana; font-size: 12pt; color: grey; text-decoration: underline;}

Link example 2

This example has been given a class as you can see above with "a.example2:link". All you need to add to your <a> tag is:

<a class="example2">Link example 2</a>

 

More Web Design...

Other Content...

 Subscribe to our feed

Send to a friend