Having trouble styling Schema text

Question

Link to site in question.

In the footer, just above the copyright notice, I have a small block of Schema microdata. Business name, address, phone number. I want that text to be write, matching the copyright notice below it.

I've tried to do it like this:

<div class="schema_footer"> Schema block here</div>

And in my css file:

 .schema_footer {color: #ffffff;}

Why doesn't this work?

Answer 1

Try this, the HTML is more complex than the example you have provided as shown in the screenshot. There may also be more specific CSS that you can't override unless your CSS is at least as specific:

.footer .schema_footer div,
.footer .schema_footer span
{
    color: #fff;
}

It is not good practice, but you could also add the important rule color: #fff !important; to try and override the previous styles that have been set.

Answer 2

That is because there are more specific rules that overrides the rule mentioed in the .schema_footer like the one below:

....
.footer span, .footer a {
  color: #666;
}

So you need to make your rule even more specific like.

 .footer .schema_footer span, .footer .schema_footer a {
   color: #fff;
  }

or override the .footer style later in the stylesheet (or with multiple style sheets load this one later)

  .footer span, .footer a {
     color: #fff;
  }

No matter how bug the html is, You can always use the web inspector to inspect the styles applied and overridden. Here is how it looks after overriding and you can see the second arrow showing the actual rule applied before.

Answer 3

here is a simple solution

.footer {color: #fff;}