how to format a single html a href text to have multiple css properties (two different font families)

Question

I want to create a logo with CSS using two different font families on a single a href

For example

<style>
    a#logo{
        "LogoWith" - font-family:sans;
        "TwoFontFamilies" - font-family:Ariel;
    }

</style>

<a id="logo" href="#">LogoWithTwoFontFamilies</a>

I know the CSS I wrote is wrong. I just can't seem to find a solution to applying two different font-families on a single string.

Answer 1

Just use spans in the middle of your a tag:

<style>
   a#logo .oneFont { font-family: sans-serif; }
   a#logo .twoFont { font-family: Arial; }
   a#logo .redFont { color: red; }
   a#logo .blueFont { color: blue; }
</style>

<a id="logo" href="#">
    <span class="oneFont">LogoWith</span>
    <span class="twoFont">TwoFontFamilies</span>
    <span class="redFont">AsManyAsYou</span>
    <span class="blueFont">WantToUse</span>
</a>