Ways to Control Colors On Web Pages By Using CSS

Tutorial # 10

In this tutorial I am going to talk about the ways by which we can control the colors on web pages by using CSS, Starting from the first example code, In this code the background body of the web is assigned a light blue color, while the text on the web is assigned dark blue color. If you are following my all tutorials, you will understand it easily, the code is self explanatory. But if you want to set color to particular blocks like paragraphs then you have to include a CSS a code into the paragraph portion, just like the one shown in the below code.

<html> <head> <title> Background Color Example </title> </head> <body bgcolor=”#E7F5FB”> <p> <font color=”blue”> This text is blue </font> </p> </body> </html>

See Ouput 1

set color

Why CSS

So Why we are using Cascaded style sheets instead of using images because its quiet easy to setup color schemes and later when you want to make changes its become very easy to make changes to web color by using style sheets. If you are very lazy person then CSS is the technology for those lazy person, because assigning colors using CSS is very easy.

In CSS

In CSS, you can specify the color of any element with color property. For Example you can set color properties by using the below CSS rule.

   { 
       color : Red;
    }

Following are the list of color property with different values.

  • color : <color keyword>          Set color to specified value
  • color : #rrggbb                             Set color to HTML-style hex notation
  • color :  rgb(rrr,ggg,bbb)           Set color using fix value from 0-255 for each parameter
  • color :  rgb(rrr%,ggg%,bbb%) Specify color as a % to rgb()
  • color :  inherit                               Inherit color from parent

In the 3rd property you can assign values ranging from 0-255, In the 4th property you can assign color by percentages from 0-100.

There are several ways of specifying what color to use in CSS. Some of them are listed below.

Hexadecimal Notation

To set the color property using hexadecimal notation following property is used. This is an example of using an hexadecimal notation. This below property will set the paragraph to white color.

p { color : #ffffff }

You can also use a shorter notation as shown below. This means that instead of using six hexadecimal number you have only three  number and this is red color.

p { color : #ff0 }

Functional Notation

Now here is an example of functional notation. Now I am assigning all values to 255, which means all RGB values are set to 255 so the result of this property will be all paragraph will become white. These values are separated by commas and these values are between parenthesis.

p { color : rgb (255,255,255 ); }

Now finally I am assigning again a color white but I am doing it by using percentages. So instead of specifying a 255 value I have specified a 100%, which represents a value 255.

p { color : rgb (100%,100%,100% ); }

Color Names

Theres is a set of 16 different colors which can be referenced by name. These color are

  • Yellow
  • White
  • Teal
  • Purple
  • Red
  • Silver
  • Olive
  • Navy
  • Maroon
  • Gray
  • Green
  • Lime
  • Fuchsia
  • Blue
  • Black
  • Aqua

So Here’s another example of specifying colors by name

h1 { color : green }
h2 { color : lime    }
p   { color : blue   }

Now lets take an example of using these colors in some code. Consider this example, Below you can see the output of the  below code. The H1 header is composed of a link and a header text but the color of the text is black while the color of the link is bluish. Even you can see the highlighted part of the CSS code, the header H1 has been set to color red.

You would be wondering why the color of the link is blue this is because be default the links do not inherit properties from the parent and you can see the link is enclosed in the tags represented by <a> link</a>.

<html> <head><title> Tutorial # 10 </title> <style type=”text/css”> <!–.blue {color:blue} .change { color:blue }

h1 {color:red}

–>

</style> </head>

<body>

<h1> <a href=”http://www.stylebizz.com”> StyleBizz.com</a> : Stylish Resources</h1>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

<p> This is <span class=”change”>3rd paragraph and this with </span> <em> new emphsized word </em> </p> </body>

</html>

 See Output 2

set color in css

Now what will happen if I change the color from CSS code assigned to Header H1, see code below and its output to completely understand this.

<html> <head><title> Tutorial # 10 </title> <style type=”text/css”> <!–

.blue {color:blue} .change { color:blue }

h1 {color:yellow}

 

–>

</style> </head>

<body>

<h1> <a href=”http://www.stylebizz.com”> StyleBizz.com</a> : Stylish Resources</h1>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

<p> This is <span class=”change”>3rd paragraph and this with </span> <em> new emphsized word </em> </p> </body>

</html>

 See Output 3

You can see the after changing the color from CSS H1 header on the color of text part changes, color of link remains the same because be default color property is not inherited by links.

change color in css

Now what to do if one’s want to change color of the Link, This can be done by inserting a CSS property on <a></a> tags.

<html> <head><title> Tutorial # 10 </title> <style type=”text/css”> <!–.blue {color:blue} .change { color:blue }h1 {color:yellow}a {color:yellow } –></style> </head><body> <h1> <a href=”http://www.stylebizz.com”> StyleBizz.com</a> : Stylish Resources</h1> <p class=”blue”> THis is first paragraph </p> <p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p> <p> This is <span class=”change”>3rd paragraph and this with </span> <em> new emphsized word </em> </p> </body> </html>

 See Output 4

Now you can see the color of the link also changes by applying a property on <a> tags.

change link color in css

See Tutorial # 9

Advertisement

[ads1]

2 thoughts on “Ways to Control Colors On Web Pages By Using CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>