Published on: 07 August, 2013

CSS Colors

Posted by andy | 1083 views 0 likes 0 favourites 0 comments
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.
Related Articles
Published on: 20 May, 2016
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.
Published on: 31 January, 2016
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 the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.