CSS Attributes - Part 2 [#6]

CSS Attributes - Part 2 [#6]

Postby omoi » Sun Jun 03, 2007 10:35 pm

Well, now that you have a feel for colors and fonts, let's talk about links. Links are selected by their tags (which would be <a>, by the way) like this:

Code: Select all
a:...{
attrib:value;
}


However, in CSS links, are super, duper, ultra specific in the way they have to be ordered. First, let's take a look at the way you write a link all the way in CSS:

Code: Select all
a:link{
color:#520000;
}


This will make an underlined link that has this color. However, it won't actually do anything on your HTML file because all the link attributes have to be present in order for the links to do what you want them to in CSS. The color is like this:

a:link
a:visited
a:hover
a:active


link is the basic link color. It affects all the links on the page. visited is the color of a link that you have already clicked on. As such, it only affects links that have already been used. hover is the color a link has when you put the pointer on it. active is the color that a link changes to when you click it. The color only last for a split second.

You usually define all of the attributes separately, but if you are a color freak and want to get things done quickly, the following will do:

Code: Select all
a:link, a:visited{...}
a:hover, a:active{...}


or

Code: Select all
a:link, a:visited, a:hover, a:active{...}


You cannot pair these up in just any way. It must look like that if you pair them up in twos and it must be written in that order if you want to have them all defined at once.

Did you notice? wrote:When we are defining multiple attributes, we separate them with commas. Important to remember.


Now that we know that, "How do we handle that stupid underline there? I mean, that's so not cool...."

No problem. To handle underlining, we use the text-decoration feature of CSS. To see all of the attributes for text-decoration, check out the CSS Tutorials at w3schools. We use the text decoration feature as follows:

Code: Select all
a:link, a:visited{
text-decoration:none;
}


And voila! No underlines unless you put you pointer on the link. If you do that, an underline should appear. Using the link attribute, you can make you links any color you want. In addition to that, you can play with all manner of effects. For example, you could set the hover to make your letters larger when you pointer is on a link. Mind you, it will throw your layout off, but you could do it. You could also have the hover set to place a background color on the link when your pointer is on it and change the color of the words as you could see in this site. Possibilities are endless, so use your imagination.

And that, my friends, is the skinny about CSS links. I would write more, but I'm afraid that, on four hours of sleep, I am going to simply calls it quits for the night x_X
Last edited by omoi on Wed Jun 06, 2007 1:07 am, edited 1 time in total.
Image

Read the rules.
Check this topic and make your suggestions known!
This is how we make suggestions.
User avatar
omoi
Moderator Team
Moderator Team
 
Posts: 1076
Joined: Wed May 23, 2007 8:31 pm

Re: CSS Attributes - Part 2

Postby super3boy » Tue Jun 05, 2007 5:15 pm

Yea! Fresh baked tutorial. Thanks.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA


Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest