CSS. How to change colors

This tutorial will show you how to change the colors in any HTML based template using the CSS style properties.

Items on the pages can be colorized in two ways: color codes or images. First of all open your website in browser and press F12 button to open the browser developer tool.
Using this tool you can find the style properties of any element on the page. If you are not familiar with browser developer tools please check this article.
For example you can see the following style:

 
.button {
    background: -moz-linear-gradient(#FF8E00, #FF7F00) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    color: #FFFEFE;
    display: inline-block;
    font-family: 'PT Sans',sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2em;
    padding: 20px 27px 19px;
    text-transform: uppercase;
}
 

In the style properties above you can see several color codes: #FF8E00, #FF7F00, #FFFEFE etc. Each of them defines it’s own color. You can get the color codes from any image editing software.

Copy the code to your CSS file, save it and refresh the page in browser to see the changes.

In case the background color is created using the images you can change the image file or replace the image background with the color one.

For example you have the following style:

 
.box-red {
    background: url("../images/box-red.gif") repeat scroll 0 0 transparent;
    border-bottom: 1px solid #E8837E;
    border-radius: 9px 9px 9px 9px;
    border-right: 1px solid #E8837E;
    border-top: 1px solid #E8837E;
    color: #FFFFFF;
    position: relative;
    width: 315px;
}

Where the background is set using the image:

 background: url("../images/box-red.gif")  repeat scroll 0 0 transparent;

You can go to the images folder and replace the box-red.gif file with your background image or simpley replace the image background with color

Replace:

background: url("../images/box-red.gif")  repeat scroll 0 0 transparent;

with

background: #E8837E;

Feel free to check the detailed video tutorial below: