In the last article, we learned about multiple style sheets and effect of applying more than one styles to the particular element. Hope you all have tried various examples involving all types of styles.
In today's article, we are going to see some CSS properties most of which we have already covered in style tag in HTML. Let's begin...
In today's article, we are going to see some CSS properties most of which we have already covered in style tag in HTML. Let's begin...
CSS Colors
- All the standard web browsers support 140 standard Colors which you can directly use by specifying the color name.
- Here is the link to 140 Standard Colors.
- You can also specify other colors by one of the following methods:
- RGB Value
- Formula: rgb(red, green, blue)
- Each parameter that is red, Green and blue defines the intensity of the color between 0 and 255.
- Examples:
- Red: rgb(255, 0, 0)
- Black: rgb(0, 0, 0)
- White: rgb(255, 255, 255)
- HEX Value
- Formula: #rrggbb
- rr(red), gg(green) and bb(blue) are hexadecimal values betwwen 00 and ff (which is same as 0-255 in decimal)
- Examples:
- Red: #ff0000
- Black: #000000
- White: #ffffff
- HSL Value
- Formula: hsl(hue, saturation, lightness)
- Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
- Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
- Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white.
- Examples:
- Red: hsl(0, 100%, 50%)
- Black: hsl(0, 100%, 0%)
- White: hsl(0, 100%, 100%)
- RGBA and HSLA Value
- Formula: rgba(red, green, blue, alpha) or hsla(hue, saturation, lightness, alpha)
- This are nothing but extension of original RGB and HSL colors respectively.
- An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).
- Visit Color Picker
- Uses:
- Background Color
- Text Color
- Border Color
That's all for today. We have learned everything one needs to know about colors in HTML and CSS. In the next article, we will continue to other CSS properties.
Till then #keepCoding.
