HTML PRIMER
by Jim Gordley
2008 HomeSpun Internet Enterprises

 
CHANGING BACKGROUND COLOR
By adding a style you can change the background color to any color you like. Change the background color on your first web page. Edit your HTML document to include the mystyle.css as the source for the pages presentation properties.
 
Note: Background properties can also be controlled by adding attributes to the body tag. All current browsers will support that use, but they have been deprecated and will not be recognized in HTML 5.0. Use of styles is highly encouraged.
 
Use of attributes in the body tag are not recommended.

<body bgcolor="#000000">
or
<body bgcolor="black">

 

<html>
<head>


<style type="text/css">
body
{
background-color:#000000;
}
</style>

<title>My First Web Page</title>

</head>

<body>
Hello world!
</body>

</html>

Save the changes you made and check to make sure the results are what you expected. What happened to the phrase "Hello world"?

Changing Text Face and Color

The default color of our text is black which is the same as the background color. Even though the text is still there it can not be seen because it matches the background color.

Edit the style so that the body text appears as white (#ffffff)

<style type="text/css">
body
{
background-color:#000000;
font-family: futura Lt Bt;
color: #ffffff;
}
</style>



Your screen should look like the example above.

 

 

 

 

 


After assigning a new COLOR to the text it can be seen.

Changing Text COLOR
 

The <font></font> tag set have been deprecated. 

Previous versions of HTML used the <font></font> tag set to describe
the presentation properties of a text face. Most browsers will still accept the
use of this tag set. Recently released HTML 5.0 will not recognize this tag set.

USE CSS INSTEAD

Using the <span></span> tag set, changing the text COLOR and style can be done in line.

<html>
<head>
<style type="text/css">
body
{
background-color:#000000;
font-family: futura Lt Bt;
color: #ffffff;
}
</style>

<title>My First Web Page</title>

</head>

<body>
The quick<span style="color:#ff0000;">
red</span> fox jumps over the lazy <span style="color:#885533;font-weight:bold;">brown</span> dog.

</body>

</html>

The <span></span> tag set is typically used when an area that is unique is defined. More often the class attribute in conjunction with a Style Sheet will be used. Within the Style sheet the class is defined. For example red and brown text is to be used many times within a web site those presentation attributes should be defined within an external Style Sheet. This saves the author from having to describe the presentation attributes again and again.
 

Defining the Class in a Style Sheet

span.red {color:#ff0000;}
span.brown {color:#885533; font-weight:bold;}

Applying the class attribute in HTML

The quick <span class="red">red</span> fox jumps over the lazy
<span class="brown">brown
</span> dog.

 

<html>
<head>
<style type="text/css">
body
{
background-color:#000000;
font-family: futura Lt Bt;
color: #ffffff;
}
</style>

<title>My First Web Page</title>

</head>

<body>
<img src="images/banner_1.jpg"><br>
The quick<span style="color:#ff0000;">
red</span> fox jumps over the lazy <span style="color:#885533;font-weight:bold;">brown</span> dog.

</body>

</html>

 

Using An Image as a Background

A solid color is not the only background that can be used in the presentation of your web pages. Graphics or images can also be used.

   
<style>
body {
background-color: #000000;
font-family: futura Lt Bt;
color:#ffffff;

background-image: url('images/redfox_2.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;

}
</style>


Click on the image to view the actual web page.

Repeating a background tile

Instead of using one large image to cover the viewers screen it is more economical to tile a smaller image, filling the screen with several tiles of the same image.

Using a smaller image as a tile you can cover an entire page with a background tile. An example tile can be seen on the left.

Apply the background tile to a web page using CSS. By default the image will repeat in both the x and y axis covering the entire screen, and the image will scroll along with any text on the screen.

<style type="text/css">
body {
background-color: #ffffff;
font-family: futura Lt Bt;
color:#000000;

background-image: url('images/balloon_tile.jpg');
}
</style>


Click on the image to view the actual web page.

Modify the background properties so that the image tile repeats only across the top of the screen. Again modify the background properties so the the image tile repeats only down the left-most edge of the screen.

CSS HINTS

background-repeat:repeat-x;


Click the image to view the web page.

background-repeat:repeat-y;


Click the image to view the web page.

2008 HomeSpun Internet Enterprises