Search code examples
htmlcsstel

how to style a tel link with different colors on different pages css

I currently have a tel link on my site:

HTML

Give us a call today on <a href="tel:+441234123456">01234123456</a>

CSS

a[href^="tel:"] {
  font-size:12px;
  font-color:white;
}

The only problem is that on another page I have the telephone number showing as part of some text and I need to show the tel number on this page in black and I am not sure how I override this?

Any ideas?

Solution

  • Simple answer: add an specific class to this phone container.

    <a class="phone-green" href="tel:+441234123456">01234123456</a>

    Then add a class modifier in css file:

    a[href^="tel:"].phone-green {
  font-size: 12px;
  color: white;
}