Old school Swatch Watches

p _ x
Bookmark Weezywap
Monday June 17th 2024
Always Post weezywap.xtgem.com on your facebook, twitter, 2go, whatsapp and instagram status! If you love WEEZYWAP and enjoy unlimited services here!
»Css Basics
You are viewing Chapter 11 of 18 Chapters for Css Basics/Tutorials. View all Chapters
Chapter 1: Introduction to CSS
Chapter 2: CSS Syntax
Chapter 3: CSS Classes
Chapter 4: CSS IDs
Chapter 5: CSS Divisions
Chapter 6: CSS Spans
Chapter 7: CSS Margins
Chapter 8: CSS Padding
Chapter 9: CSS Text Properties
Chapter 10: CSS Font Properties
Chapter 11: CSS Anchors, Links and Pseudo Classes
Chapter 12: CSS Backgrounds
Chapter 13: CSS Borders
Chapter 14: CSS Ordered & Unordered Lists
Chapter 15: CSS Width and Height Properties
Chapter 16: CSS Classification
Chapter 17: CSS Positioning
Chapter 18: CSS Pseudo Elements
Chapter 11: CSS Anchors, Links and Pseudo Classes

Below are the various ways you can use CSS to style links.

a:link {color: #009900;}
a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #333333;}
a:active {color: #009900;}

Now lets take a look at what each one of the above link styles actually does.

a:link {color: #009900;}

The first on the list sets the color of a link when no event is occuring

a:visited {color: #999999;}

The second sets the color a link changes to, when the user has already visited that url

a:hover {color: #333333;}

The third sets the color a link changes to as the user places their mouse pointer over the link

a:focus {color: #333333;}

The fourth is primarilly for the same purpose as the last one, but this one is for users that are not using a mouse and are tabbing through the links via there keyboards tab key, it sets the color a link changes to as the user tabs through the links

a:active {color: #009900;}

The fifth on the list sets the color a link changes to as it is pressed.

Lets look at an example: Google

If your last visit to Google is not stored in your cache than the above link to google is blue, if you have already been to google then the link should be grey. if you mouseover or tab through the links, the link will change to dark grey, and last but not least if you click and hold the link without releasing it you will see it return back to the original blue color.
You must declare the a:link and a:visited before you declare a:hover. Furthermore, you must declare a:hover before you can declare a:active. Using the above code will style all links on your web page, unless you declare a seperate set of link styles for a certain area of your webpage.

Pseudo Classes
You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.
You can do this in the following fashion:

#content a:link {color: #009900;}
#content a:visited {color: #999999;}
#content a:hover {color: #333333;}
#content a:focus {color: #333333;}
#content a:active {color: #009900;}

Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #content selector to match your division name.
Then for the links in a column you could use the following:

#column a:link {color: #009900;}
#column a:visited {color: #999999;}
#column a:hover {color: #333333;}
#column a:focus {color: #333333;}
#column a:active {color: #009900;}

Once again, this assumes the name of the column division, just change the name to match yours.
This same method can be accomplished by declaring a class instead of an id.

a.column:link {color: #009900;}
a.column:visited {color: #999999;}
a.column:hover {color: #333333;}
a.column:focus {color: #333333;}
a.column:active {color: #009900;}

Though in this case you will need to add a class to each link

<a class="column" href="" title="">some link text</a>

But, there is still yet an easier way

.column a:link {color: #009900;}
.column a:visited {color: #999999;}
.column a:hover {color: #333333;}
.column a:focus {color: #333333;}
.column a:active {color: #009900;}

Then in the (X)HTML file

<div class="column">
<a href="" title="">some link text</a>

There are other properties that can be added to links other than color, I was just trying to keep it simple. Almost any property that can be used to style text and fonts can be used to style links also.
« PreviousJump to Chapter:
Next »

Copyright © 2024 WEEZYWAP
facebook twitter whatsapp google plus
Home | About Us | Advertise | Frequently Asked Question | Contact Us | Partners | Disclaimer | Terms of Services | Invite Friends | Credits

Online: 1 , Today: 1, Hits: 33205
Last modified: 19-01-2017 9:11:03 pm