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

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

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 - 5
Not - 6

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Our rating
🏆The best website hosting
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 56408
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 42569
Appearance of elements on scrolling
Views: 41851
How to center an image with CSS
Views: 25881
How to make a button click effect in CSS
Views: 19443
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;
Viva Magenta
🤔Color of 2023
The Pantone Research Institute has chosen the color of the year for 2023. They became a carmine-red shade with a purple undertone, which was called Viva Magenta.