A tag class not working

Question

I have an A tag I'm trying to add a class to. This is probably really simple stuff but I've never done this before.

<a class="button" href="landscaping.html">Find out more about our landscape design services</a>

And the CSS:

a .button{
color:#7cc242;
font-family: 'PTSansNarrowBold';
font-size:18px;
margin-top: 7px;
margin-bottom: 0px;
text-align:right;
text-decoration:none;
display: inline-block;
zoom:1;
*display:inline;
padding-right:30px;
background:url(images/more-btn.png) no-repeat top right;}

Nothing seems to be working, I'm just getting the standard blue. Can anyone help?

score 9 · Accepted Answer · edited Jul 18 '12 at 20:35

9

There shouldn't be a space! Please change:

a .button{

to:

a.button{

Check out fiddle here: http://jsfiddle.net/VhaNQ/

edited Jul 18 '12 at 20:35

BoltClock

700,868
160
1,392
1,356

answered Jul 05 '12 at 10:22

Praveen Kumar Purushothaman

164,888
24
203
252

2

Thank you so much! D'oh - I knew it'd be one of those silly problems. Thanks for helping me see the blindingly obvious! – Francesca Jul 05 '12 at 10:24

score 7 · Answer 2 · answered Jul 05 '12 at 10:24

What you say in your CSS is "I want all children with class button, of all a tags to use the next CSS rules".

What you need to say is "I want tag a with class button to use the next CSS rules".

This is achieved by writing the next CSS:

a.button{
  color:#7cc242;
  font-family: 'PTSansNarrowBold';
  font-size:18px;
  margin-top: 7px;
  margin-bottom: 0px;
  text-align:right;
  text-decoration:none;
  display: inline-block;
  zoom:1;
  *display:inline;
  padding-right:30px;
  background:url(images/more-btn.png) no-repeat top right;
}

Note that there is no space between a and .button

Spaces between tags/classes/ids means "children of element".

Good luck :)

score 3 · Answer 3 · answered Jul 05 '12 at 10:24

3

Remove Space from a .button like this a.button or use simply .button

answered Jul 05 '12 at 10:24

Ahsan Rathod

5,465
2
21
25

A tag class not working

3 Answers3