1

I've been searching for a good hour but no one seems to have had the same problem.

I am trying to change the text color of a link to grey, it is appearing blue however. I specifically want to achieve this by setting a class property of the link - I don't want custom css in the aspx file, and I don't want to set the style property of the link. (For the record I have tried both of these ways and they work).

//Site.css
 .grey {
 color: grey;
 }

  .button-link2 {
 padding: 10px 15px;
 background: #EFEFEF;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-transition-duration: 0.2s;
 -moz-transition-duration: 0.2s;
 -transition-duration: 0.2s;
 text-decoration: none;
 cursor: pointer;
}

And the link the way I would like it to work:

<a id="btnCancel" href="CMS-contentlist.aspx" class="grey button-link2">Cancel</a>

Thanks in advance!

Stewart Whitworth
  • 49
  • 5
  • Does it work when you do other CSS properties in the external file? – Phoenix Logan Oct 29 '13 at 11:50
  • 1
    Code seems to be working fine what's wrong? – Dhaval Marthak Oct 29 '13 at 11:51
  • Are there any styles defined for the button-link2 class ? What about styles for all A elements in the whole website ? Try using Firebug or similar to determine where the blue is coming from. – grimmus Oct 29 '13 at 11:52
  • Remember that if you have linked more than one css file and more than one file has conflicting rules (different `color` rules) for the same class i.e. `.grey`), then the css file which is linked last in the html `header` prevails. Also if you have a `color` in the `btnCancel`, it prevails since id prevails on class thanks to the specificity rule. – mastazi Oct 29 '13 at 11:55
  • Phoenix: Yeah, I've got a bunch of other stuff in there that works fine. Dhaval: The text is not being changed to grey. Grimmus: There is indeed other styling in button-link2, I will edit it into the original post. – Stewart Whitworth Oct 29 '13 at 11:56

7 Answers7

1

you would either need to apply the text color to the element outside of the link or add the a attribute.

a.grey,
.grey {
  ...
}
aaronmallen
  • 1,328
  • 1
  • 11
  • 26
  • I appended the 'a.grey,' to the Site.css and it solved the problem, thank you very much! – Stewart Whitworth Oct 29 '13 at 12:04
  • 1
    @Stewart: Do you understand why you had to do this? This was a specificity problem: (http://stackoverflow.com/questions/2809024/points-in-css-specificity/11934505) – Faust Oct 29 '13 at 12:29
0

Make this as important. Use only if it's necessary

//Site.css
 .grey {
 color: grey !important;
 }
Devubha Manek
  • 96
  • 2
0

Just wanted to confirm that you have below piece:

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
Digvijay Verma
  • 186
  • 8
0

Is it the spelling mistake? Try "Gray" instead of "grey"

Vishal
  • 51
  • 1
  • 6
0

The problem is, you might have in the same Site.css other link settings that override yours. By default, there are such style properties defined for hyperlinks. Get rid of those, or use this:

#btnCancel.grey {
 color: grey;
 }
ER144
  • 685
  • 4
  • 10
0

This type of problem is fairly easy to solve with a DOM inspection tool like Chrome Developer Tools. In Chrome, right-click on the element and select "Inspect element" and in the window that pops up you will be able to see all of the possible declarations that could be overrriding your .grey class's color declaration.

And be sure you know your CSS specificity rules really well.

do not use !important, if you can avoid it.

Community
  • 1
  • 1
Faust
  • 13,751
  • 9
  • 48
  • 107
0
.grey
{
color:gray;
}

This will work.

Rohit Galgali
  • 21
  • 4