Edit Content
Icon Ahmadwebx

Linktree

info@ahmadwebx.com
Facebook Twitter Youtube Linkedin
© Ahmadwebx . 2025.

The World of CSS Colors

  • CSS

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;
}

Learn more about colors 

W3Scool            MDN

Basics of CSS

Facebook
Twitter
LinkedIn
Pinterest
WhatsApp

Table of Contents

Interesting Posts

Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended

- Fazal Rehman Tweet
Read more about poetries

Ahmad Shafi Poetry

Read More

2 Responses

  1. Pingback: CSS Basics - AhmadWebx
  2. Pingback: Design and Analysis of Algorithms - AhmadWebx

Leave a Reply

Your email address will not be published. Required fields are marked *

Ahmadwebx Logo Green
Facebook Twitter Instagram Linkedin Pinterest Behance