How to set the text color in CSS – change the text color with styles

🗓️ Updated: 17.08.2022
💬Comments: 0
👁️Views: 863

Answer to the question

So the answer to the question “How to change the color of text in CSS” is pretty simple – with the color property. It’s enough to set to the desired selector (element, class, idi, etc.) the color property with a certain value. Most often, in practice, it looks like this:

p {
color: #ffffff;
}

This is how we set the white text color for all the <p> blocks.

Different formats

What you should pay attention to – the color can be specified in different formats.

For example, instead of #ffffffff you can write white and the color will still be white. Or instead of six symbols f you can write only three – it will still work. You can also specify a color using the RGB system. That’s when you mix the three colors (red, green and blue), to get one. Then the format will be like this:

p {
color: rgb(255,255,255);
}

The color is still the same white.

How to set text transparency

To set transparency for text, it is enough to use an extended version of rgb – rgba. Here we set the fourth parameter transparency (from 0 to 1). Here, for illustration, let’s make the black text a little bit transparent:

p {
color: rgba(0,0,0,0.5);
}

We hope that you got the answer to your question and now you will be able to change the color of text on your site without any problems.

Was the article helpful?
👍
Yes - 2
👎
Not - 0
💬Comments:

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Our rating
🏆The best website hosting
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 18276
Appearance of elements on scrolling
Views: 16837
How to center an image with CSS
Views: 6950
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 6785
How to make a button click effect in CSS
Views: 6208
Check of knowledge
🤔How well do you know CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Color of 2022
The Pantone Color Institute has announced the color of the year 2022. It's a shade of lilac lilac shade called 17-3938 Very Peri.
#6667ab