CODEWITHSUNDEEP
javascriptcss
Jeff
Jeff

Reputation: 8431

Set different styles on a single element

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

Upvotes: 0

Views: 490

Answers (2)

Bruce Wayne
Bruce Wayne

Reputation: 11

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>

Upvotes: 0

RJM
RJM

Reputation: 1178

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.

Upvotes: 5

Related Questions