Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with CSS Color Property

This tutorial will discuss some basic concept of CSS coloring like CSS color property. We discuss the Element Color, Background Color, Background Color, Foreground Color and Background Image.

Introduction:

This tutorial will discuss the CSS color property. CSS uses color values to specify a color to HTML element. Basically we set a color either for selected element (i.e. image, text etc) or else for complete background/foreground of element. Sometimes colors can be used to color the borders and produce different decorative and interactive effects. Color property allows developer to define the color of an element in a CSS style sheet, for accessing color property there are some predefined formats.

  • Color Name: (Keyword) such as Red, Black, Blue, Green Etc.
  • Color Code: (Hexadecimal Code) such as #000000 for black , #FF00FF for pink
  • RGB: RGB % or RGB absolute can be use to access the color .RGB % will define the color in % way such as rgb (50%,50%,50%) and RGB absolute will use rgb (0,0,255) .
  • There is one more method to access the color property, short hex code, Syntax will be like this #RGB and short example of accessing this property is p{color:#6A7;}

Element Color:

Basically we have three ways to define color property.

  • Setting the background color for contents
  • Setting the foreground color for an area
  • Setting a background image to fill out an area.
Given section will show you how to work with colors:

Background Color:

Setting the background color for body element will apply the color in whole page.

Listing 1: Script to Background Color

<!DOCTYPE html>
<html>
<head>
<title>Mrbool.com Tutorials - CSS Colors</title>
<style type="text/css">
body
{
background-color:#DEB887;
}
</style>
</head>
<body>
<h2>This is CSS Color tutorial and this line is having a background color</h1>
<p>This is a paragraph content for page: Paragraph tag is of the most useful tag in HTML.</p>
</body>
</html>
 
Above figure is output of background coloring script

Figure 1: Above figure is output of background coloring script.

Foreground Color:

Foreground color change the color of text. In following example two colors are used for text coloring.

Listing 2: Script of foreground coloring

<!DOCTYPE html>
<html>
<head>
<title>Mrbool.com Tutorials - CSS Colors</title>
<style type="text/css">
body { color:red;}
h1 {color:#00ff00;}
p{color:rgb(100,100,255);}
</style>
</head>

<body>
<h1>This is example of text coloring in CSS </h1>
<p>This paragraph is demonstration of foreground color. This color is generated by using the RGB color. You can specify the color by giving 6 char hexadecimal values also.</p>
</body>
</html>
 Above figure is output of text coloring which provide foreground

Figure 2: Above figure is output of text coloring which provide foreground.

Background Image:

this property sets the background image of an element via the specified URI, where URI value accept the path of location at which the image are stored. CSS also gives us the tools to direct our background image how we want it. by default as you will see in example ,is that it repeats itself vertically and horizontally to fill the entire background. This is independent of size. Sometimes we might want the image appear only horizontally or vertically - and maybe not directly on the edge of the viewing area. You will get a full overview in listed script.

Listing 3: Background image with Colors

<!DOCTYPE html>
<html>
<head>
<title>Mrbool.com Tutorials - CSS Colors</title>
<style>
body { background-color:#87CEFA; }
p { background-color: green;
	color: white; }
h2 { background-color: blue; }
ul { background-image: url(Image_Box.jpg);
     background-repeat: repeat-y;
     color: black;
     background-position:left;
 }

</style>
</head>
<body>
<h2>This is example of setting background images on page.</h2>
<p>This page has a sky color background. </p>
<ul>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
	<li>List Item 4</li>
	<li>List Item 5</li>
</ul>
</body>
</html>
 
Above figure is output of background images in CSS along with colors

Figure 3: Above figure is output of background images in CSS along with colors

Conclusion:

This tutorial covers some basic concept of CSS coloring. Hope it will help you to design the page in more colorful manner. Please comment here if you have any questions.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login