Published on: 07 August, 2013

CSS Colors

Tumblr Digg Google Plus

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

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.