Featured Tutorials

crop,target,property,flash,tutorial,drag drop,drag flash,flash drag,hittest,collision,overlap,flash tutorial,movieclip overlap The Drop target property in Flash

The Drop target property in Flash

This flash tutorial will teach you about the drop target property. The drop target propert..

icon design,icons in illustrator,illustrator tutorial,how to design icon,icon from sketch,gradient effects,gradient colouring,drawing in illustrator,stumble upon icon How to Design a 3D Icon in Illustrator

How to Design a 3D Icon in Illustrator

This very detailed tutorial will take your through the stages of creating a 3D stumble upo..

vector art,photos,urban,graphics tutorial,vector tutorial,vectorizing,vector images,urban design,urban vector Turning photos into stylish Urban Vector Art

Turning photos into stylish Urban Vector Art

Learn how to turn your standard photos into cool vector art. This tutorial covers many asp..

firework photos,how to photo fireworks,photograph fireworks,photography,fireworks,shoot fireworks,take pictures of fireworks,fireworks with camera Firework Photography how to setup your camera

Firework Photography how to setup your camera

This digital photography tutorial will teach you how to setup your cameras shutter speed a..

vector background,vector effects,drawing,vector drawing,web20 designs,web 2.0,photoshop,vector curves,rainbow curves,photoshop backgrounds Cool Abstract Backgrounds with Coloured Vector Curves

Cool Abstract Backgrounds with Coloured Vector Curves

This tutorial will teach you how to create vector curves in Photoshop using the pen tool. ..

Featured Videos

This tutorial will teach you some of the basics of the third part..

A great example of how the many Photoshop tools can be used to im..

This tutorial will show you how to import fully layers Photoshop ..

This video will open your eyes to the strange phenomenon of Traga..

One of the most important stages of search engine optimisation is..

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