title: Using CSS classes to Format a href:tel link
body: <p>I've recently inherited a site that's built entirely in HTML and CSS and uses an FTP portal. In the interest of making the site more mobile friendly I'm trying to implement click-to-call phone numbers throughout their website. The code I'm been using for the click to call is the classic:</p>
  
  <pre><code>&lt;a href="tel:#number"&gt;#number&gt;&lt;/a&gt;
  </code></pre>
  
  <p>There is a master CSS document for the site that provides the formatting for the various elements of their site. There is a <code>.phonenumber</code> class that sets the phone numbers at a size of 48px, makes the font arial, and red. Currently all the phone numbers are coded like so:</p>
  
  <pre><code>&lt;span class="phonenumber"&gt; phone #&lt;/span&gt;
  </code></pre>
  
  <p>However, this formatting disappears when I turn the phone # portion into a <code>&lt;a href=tel&gt;</code>. Even though the link is between the <code>&lt;span&gt;</code> the formatting does not seem to apply. Is there a way to format a click-to-call link using CSS classes? Or to manually set the attributes so that the number retains its red, 48px formatting while still acting as a link? Right now it appears I can either have it as a link or have it formatted. Please let me know if there is a work around.</p>