Overwriting a CSS style once.

Dev Shed Forums Sponsor:

March 7th, 2002, 02:21 AM

Crinos

Join Date: Aug 2001

Location: Kristiansand - Norway

Posts: 122

Time spent in forums: 1 Day 9 h 9 m 2 sec
Reputation Power: 18

Overwriting a CSS style once.

I have CSS for handeling links.

Code:

a:link {  
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #0000FF;
 text-decoration: none;
; font-style: normal
}

and so on for visited, active and hover.

My problem is that at some few places I want to alter the link text to be at bit smaler.

How could I acomplish this?

__________________
-=| Agnus Dei |=-
http://www.crinos.org

March 7th, 2002, 03:41 AM

noodles1100

Corporate Stooge

Join Date: Jun 2001

Location: Aberdeen, Scotland

Posts: 134

Time spent in forums: < 1 sec
Reputation Power: 12

Create another style in the stylesheert.

i.e.

a.classname {font-size: 10px;}

then when you create the link use the class attribute.

i.e.

<a class="classname" href="linkpage.asp">Link Text</a>

Hope that helps.

__________________
Never sign your code....it leaves you liable!

March 7th, 2002, 05:02 AM

Crinos

Join Date: Aug 2001

Location: Kristiansand - Norway

Posts: 122

Time spent in forums: 1 Day 9 h 9 m 2 sec
Reputation Power: 18

That was the first thing I tried.

But wont work. I've allso tried to make a new style with a new set of link styles within... But still doesn't work.

Code:

.submenu {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 color: #000000;

a:link {  
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 color: #0000FF;
 text-decoration: none;
; font-style: normal
}

a:visited {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 color: #0000FF;
 text-decoration: none;
; font-style: normal
}

a:active {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 color: #FF0000;
 text-decoration: underline;
; font-style: normal
}

a:hover {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 font-style: normal; color: #0000FF;
 text-decoration: underline;
}
}

Any Ideas?

March 7th, 2002, 05:20 AM

noodles1100

Corporate Stooge

Join Date: Jun 2001

Location: Aberdeen, Scotland

Posts: 134

Time spent in forums: < 1 sec
Reputation Power: 12

I use that all the time!! That was ripped out of a CSS that I'm using at the moment!

Try putting the general a.link a.hover etc at the bottom of the CSS and the custom classes at the top. After all CSS can be picky about ordering and comments.

March 7th, 2002, 10:37 AM

degsy

Contributing User

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Nov 2001

Posts: 1,882

Time spent in forums: 5 Days 21 h 19 m 30 sec
Reputation Power: 18

Noodles way should work

<html>
<head>
<style>
a:link
{ color: blue; font-size: 10px; text-decoration: underline }
a:active
{ color: blue; font-size: 10px; text-decoration: underline }
a:visited
{ color: blue; font-size: 10px; text-decoration: underline }
a:hover
{ color: green; font-size: 10px; text-decoration: none }

a.menu:link
{ color: red; font-size: 14px; font-weight: bold; text-decoration: underline }
a.menu:active
{ color: red; font-size: 14px; font-weight: bold; text-decoration: underline }
a.menu:visited
{ color: red; font-size: 14px; font-weight: bold; text-decoration: underline }
a.menu:hover
{ color: green; font-size: 14px; font-weight: bold; text-decoration: none }
</style>
</head>

<body>
<p><a href="#" class="menu">Menu Link 1</a><br>
<a href="#" class="menu">Menu Link 2</a></p>
<p><a href="#">Normal Link 1</a><br>
<a href="#">Normal Link 2</a></p>
</body>
</html>

March 8th, 2002, 02:30 AM

Crinos

Join Date: Aug 2001

Location: Kristiansand - Norway

Posts: 122

Time spent in forums: 1 Day 9 h 9 m 2 sec
Reputation Power: 18

Got it working now... thanks. I allso had a typo error, wich I didn't see before...

Overwriting a CSS style once.

Developer Shed Advertisers and Affiliates