In CSS, you can style text in different colors. You can specify the colors in 3 different ways.
Color Style | Example |
Using color name | p {color:blue;} |
Using hex value | h1 {color:#000000;} |
Using color RGB value | a {color:rgb(255,255,0);} |
Note: you can apply a background colour as well, so it is not entirely can be applied to text only. See below css example:
.box { background-color:blue; } /* You can use another alternative like this as well:*/ .box { background:blue; }
As you can see, you can apply either using background or background-color. Just be careful when you use the background property as it will wipe the entirely background. See below scenario, let's say you have a div that you want to have an image background.
/* This first example will have a background image logo with an addition of blue background wrapping the image.*/ div { background:url(images/mylogo.gif) no-repeat; background-color:blue; } /* The second example will only have a blue background, as the image background has already been wiped out by the blue background. */ div { background:url(images/mylogo.gif) no-repeat; background:blue; }
CSS Color Examples
You have now learnt the basic of styling color, in the following examples, you will see how it is going to work.
CSS Style | Apply To | Result |
h1{ color:#ff0000; } |
h1 (Heading 1)
Using hex color (red)
|
Heading 1 Red Color |
h2{ color:blue; } |
h2 (Heading 2)
Using color name (blue)
|
Heading 2 Blue Color |
p{ color:rgb(84, 255, 0); } |
p (Paragraph)
Using rgb color (green)
|
paragraph sample content. |
h3{ background-color:#a9bf9e; } |
h3 (Heading 3)
Using background hex color
|
Heading 3 |