Tip for Styling Telephone Link Tags in HTML and CSS

With the continued growth of mobile devices, some browsers are choosing to add code to your site in order to provide their users with added functionality. For example, some create automatic links on your website’s phone numbers. You might also choose to add the code to your website voluntarily, but you want the phone numbers to retain the regular text properties. To solve this, you can use the following snippet in your site’s CSS.

305-555-1234
a[href^=tel] {
    color:inherit;
    /* optional */ text-decoration: none;
}

And viola! From now on all telephone links will inherit its parents’ properties.

Read More »