Draac.Com's CSS Course

• Easy CSS Tricks
• Tables Course
• Html Test Bed

Draac.Com's CSS Course

Page 1 - CSS Course
Building A Web Page With CSS

• Introduction

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.
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.

• Getting Started

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>

• Adding The CSS STYLE Code

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.
<STYLE TYPE="text/css">
</STYLE>
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>

• Adding A Background Element

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.

• Adding Link, Vlink & Alink Elements

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.

Next

Draac.Com Is Hosted By ValueWeb
Register UK domain names at Domain Names UK