You are currently viewing Which CSS Property is used to change the text color of an element
  • Post category:CSS

Which CSS Property is used to change the text color of an element

Which CSS property is used to change the text color of an element

You can use the “CSS COLOR PROPERTY” to change the color of the text in your HTML element. Color properties in CSS are used to specify the text color to be applied to the content of the HTML element.

<h1 style="color: red ;"> HELLO EVERY ONE </h1>

Text color is very important in a website because if we give some important words in a different color instead of black, the user will understand it easily. Whenever we look at any website, the default text color is black and the link text color is blue. You can change the text color as per your choice using CSS property. You should not use a lot of colors on a website, just use 2 or 3 colors to make your website look attractive. In this article, I will tell you, which CSS property is used to change the text color of an element and what is the correct way to change the text color.

Select the element whose text color you want to change in CSS and use the color property to give it the color you want. The default text color of all HTML elements is black, So you don’t need to change your text color to black. If you create a link using the <a> tag, your link text will change to blue color, then use a color value of black if you want. If you change the color of the link text to black, your user cannot recognize the link text because the text color and link text color are black. So don’t change the link text color.

READ ALSO  What Happens If You Set the CSS flex-shrink Property to 0?

If you can’t find the value of the RGB, HSL, and Hexadecimal color, use the color wheel below to find your color’s value.

[WP-Coder id=”2″]

CSS color property values

You can specify 4 common values ​​for the CSS color property. The ​4 values of the color properties are:

  • Colors name
  • Hexadecimal
  • RGB
  • RGBA

1. Colors name value

p{
color:blue; }

You can use color names like red, green, blue, etc.

2. Hexadecimal

p{
  color:#ff0000; }

If you want to create color in hexadecimal you need to put Hash (#) and then give 6 digit value, like the above code. Of those 6 digits, the first two digits are red, the next two are green, and the next two are green. In this method, you cannot use numbers, only used 0 and alphabets.

3. RGB

p{
  color:rgb(50, 0, 0); }

In this function, you can give 3 values and RGB indicated RED, GREEN, and BLUE. This function takes three arguments first is red, second is green, and third is blue. The minimum value we can assign to each color is 0 and the maximum is 255. The minimum value of 0 indicates the absence of that color and the maximum value of 255 indicates the full presence of that color.

4. RGBA

div{
 color: rgba(50, 0, 0, 0.5); }

In this function, you can give 4 values and we can give the RGBA function to assign a text color to the color property. RGBA indicated RED, GREEN, BLUE, and ALPHA. It is the same as the RGB function and the last argument indicates alpha that is transparency. You can use the minimum value 0 and the maximum value 1 in alpha. 1 indicates no transparency and 0 indicates transparency in alpha. Instead of transparency using the RGBA function zero, we can use directly an transparent value.

READ ALSO  How To Select Elements With Class Name 'Test' in CSS

Mostly use these 4 color values ​​and not so much the HSL value. If you set the transparency value to 0.5, your color will become a little bit lighter. You might think that RGB and RGBA are the same things, But it is not like you can change the color by reducing the opacity value.

RGB vs RGBA

RGB RGBA
3 values should be given in RGB ((Red, Green,Blue). 4 values should be given in RGBA (Red, Green, Blue, Alpha).
You cannot change your color opacity You can change your color opacity
In this, you cannot create. In this, you can create transparent colors.
Your color’s opacity value will default to 1 You can control and change the opacity value of your color
Ex: rgb(200,0,0). Ex: rgba(250, 0, 0, 1).

Conclusion

So I think from this article you will know how to give color to text. Give color to your text using hexadecimal value rather than using a color name because then your website will speed up a bit. So if you have any other doubts then ask in the comment box.

Leave a Reply