CODEWITHSUNDEEP
htmlcss
WarpPrime
WarpPrime

Reputation: 235

Make HTML text have 2 colors without making new line

I am trying to create HTML text that contains two colors (yellow and white), without creating a new line when switching colors. I have attempted to do this:

<p style="color:fc0;background-color:404040">Text Color Yellow <style="color:fff">Text Color White</p>

It doesn't work, as there is no p coming before the style element to change the color.
My other way is to make two lines, but there is a bar of blank whitespace between the two lines of gray:

<p style="color:fc0;background-color:404040">Text Color Yellow</p> 
<p style="color:fff;background-color:404040">Text Color White</p>

Is there a solution to this problem?

Upvotes: 2

Views: 7676

Answers (6)

Moosa Saadat
Moosa Saadat

Reputation: 1167

Wrap the white text in span. And, then set it's color property to white. This will work:

<p style="color:#fc0000;background-color:#404040">Text Color Yellow <span style="color:#ffffff">Text Color White</span></p>

Note: You are also missing # signs in color codes.

Upvotes: 4

Michael Provenzano
Michael Provenzano

Reputation: 3

This worked for me

I used a span tag to change the color of everything in to red.

<h1><b>Cool - <span style="color:red"> <b> Warnings</b></span></b></h1>

Upvotes: 0

DOMDocumentVideoSource
DOMDocumentVideoSource

Reputation: 646

CSS can be stupid just use basic HTML

<font color="#FFFFFF">Text Color White</font>

No stupid new lines extra commands values parameters.

Upvotes: 0

Rafik Farhad
Rafik Farhad

Reputation: 1202

Other answer will work correctly. But if you do not want to write any additional tags, try this: 

<p style="color:#fc0;background-color:#404040;display:inline">Text Color Yellow</p> 
<p style="color:#fff;background-color:#404040;display:inline">Text Color White</p>

Upvotes: 0

Rashik Karmacharya
Rashik Karmacharya

Reputation: 1

you can use gradients for that but its better to have limited use or things get ugly.

this can be helpful https://cssgradient.io/blog/css-gradient-text/

Upvotes: 0

Algef Almocera
Algef Almocera

Reputation: 819

Well, there are multiple ways you could do this. One quick way would be to use <span>:

<p>
  <span style="color:#ff0;background-color:#404040">Text Color Yellow</span>
  <span style="color:#fff;background-color:#404040">Text Color White</span>
</p>

Also, if you want to remove the line space in-between, you just need to put it in one line like this:

<p>
  <span class="yellow">Text Color Yellow</span><span class="white">Text Color White</span>
</p>

I separated the styles to make it shorter:

.yellow {
    color: #ff0;
  background-color: #404040;
  margin: 0;
}

.white {
    color: #fff;
  background-color: #404040;
  margin: 0;
}

Upvotes: 3

Related Questions