Search code examples
htmlcssfonts

How To Use CSS To Add Multiple Fonts In One Paragraph?


I'm trying to get a title and text into one paragraph. The title, however, should have another font than the text. I could get it to work using a lot of <div>'s but it's hard to do it that way. I'm looking to do it without a lot of <div>'s but i figured it might be impossible without any <div>'s. Here's my code:

<div class="blue">
<p class="font2">
Bits
</p>
<br>
<p class="font1">
Een bit is een kleine schakelaar die open of gesloten is. 
De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.
De enen en nullen kunnen worden gezien als ja en nee of aan en uit.
Computers gebruiken deze waarden om informatie op te slaan en te lezen.
</p>
</div>

Thanks for your help!

I'd also like to ask another question:

 #menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 5px 5px;} 
    #menu1 a:hover {background-color: #0088FF} 
    #menu1 li {display: inline-block;} 
    #menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

Here's my code. I'm trying to get it all under one #menu1 Because i'm working with multiple menu's and i don't want to lose my overview.

Thanks for your help!


Solution

  • Try this simple method using span

    best way to add class to text is using <span> and to change style use font-family:

    .bold {
      font-family: cursive
    }
    
    .italic {
      font-family: fantasy
    }
    
    .underline {
      font-family: monospace
    }
    
    .italic {
      font-family: serif
    }
    <div class="blue">
      <p class="font2">
        Bits
      </p>
      <br>
      <p class="font1">
        <span class="bold">Een bit is een kleine schakelaar die open of gesloten is.</span>
        <span class="italic">De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.</span>
        <span class="underline">De enen en nullen kunnen worden gezien als ja en nee of aan en uit.</span>
        <span class="boldit">Computers gebruiken deze waarden om informatie op te slaan en te lezen.</span>
      </p>
    </div>