How can I override anchor tag properties?

Question

I already have this code in my style.css (using wordpress):

a:link, a:visited {
    color: #3088FF;
    text-decoration: none;
}

I want to change the anchor text color, font style, bold etc for categories. How can I override this?

You mean the anchor got inline style (e.g. ``) which you want to override with CSS? — Shadow The GPT Wizard, Oct 04 '12 at 13:31
HI, this anchor CSS just need to change to some specific widget, thats all, BUT it shouldnt change over all CSS... — Lisa Ray, Oct 04 '12 at 17:15

score 5 · Answer 1 · edited Oct 04 '12 at 17:27

5

If you must overwrite existing styles, use the !important declaration. For example,

.myStyledLink{
    color: #FFF !important;
}

edited Oct 04 '12 at 17:27

ЯegDwight

24,821
10
45
52

answered Oct 04 '12 at 13:35

looq

83
6

HI, BUT I just wanna apply this anchor text CSS only to that particular anchors, my override CSS shouldnt change actual behavior of CSS.. So, does this !important; can only be used for specific anchor tags..? – Lisa Ray Oct 04 '12 at 16:25
You can use a class on the anchors which you want to override the css rules. `MyLinkText` – looq Oct 05 '12 at 09:52

score 2 · Answer 2 · edited May 23 '17 at 11:48

2

Assuming you mean the anchor has inline style already that you wish to override with CSS, use the !important keyword:

<a href="#" style="color: red;">hello</a>

CSS:

a:link, a:visited {
    color: #3088FF !important;
    text-decoration: none;
}

Live test case.

This will override all other styles including inline style and if you are worried about cross browser compatibility then you shouldn't: What browsers support "!important"?

edited May 23 '17 at 11:48

Community

1
1

answered Oct 04 '12 at 13:34

Shadow The GPT Wizard

66,030
26
140
208

HI, BUT I just wanna apply this anchor text CSS only to that particular anchors, my override CSS shouldnt change actual behavior of CSS.. So, does this !important; can only be used for specific anchor tags..? – Lisa Ray Oct 04 '12 at 16:28
@Lisa for this you will have to add `class="something"` to the anchors you want and have `.something { color: #3088FF !important; }` – Shadow The GPT Wizard Oct 05 '12 at 21:30

score 2 · Answer 3 · answered Oct 05 '12 at 12:25

Identify the ID of the categories widget in your output HTML. Let's say that id="widget-cat", then create a CSS rule as follows to override the link colours within that widget, e.g.

#widget-cat a:link, #widget-cat a:visited  {
    color: #FFF;
}

The use of !important is a very last resort to overriding styles really, and I recommend only ever using that if you need to override CSS rules that can't be made more specific and were written by third-party developers that you have no control over.

How can I override anchor tag properties?

3 Answers3