How can i add differents styles to differents part of a line in HTML and print everything together?

Question

I want to add different styles to differents parts of a line in HTML and then print that line together. Imagine i have the next line:

Hello my name is Bogdan and i live in Spain.

I managed to add different styles to the line, but i can't manage to put all the parts together with different styles applied to each one of them.

<!DOCTYPE html>
    <html>
    <head>
    <style>
    <style>
    div{
    }.bold{  font-weight: bold;
    }
     .normal{  font-weight: normal;
    }
    .italic{
        font-style: italic;
    }
     .left{
       text-align:left;
     float:left;
    }
     .container{
     letter-spacing:-1px;
     width: 372px;
      font-family: Monaco,monospace;
     font-size:19px;}
     .center{
       text-align:center;
    }
     .underline{
      text-decoration: underline;
    }
     .doubleFont{font-size:38px;}
    
    </style>
    </head>
    <body>
  <div class = container>   
   <div class=>
    <div class=>Hello my name is Bogdan</div>
   </div>
   <div class="underline bold">
    <div class=>and i live </div>
   </div>
   <div class="bold">
    <div class=>in Spain</div>
   </div>
   <br>
  </div>
    </body>
</html>

score 0 · Accepted Answer · answered Jun 10 '20 at 20:27

Replace the divs with spans like that:

<span>Hello my name is Bogdan</span>
<span class="underline bold">and i live </span>
<span class="bold">in Spain</span>

Spans are inline elements and wrap on one line. Divs always go on next lines unless set otherwise. Also consider setting bigger width on .container class.

How can i add differents styles to differents part of a line in HTML and print everything together?

1 Answers1