In the previous turtorial, we discussed how to select elements with in CSS, where we discussed how to select elements by 'Tag Name', 'Class Name', 'Identifiers or Ids' and selection of multiple elements within the page.
Therefore, we continue from the previous turtorial today, if you are not familiar with selectors or you wanna read further, do refer to our previous post CSS Selectors, Properties and Values to read more.
There are many ways to implement the use of colors to style an element, the porpular way is by using keyword. But in this article I will guide you on how to use:
- Keywords
- Hexadecimals
- RGB and RGBa
Adding Colors by Keywords
This is the most porpular and easiest way to implement colors in to your webpage, because here we use keywords, or pairs of it, as in red, blue or navyblue, darkgreen respectively. But there are limitations to applying colors in these way, reason is that you can't memorize all the color names, hence you need to learn the proceeding way to add colors which I will discuss next.
Example of Adding Colors by Keywords can be seen in the images below:
Adding Colors by Hexadecimals
Selecting a color with Hexadecimal is the best and most professional way of adding colors, hexadecimals are kinda random strings starting with a the pound sign '#' followed by the random string, which may be combination of numbers and alphabets or just alphabets as in '#fff' or '#e3f7d2'.
Limitation to adding hexadecimal colors is very huge, developer must use third-party websites such as W3School or application with web color pickers such as photoshop. Please refer to https://w3school.com/ to learn more about color pickers.
Adding Colors by RGB and RGBa
As the name implies RGB stands for Red, Green, Blue which is a popular acronym to developer or any body using a mobile or a computer.
RGB Method uses three seperated figures by a comma, embedded in an open and close parenthesis, example rgb(0, 0, 0) where the first, second and third figures represent Red, Green and Blue respectively. The figures ranges in a scale of 0-255, where rgb(0,0,0) represents black and rgb(255,255,255) represents white. You can use Visual Studio Code, VS Code color picker to select your suitable color in the rgb form.
The small 'a' in the RGBa just represents the opacity of the color selected, example rgba(0,0,0,1) represent an opaque white where rgba(0,0,0,0.1) represents low opaque black, the opacity scale ranges from 0.1 - 1.0.
Seletions of colors this way also requires the use of third-party apps as listed above.
Thanks for visiting our blog and reading the posts, please make sure you read more on these blog, check related post to learn more about CSS and feel free to comment and send us feedback if necessary, once again THANKS.