Featured Tutorials

photoshop tutorials, gradient filter, photo effects, brand image,gradient mapping,gradients in photoshop,gradient colours,photo gradients,gradient photo,gradient filter,photoshop filters Gradient Mapping

Gradient Mapping

How to transform a standard photograph for use with a specific colour scheme or brand imag..

flash,swf,external,swf file,position,swf position,setting position,loadmovie,load movie,levels,movieclip Set position of external SWF file in Flash

Set position of external SWF file in Flash

A few tips for using levels in flash when loading swf files, and how to set the position o..

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..

css, learn css,css links,css classes,links in css,a tag css,a tag,css a,css tutorial,css help,a class,a tag Learn CSS: Link Classes & Properties

Learn CSS: Link Classes & Properties

Learn how to create and customise links or <a> tags in CSS. This detailed tutorial w..

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..

Featured Videos

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

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

This video will show you in stages how to realistically color a b..

This speed painting video is a great way to see how you would go ..

This detailed tutorial will teach you how to create a realistic l..

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