confusion over placement of attribute

How to place - A:link, A:visited, A:active { text-decoration: none }

[scato345]

OH DEAR ME! -

Okay now that you guys have got me started in CSS - I'm lost every other minute.

If I wanted to include the code below as part of a class or an ID rather than as part of a declaration for all <a> elements

For example:

..inserting

A:link, A:visited, A:active { text-decoration: none }

into

.lnk003 { background-color: #eeeeee; font-family: Arial, Helvetica, Geneva, Swiss, "SunSans Regular", "sans serif"; font-size: 10px; color: blue; text-align: center; border: 0px solid #ffffff; align: center; valign: center; height; 20px; width: 20%; }

would leave me with an extra bracket.

.lnk003 { background-color: #eeeeee; font-family: Arial, Helvetica, Geneva, Swiss, "SunSans Regular", "sans serif"; font-size: 10px; color: blue; text-align: center; border: 0px solid #ffffff; align: center; valign: center; height; 20px; width: 20%; A:link, A:visited, A:active { text-decoration: none }}

I tried removing the brackets and rearranging the attribute postition - to no avail.

What is the correct solution?

and.. BTW .. I change all upper case letters to lower case. Its seems to work. Why don't the tutorials accomodate XHTML?

Also - I use repeating "positions" on my catalogue pages, and while ".lnk003" is unique to each position, it repeats itself on the page many times, and therefore in order to validate I had to use the instructions as a "class," which to my way of thinking - it is not - since it is specific to one single set of instructions, albeit repeated many times.

I hope this is clear.

Thanks,

Dorian

[sgietz]

Add this to your stylesheet:

.lnk003 a:link {text-decoration:none}
.lnk003 a:visited {text-decoration:none}
.lnk003 a:active {text-decoration:none}

... or if you want to get real specific, you can assign a class to each link, like so:

a.link1:link {text-decoration:none}
a.link1:visited {text-decoration:none}
a.link1:active {text-decoration:none}

The HTML would look like this:

<a class="link1" href="#">I'm a link</a>

But the first example makes more sense in this context.

I hope this is what you were after.

[Fotiman]

Assuming the lnk003 class is being applied directly to <a> elements (as in <a href="#" class="lnk003">...</a>):

.lnk003 {  
 background-color: #eeeeee;  
 font-family: Arial, Helvetica, Geneva, Swiss, "SunSans Regular", "sans serif";  
 font-size: 10px;  
 color: blue;  
 text-align: center;  
 border: 0px solid #ffffff;  
 /* COMMENTING OUT INVALID CSS PROPERTIES 
 align: center;  
 valign: center;  
 */ 
 height: 20px;  
 width: 20%;  
}  
a.lnk003:link,  
a.lnk003:visited,  
a.lnk003:active { 
 text-decoration: none;  
} 

[edited by: Fotiman at 7:48 pm (utc) on Mar. 19, 2007]

[scato345]

Thank you for the suggestions.

I believe I understand the concept but there is still some confusion because of my short experience with using inline CSS; and the number of attributes that are inapplicable. (I am not that wonderful with HTML in the first place, though I got everything to work right - but that's not as important as getting the code standardized now)

It's a little difficult to grasp them all at once without having sufficient time to play with the various solutions.

Having this support is very important, as the studenst here don't really understand the principles as they should andthe books and tutorials assume a lot of knowledge.

I see the approach, and will try it out both ways ASAP.

Dorian