Set different styles on a single element

Question

Consider i have a text like HELLO_WORLD , and i am interested to set 2 different style style. For example, can i have HEllo_ in green, and the WORLD in blue.

Since I load all the character once like HELLO_WORLD. i am not interested to solutions like

<div style=s1>HELLO_</div>
<div style=s2>WORLD</div>

What i am looking for is somthing like a function which gets a number, and set style1 to the letters before this character and apply the other style to the rest

 function  applyStyle(charracterNumber){

    //Apply style1 to chars before charracterNumber
   .
   .
   .  
 //Apply style2 to chars after charracterNumber

}

charracterNumber is an integer

Answer 1

Styles are applied to an HTML element, not to parts of the element or its content. So to apply different styles, you will need the content in different elements.

Answer 2

It's very simple.

There is an element in HTML called span . It has no inherent meaning (no default style change).

You can put individual parts of a paragraph in a span . It was made for setting different styles to different spans of text. Put different parts of the text to set different styles to each one.

For your code, use this:

 <div><span style="color:green">HELLO_</span><span style="color:blue">WORLD</span> </div>