Click to See Complete Forum and Search --> : Assign Link Style Globally?


spitfire72
02-09-2009, 01:07 PM
Argh. I have made my links all bold in my stylesheet, but want the subnav to be normal. All my pages have been created and uploaded and I'm ready to launch. In order to get my subnav links to be "normal" I have to assign the class directly in each <a href> tag, no? That's the only way I get it to work generally. Is there any way I can do it globally at this point? The subnav has its own class and its own div. The font weight is assigned in both of these (normal) but the links are still inheriting the a:link style I set for the whole site. Please help me before I go editing every subnav link on every blessed page. Thanks a million!!
Here are the relevant styles:
a:link{color:#660033; text-decoration:none; font-weight:bold;}
a:visited{color:#330000; text-decoration:none;}
a:hover{color:#000000; text-decoration:none;}
#subnav{margin-top:25px;font-weight:normal;}

.subnav {
font-family:"Arial", Verdana, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
color: #000000;
letter-spacing: .08em;
text-align: center;
height: auto;
text-transform: uppercase; border-top:solid 1px #CCCCCC;
}
a.subnav{font-style:normal;}

And the relevant code:
<div id="subnav"> <span class="logosub">BREGGO CELLARS</span> 11001 Highway 128, Boonville, CA 95415 707-895-9589<br/>

<p class="subnav"><a href="index.html">home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="contact.html">contact us</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="map.html">find us</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="trade.html">trade</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="policies.html">policies</a></p>

<p class="copy">copyright 2009 Breggo Cellars</p></div>

And the URL:
http://www.breggo.com

Fang
02-09-2009, 01:16 PM
#subnav a {font-weight:normal;}

aj_nsc
02-09-2009, 01:25 PM
EDIT: same as above

evo190
02-09-2009, 01:44 PM
Here's how I understand CSS and the DIV vs CLASS thing...

CSS

DIV uses "#subnav"

#subnav {
text-align: center;
}
#subnav p {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
font-size: 10px;
margin: 2;
}
#subnav a:link, a:visited {
text-decoration: none;
color: #660033;
background-color: transparent;
}
#subnav a:hover, a:active {
background-color: #;
color: #;
}

CLASS uses ".subnav"

.subnav {
font-family:"Arial", Verdana, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
color: #000000;
letter-spacing: .08em;
text-align: center;
height: auto;
text-transform: uppercase; border-top:solid 1px #CCCCCC;
}



HTML

Now, if your CSS uses #DIV, then use DIV="subnav"

OR

If your CSS uses .class, then use class="subnav"

SO

It looks like you should edit your #subnav CSS (to include font style, ect.) and end your </div> tag after all the text in that CSS group.

<div="subnav">
<table>
<blah><blah><blah>
</table>
</div>


PS. Make sure you remove the CLASS code from each link before you test.


The above rules work for me and my CSS projects. Hope it helps.

rpgfan3233
02-09-2009, 02:47 PM
Doing my best to keep things simple (thank you, evo190, for at least trying to provide a longer explanation instead of simply providing random code with no explanation of where it should be placed, though I honestly got lost :(), here is the code that Fang posted earlier:
#subnav a { font-weight: normal }

Explanation:
When you used a.subnav, that would apply the font-style to the contents of any <a class="subnav"...> section rather than to <p class="subnav"> .... <a...>, which is .subnav a in CSS. If you use the code posted above by me, which is the same as Fang's (credit goes to him; he could have provided an explanation though since it appears as if you're still somewhat new to CSS), it will look for the first element with id="subnav" and apply the style to all anchors (links) inside that element. In this case, it is <div id="subnav">.

Confused? Maybe the code will speak for itself, with a bit of help from some color:
#subnav a { /* <div id="subnav">Text and <p>elements.<a ...>Link</a>Text and elements.</p></div> */ }

.subnav a { /* <div class="subnav">Text and <p>elements.<a ...>Link</a>Text and elements.</p></div> */ }

#subnav>a { /* <div id="subnav">Text and <p>elements.</p><a ...>Link</a>Text and <p>elements.</p></div> */ }

.subnav>a { /* <div class="subnav">Text and <p>elements.</p><a ...>Link</a>Text and <p>elements.</p></div> */ }

a#subnav { /* <a id="subnav" ...>Link</a> */ }

a.subnav { /* <a class="subnav" ...>Link</a> */ }

I hope this clears up some confusion...

peteincali
02-09-2009, 04:43 PM
To make it more clear on what to change in your css code:

Replace:

a.subnav{font-style:normal;}

With:

#subnav a { font-weight: normal }

spitfire72
02-09-2009, 04:48 PM
Thanks, all. It was Fang who elegantly wrote:
#subnav a {font-weight:normal;}


no explanation needed and
something I SHOULD have known, or had long ago forgotten.

spitfire

Fang
02-10-2009, 12:28 AM
For those wanting to know why this works, read up on specificity:
http://htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS21/cascade.html#specificity