CSS Colors
CSS provides different options to define colors for HTML Page.
- CSS Color can be applied to text or fonts in HTML Tags
- CSS Color can be applied to background areas of HTML Tags & page.
- CSS Color can be applied to borders of various HTML Elements
CSS Colors value can be specified in various formats:
| Format Name | Color Value | CSS Example |
|---|---|---|
| Color Name | red | p { color: red } |
| Hexadecimal (Hex) | #RRGGBB | p { color: #00FF00; } |
| Short Hex Code | #RGB | p { color : #F00; } |
| RGB % | rgb(rrr%,ggg%,bbb%) | p { color : rgb(255, 0, 0); } |
| RGB Absolute | rgb(rrr,ggg,bbb) | p { color : rgb(255,0,0); } |
Some Color Codes
All modern browsers support hundred of colors. You can combine different color values & create various color shades.
There are many online tools & websites available that provide a list of colors as well. For Example: www.w3schools.com has a long list of color codes and www.quackit.com also provides a tool to generate color codes by simply picking any color.
The following table provides a list of some common colors with code values that you can use for practice.
| Color Output | RGB Value | Hex Code | Short Hex | Color Name |
|---|---|---|---|---|
| Sample | rgb(0,0,0) | #000000 | #000 | black |
| Sample | rgb(255,255,255) | #FFFFFF | #FFF | white |
| Sample | rgb(255,0,0) | #FF0000 | #F00 | red |
| Sample | rgb(0,255,0) | #00FF00 | #0F0 | lime |
Sample | rgb(0,0,255) | #0000FF | #00F | blue |
| Sample | rgb(255,255,0) | #FFFF00 | #FF0 | yellow |
| Sample | rgb(0,255,255) | #00FFFF | #0FF | cyan |
| Sample | rgb(255,0,255) | #FF00FF | #F0F | magenta |
Example of HTML Program using CSS Colors
We will create an HTML Program that will use different colors on different tags. Following example will use different CSS Color Values to apply colors.
<html>
<head>
<title> CSS Colors Format Examples </title>
</head>
<body style="background-color:black">
<h1 style="background-color:blue">Color Names Examples</h1>
<h2 style="background-color: red">
Background Color is defined red using color name.
</h2>
<h2 style="color:yellow">
This heading color name is set yellow.
</h2>
<h2 style="background-color:rgb(0,128,0)">
RGB value of Green Color is (0,128,0). This background Color is set using RGB
</h2>
<h2 style="color:#FFA500">
This heading color orange is defined by Hex value #FFA500.
</h2>
</body>
</html>We will read CSS background-color & color properties detail in later chapters.
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |