CSS Colors
By Tony
6.9.2024
According to research, colors affect your mood a lot. It's also really important to add colors to your website to make it more interesting, and for it to have a character and improve the element visibility. Today, we'll learn how to add colors to text on your website using CSS. Below are some of the ways that you can add CSS colors.
color: red;
color: #0000FF;
color: rgb(0, 255, 0);
color: rgba(100,100,100,0.5);
In the above code examples, we listed four different ways to add colors to text using CSS. To add a color to an element, type the color property in your element's CSS. For the value of the rule, there are a couple options. The named colors are the easiest to add, simply just type the name of the color, but it may be limited. Hex code covers all the colors, but is a complicated string with numbers and letters, with a hashtag in front. Then there's rgb, which stands for red, green, and blue, like this: rgb(0, 255, 0). The numbers inside the parentheses represent how much of each color is used in the mix. So in this example, there's no red (0), a max amount of green (255), and no blue (0). Rgba works exactly the same as rgb, except there's an added value at the end, called "alpha", which determines the color's opacity, or transparency.
In conclusion, the CSS property of "color" adds a specific color to an element's text, and you can set the value of the color with named, hex, rgb, or rgba values.
Play around and experiment with the different values above to explore more about CSS colors, and you'll learn how they work and how to use them properly! Move on to learn more about adding a background color to your page and the elements to make your website more interesting. Onward!