The World of CSS Colors
Named Colors
- There are named colors as well as other colors like RGB and hexadecimal color
- There are 140+ pre-defined named colors that are pick from (check on website)
Color: red;
Understanding RGB Colors
- RGB colors are simplification for Red Green Blue. We use rgb (0,0,0); to specify the color. First letter is for Red, second Green and then Blue the numbers from 0 to 255.
- Other color are change to values 0 to 255 for all three.
Color: rgb(245,255,167);
Hexadecimal Colors
- Like #f567f4, first 2 for red middle 2 for Green and last 2 digit for Blue. So, there is from 00 to FF like 0 to 255 in rgb. In Hexadecimal, numbers goes to 0 to 9 and A to F. A to F indicates the decimal values 10 to 15.
- We also change in short when both digital of red, green, blue is same like, #ffff00 change into #ff0
Color: #fe45fd;
RGBA Colors and Opacity
- RGBA, A for Alpha which means that the opacity of the color how hard or mixture with others. It is value from 0 to 1 with three decimal places.
- Other is we use opacity tag separately which also value from 0 to 1 with decimal or in PERCENTAGE. The one disadvantage to that, is this use all of it content or other in this box apply’ s all-over
Color: rgba (245,255,167,0.9);
Colors Quiz
- rgb (255,255,255) is code for white
- rgb (0, 25, 100) is code for dark blue
- #ff0000 is code for red. Als shortened for #f00
- rgba (255,0,0, 0.8) is red with little transparency
CSS Inheritance
- Some CSS properties, like color are inherited from parent elements if no value is specified. Other properties are not inherited and instead have a default initial value
- If we color change for paragraph to olive and inside of tag <em> it also be changing the color to olive because of inherited from parent element <p>. Change in <ul> also change in <li>.
- Some of tags are not inherited like border. If we want to it, we use border: inherited; tag to CSS style.
Working with Background-Color
Color properties
We use the color property to change the text color of an element
p {
color: yellow;
}
Background color
Use the background-color property to change the background color of an element
p {
Background-color: yellow;
}
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Table of Contents
Interesting Posts
BSCS 3rd Semester Notes
15/07/2024
50+ WordPress Template kits Free
29/08/2024
AKUEB 12th Notes
20/09/2024
How Web3 is Transforming Web Development
02/04/2025
Hazel CV HTML CSS Project
24/12/2024
Database Management System Handwritten Notes
10/10/2024
Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended
2 Responses