It’s possible to change text color with CSS to any color you want your text to be. There is more than one way to apply the text color change.
In order to change text color with CSS you just need to use color:; and name the color, you want the text to be.
Change text color inline HTML
In order to do it inline simply use style=”” on the element
Example
<p style="color:red;">This text need to be red</p>
<p style="color:green;">This text need to be green</p>
<p style="color:yellow;">This text need to be yellow</p>This text need to be red
This text need to be green
This text need to be yellow
Change text color with hex color code
You can use hex colors, to get more control of which kind of color is shown.
<p style="color:#a061d8;">This text need to be #a061d8</p>
<p style="color:#1c7db7;">This text need to be #1c7db7</p>
<p style="color:#e9184c;">This text need to be #e9184c</p>This text need to be #a061d8
This text need to be #1c7db7
This text need to be #e9184c
Change text color with RGBA color code
You can use hex colors, to get more control of which kind of color is shown. And with RGBA it’s also possible to make color transparent. The last number controls how much transparent the text is.
<p style="color:rgba(142,111,131,0.35);">This text need to be rgba(142,111,131,0.35)</p>
<p style="color:rgba(124,218,36,0.78);">This text need to be rgba(124,218,36,0.78)</p>
<p style="color:rgba(12,113,195,0.1);">This text need to be rgba(12,113,195,0.1)</p>This text need to be rgba(142,111,131,0.35)
This text need to be rgba(124,218,36,0.78)
This text need to be rgba(12,113,195,0.1)
Change Text Color With CSS Based On ID or Class
You can either put this in a style tag or assign it in a CSS file and link it to the HTML file. If it’s for a website built in a CMS, then there properly is a place where you can write in custom CSS.
For this demonstration, I am using the style tag for the CSS.
You need to assign the HTML elements classes or ID if they do not already have that.
CSS
ID = #
Classes = .
<style>
.redtext{
color:red;
}
#greentext{
color:green;
}
.yellowtext{
color:yellow;
}
</style>
<p class="redtext">This text need to be red</p>
<p id="greentext">This text need to be green</p>
<p class="yellowtext">This text need to be yellow</p>This text need to be red
This text need to be green
This text need to be yellow
