Color and background properties using css Grade 10 Computer Application

Color and background properties of using css Grade 10 Computer Application

Colors and Backrgound

in this section, we are going to discuss following properties pertaining to color and background 

  • color
  • background-color
  • background-image
  •  Specify Foreground color through Color Property.

Example Color & background-color property. HTML Code

<HTML>
<HEAD>
<TITLE> Color </TITLE>
<LINK REL=”STYLESHEET” TYPE=”TEXT/CSS” HREF=”SAMPLE2.CSS”>
</HEAD>
<BODY>
<h1> A Sample webpage for demonstrating Purpose </h1>
</BODY>
</HTML>

CSS Code:body {background-color: #fc9804;;}
H1 {color : #990000;}

Output:

Instructions to get this output:

  1. Save you html code in the notepad using .html extension with any name example color.html.
  2. Save your css code in the notepad using .css extension for example sample2.css in this case.
  3. run your program using browser.

Specify Background Image through the Background-Image Property.

HTML Code for backgound image using css

<HTML>
<HEAD>
<TITLE> 6.8.2 </TITLE>
<LINK REL=”STYLESHEET” TYPE=”TEXT/CSS” HREF=”SAMPLE3.CSS”>
</HEAD>
<BODY>
<h1> A Sample webpage for demonstrating Purpose </h1>
</BODY>
</HTML>

CSS code: 

body {background-image:url(“logo.png”);}
H1 {color : #990000;}

OUTPUT:

Background-Repeate Properties.

body {background-image:url(“logo.png”); background-repeat: no-repeat;}
H1 {color : #990000;}

Output:

Repeat vertically:

CSS Code:

body {background-image:url(“logo.png”); background-repeat: repeat-y;}
H1 {color : #990000;}

Leave a Comment

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

Scroll to Top