CSS Colors

andy - 07 Aug, 2013 3848 Views 0 Comment

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 {

/* You can use another alternative like this as well:*/
.box {

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;

/* 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;

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 (Heading 1)
Using hex color (red)

Heading 1 Red Color

h2 (Heading 2)
Using color name (blue)

Heading 2 Blue Color

    color:rgb(84, 255, 0);
p (Paragraph)
Using rgb color (green)

paragraph sample content.

h3 (Heading 3)
Using background hex color

Heading 3


There are no comments available.

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

Related Blogs

How to style pagination links with CSS?

Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.

Optimizing your site for printing

The easy way to optimize your site for printing is to create a separated external css targeting a media to print only When a printing action is being executed the browser will send over the information from your page to ...

Related Tutorials

CSS Z-Index

z-index is a css property that allows to position an object/element in front/behind of other elements.

What is CSS?

CSS stands for Cascading Style Sheet and is used to define of how the html elements displayed.