CSS -> Getting <P styles to work in a <A HREF
A couple of years ago when I redid a site for local college, and started using CSS to modify the links on the page, I came across a problem. Even though I told a whole paragraph to use a style, to make it work properly in the link, I had to apply the style to the tag as well:
<p class="bodyContent">Our graduate <a href="#placement" class="bodyContent">placement</a> rate is 85% to 90% over the past five years.</p>Here is the CSS code that is for bodyContent:
.bodyContent {
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #000000;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
text-align: justify
}
a.bodyContent {
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #003399;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
text-align: justify;
TEXT-DECORATION: none
}
a.bodyContent:link {
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #003399;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
text-align: justify;
TEXT-DECORATION: none
}
a.bodyContent:visited {
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #333399;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
text-align: justify;
TEXT-DECORATION: none
}
a.bodyContent:hover {
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #003399;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
text-align: justify;
TEXT-DECORATION: none;
background-color: #FFFF99
}
i.bodyContent {
FONT-WEIGHT: normal;
FONT-SIZE: 10px;
COLOR: #000000;
FONT-STYLE: italic;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
text-align: justify
}
b.bodyContent {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #000000;
FONT-STYLE: italic;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
text-align: justify
}
Now when I was maintaining the site, I didn't mind the extra step of choosing the tag and applying the bodyContent style to it. (used dreamweaver to edit content), however the person who maintains it now usually forgets, so the links stand out. What am I doing worng, or need to adjust so that as long as I define the class for the , any link inside the paragraph will work as they should.
Thank you for your time.
-Greg
Megan posted this at 20:01 — 27th November 2006.
She has: 11,421 posts
Joined: Jun 1999
It should be .bodycontent a (links within the bodycontent elements) not a.bodycontent (links with the bodycontent class applied). Even so, all the basic font information should transfer down with the .bodycontent class. Can we see an example of where this is happening?
When you're structuring a page you should avoid having to ad a class to every p tag as well. In this case the CSS should be applied to an outer container or whatever is holding the paragraphs. So you might have this:
<div id="content"><p class="bodyContent">Our graduate <a href="#placement">placement</a> rate is 85% to 90% over the past five years.</p>
</div>
CSS:
#bodyContent p {all styles here }#bodyContent p a:link {should inherit p styles above}
Megan
Connect with us on Facebook!
Greg K posted this at 20:21 — 27th November 2006.
He has: 2,145 posts
Joined: Nov 2003
Ahh, I see! thank you. That was one of the things I was confused over with CSS. those types of differences. Back when I coded that site, CSS was very new to me. Thank you for the tip about how to redo it so that a class isnt needing to be defined for each .
Saw all kinds of stuff like that in a template i was looking at, and boy that was confusing till I looked some of them up, like:
#buttons>ul#mainlevel-nav li aWhen I first saw that, I was stumped HAHA. Slowly figured it out what it ment
-Greg
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.