2 sets of css a: tags 3

[SlowFlight]

I have a series of web pages in which I have links in a column on one side of each page. The fonts size of these links needs to be smaller than other links on the rest of the page. How can I do that in a style sheet? I'd rather not add styles to the html pages. I am referring to a:active, a:visited etc... tags in the .css file. I have defined a set of tags in the .css file for one set of links. Can I define another set of tags in the .css file for the links on the rest of the page? If so... How?

Skip Meisch

 

[BillyRayPreachersSon]

To change all A tags (and their pseudo-classes), you'd use:

A:link		{ xx }
A:visited	{ xx }
A:hover		{ xx }
A:active	{ xx }

To only affect certain links, assign those links a class, say "linkStyle1", and put in your CSS:

A.linkStyle1:link		{ xx }
A.linkStyle1:visited	{ xx }
A.linkStyle1:hover		{ xx }
A.linkStyle1:active		{ xx }

Hope this helps!

Dan

 

[philote]

And for the size, you'd probably want to apply that to just the A tag:

a.linkStyle1{font-size: .8em}

Font-size reference:

http://www.w3.org/TR/CSS2/fonts.html#propdef-font-size

 

[SlowFlight]

That doesn't seem to be working. How can I apply multiple classes to the links in the left column. I forgot to mention that I already have another class being applied to the left column which I use as a menu.

I have uploaded my code to:

http://slowflight.net/ICHM/index.html

and:

http://slowflight.net/ICHM/main.css

Skip

 

[SlowFlight]

I spoke too soon. It is now working. Many thanks!!!

Skip Meisch

 

[Vragabond]

This is rather late, but you can try without the extra classes by doing this:

.leftmenu a:link {...}
.leftmenu a:visited {...}
.leftmenu a:hover {...}
.leftmenu a:active {...}

This basically means, an <a> tag that is descendant of the leftmenu class.

 

[SlowFlight]

Thanks! That's an even better method. It allows for less code in the html file to confuse me in the future.

Skip Meisch