CODEWITHSUNDEEP
css
David De La Torre
David De La Torre

Reputation: 1

CSS will not change link color. Not sure why

My CSS has the following code for links for the whole website:

#mainpanecontent A:link {
    FONT-WEIGHT: bold; COLOR: #6a0a0a; TEXT-DECORATION: none
}

I want to change a header that is also a link to be a different color using the code below but it doesn't enforce it. My code is inside a div that uses the "mainpanecontent" :

Header code

.contact
 {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;


}

.contact a:link, .contact a:visited
{

color: #1F507F;

}


.contact a:hover
{

color: #1F507F;


}
.contact a:active
{

color: #1F507F;


}

Upvotes: 0

Views: 61

Answers (3)

Ole
Ole

Reputation: 1382

CSS Rules are sometimes not enforced due to how explicit the previous rule was, in the rule you list above it references an ID, which is more explicit than a class.

The other issue of course can be that your "overrides" are defined BEFORE the other rule, therefore they are overwritten.

In the first case you can use !important to force the override of the rule.

e.g.

.contact
{
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  font-weight: bold;
  padding-left: 50px;
  background-position: 25px 14px;
  padding-top: 13px;
}

.contact a {
  color: #1F507F !important;
}

Note I removed the other rules, because you are only setting the link color to the same color in each case, so there's no need to define the pseudo-classes :hover, :active etc. with the same constant.

Upvotes: 0

Burdock
Burdock

Reputation: 1105

CSS has a system of priority for handling what gets what tags :: Give this a read

Here is a simple rewrite of your code that should work :)

Everything higher on the list should overwrite things lower of the list of the same type

.contact a:active
{

color: #1F507F;


}
.contact a:hover
{

color: #1F507F;


}

.contact a:link, .contact a:visited
{

color: #1F507F;

}


 .contact
 {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
padding-left: 50px;
background-position: 25px 14px;
padding-top: 13px;


}

Upvotes: 0

Ry-
Ry-

Reputation: 224857

#mainpanecontent A:link has a higher specificity than any of your .contact a:somethings. The best way to solve this is probably to give your header an ID and use that. If you can’t, and it’s only in #maincontent, #maincontent will suffice, even if it’s not entirely appropriate. (Depends on the situation.)

#mainpanecontent .contact a:link {
    color: #1f507f;
}

Also, just drop the :link, especially if you’re going to specify the same thing for all of them. (The only consideration there, <a name>, isn’t used these days.)

Upvotes: 4

Related Questions