Book Top Rank with Contact Details visibility for your Business, Profession, Products or Services

which css property is used to change the text color of an element

Question by Saravana s On 21 July 2022, 10:46:00

(Page Views: 267)

Answer by Saravana s On 21 July 2022, 10:48:37

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.

Which CSS property is used to Change the Text Color

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

You should 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. 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.

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.

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.

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.

click here to read more