How to handle background color of text using css, how to control or mange width of background color

Question

If we use
<p style="background-color: aqua"> please solve my query</p>

This line change background color of text as well as it will change whole line, i want to change only text background color.

Answer 1

Yeah got it we can use span

Answer 2

This will solve your issue. Write this in css:
p{
background-color:red;
width:auto;
display:inline-block ;
}

Answer 3

<p style= "background-color: aqua; color:red"> back ground in aqua, text in red..? </p>

<p style="color:aqua"> only text in color aqua ..? </p>

Answer 4

you can leave tag empty with colored background and use before or after pseudo-element.

HTML:
<p class="prgh" style="background-color: white"/>

CSS:
.prgh::after{
content:"text";
background-color: aqua
}

if you want easier:
maybe you will be able to do this in css4 :))
but in the current version, as I know, you can't.

Answer 5

<p style="color:aqua"> only text in color aqua ..? </p>

Answer 6

WarLord like this?

<p><span style= "background-color: aqua; color:red"> back ground in aqua, text in red..? </span></p>

Answer 7

Great thank you so much

Answer 8

WarLord
you can also create your own custom tags
https://code.sololearn.com/WHTwvuP4EOJP/?ref=app

Answer 9

To change the background color of the text only, you can use the background-color property in conjunction with the display property set to inline-block.

For example:
p {
display: inline-block;
background-color: aqua;
}

Answer 10

Finally we have four ways to do that

Answer 11

It's set default, if you want increase or decrease by using
Width ,height,background-size,etc

Answer 12

Your p tag whole paragraph text background colour will be aqua

You need to set the height width of div and inside div write the same paragraph tag and give div border colour

Answer 13

Hi,
You can put your code in a parent div and set the p tag width to 'max-content' (if needed??). The code will like this.
<div style="background-color: white">
<span style="background-color: aqua">your text...</span>
</div>

Have fun!

Answer 14

No thats the problem i just want a single line of paragraph

Answer 15

If you have multiple paragraph tag then you can assign a class or I'd to specific element and apply css

Answer 16

I said single line of paragraph and want to background color of text only not whole line

Answer 17

Ok

Answer 18

So in css , we have to write again line that we wrote in paragraph into content

Answer 19

Still background color will be whole line requirement is the background color must be only on text background color not whole line

Answer 20

Read properly need background of text is colourd and means if i wrote i like coding background of that word only should we in colour not whole line