CSS or Cascading Style Sheets can be used to build an entire web page. We will be doing that in this course. We will allow CSS to control every element on our sample web page. Whether it be text or an image, CSS will be in total control of it.
There is more to Cascading Style Sheets than I will be showing. The place to learn more about CSS is at http://www.w3c.org. For a reference sheet of all the elements and their attributes, please visit The CSS Reference Sheet.
Remember, what I have here is only the tip of the iceberg. CCS is a very powerful language that allows you to control exactly how things should look on your web page.
You will need at least Internet Explorer 4.0 to do this lesson to have it work as intended. MSNTV & Netscape can use some CSS but not all. Let's get started building our CSS page.

We will be embeding our STYLE sheet codes. You can also put these codes on a separate web page and "Link" to that separate web page. The first thing we need to do is setup a basic HTML document. This has been covered in the HTML Course.

Here is the HTML code for our basic HTML document.

<HTML>
<HEAD>
<TITLE>My First CSS Web Page</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

The next step in creating our page will be to add the STYLE code to our document. This code is placed between the <HEAD> and <HEAD> tags. Here is the CSS STYLE code we will be using.

Let's add it to our HTML document's code.

<HTML>
<HEAD>
<TITLE>My First CSS Web Page</TITLE>
<STYLE TYPE="text/css">
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

We will start by adding a BODY element and a color to our CSS web page. You can also use an image as a background, we will cover that next in this section.

Lets add the background element to our code.

<HTML>
<HEAD>
<TITLE>My First CSS Web Page</TITLE>
<STYLE TYPE="text/css">
BODY { background-color: #000000 }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Click To View Our Page Here

Pretty exciting huh, a plain jet black page ? Let's add to the BODY element so we can use an image instead of the plain black color. Download this image to use in our example.
Here is our code with an image as a background. Note: we leave the color in case the image isn't found.

<HTML>
<HEAD>
<TITLE>My First CSS Web Page</TITLE>
<STYLE TYPE="text/css">
BODY {background: #000000 url(stars.gif); }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Click To View Our Page Here

*Note: Image Background Not Supported by MSNTV

**Note: There are many more attributes that will apply to the background element, check the Referenece Sheet listed at the top of this page if you wish to add more later.

Now let's add the elements that will control the LINK, VLINK & ALINK text and colors. For now will will just place the elements and a color for these clickable text links on our CSS web page.

Let's add these elements to our code.

<HTML>
<HEAD>
<TITLE>My First CSS Web Page</TITLE>
<STYLE TYPE="text/css">
BODY { background: #000000 url(stars.gif); }
A:LINK { color: #ffffff; }
A:VISITED { color: #ffff00; }
A:ACTIVE { color: #ff0000; }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

We will see the effects of these elements when we add a clickable text link later on in this course. At that time we will try a few cool effects to the text links.

Note: In order for me to conserve space on these pages I will be "bunching" my CSS Codes together. It is OK for you to add a blank line between your codes so you can easily see and find them.

Css Course

Introduction

Getting Started

Adding The CSS STYLE Code

Adding A Background Element

Adding Link, Vlink & Alink Elements