How to change the color of only one word in a paragraph?

Asked

Viewed 15,114 times

2

For example, in a paragraph:

<p id="paragrafo">
    Bla bla bla
    banana uva morango
    bla bla bla
</p>

How would I change the color of just the word "grape," for example?

  • You can’t edit HTML for this?

  • I don’t know. Can I? How?

  • <span class="cor">uva</span>

  • I think the question lacks information. Is the text dynamic? Can’t you directly change the HTML? Why "grape"? What if it’s another text?

  • Sorry, I didn’t know I had to report this. I can directly change the HTML yes.

  • @Sam Ops! True! kkkk! Malz! Always confusing you with the hugocsl... Look at the post I confused: https://answall.com/a/353798/45810. The shot backfired.

Show 1 more comment

3 answers

9


How to change the color of just one word in a paragraph?

Put a span, which is the tag most recommended for this purpose in the word uva and style as you please:

<p id="paragrafo">
    Bla bla bla
    banana <span style="color: #f00;">uva</span> morango
    bla bla bla
</p>

Another way, more ideal, would be to add a class to the tag span and stylize inside a block with tag style:

<style type="text/css">
    .corVermelha {
        color: #f00;
    }
</style>

<p id="paragrafo">
    Bla bla bla
    banana <span class="corVermelha">uva</span> morango
    bla bla bla
</p>

PS: It is recommended that the tag style stay inside the block of tag head of HTML. As much as it works out, it is advisable to do so.

References:

HTML <span> Tag;

HTML <style> Tag;

Finally, I recommend that you study a little bit about the tags of HTML and about the stylization with CSS.

  • Thanks, man. That’s right. Thanks!

3

Place your customizable text within a tag and assign it a class, so you have a customizable inline element. I hope I’ve helped

.palavra{
  color: purple;
}
<p id="paragrafo">
Bla bla bla
banana 
morango
bla bla bla
<span class="palavra">uva<span> 
</p>

3

You can do it like this

<p id="paragrafo">
    Bla bla bla
    banana <span style="color: #4286f4">uva</span> morango
    bla bla bla
</p>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.