Draac.Com's CSS Course

• Easy CSS Tricks
• Table Talk !
• Html Test Bed

Draac.Com's CSS Course

Page 3 - CSS Course
Building A Web Page With CSS

• Adding Paragraphs

The next element we will learn about is the <P>.
You must ALWAYS close this element with </P>
This too is a text element and like the headings
can have their own attributes for each of them.
We will also look at CLASSES, these are nothing
more than names given to certain paragraphs of
text with their own set of attributes governing them.
First let's just add the <P> element with a few
attributes that will govern the text in that paragraph.
<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; }
H1 { font-size: 24pt;
        font-weight: bold;
        color: #66ccff;
        font-style: italic;
        text-align: center; }
H2 { font-size: medium;
       font-weight: 200;
       color: #ffffff;
       font-style: normal;
       text-align: left;
       text-decoration: underline;
       letter-spacing: 2mm;
       font-family: comic sans ms; }
P { font-size: 15pt;
       color: #7fffd4;
       text-align: center;
       margin-top: 100px; }
</STYLE>
</HEAD>
<BODY>
<H1>My First CSS Web Page</H1>
<BR><BR>
<H2>Learning With Draac.Com</H2>
<P>This is an example paragraph using CSS<br>
it has it's own text and alignment attributes.<br>
With these attributes you can set how the text<br>
will look and exactly where on the page it will appear.
</P>
</BODY>
</HTML>
Click To View Our Page Here
Note: Not All Text Attributes Are Supported by MSNTV
As you can see from the attributes we used
that we not only commanded how the text will
look but also where on the web page it was placed.
These "margin" attributes can be used on any element
in the CSS code. This will properly place items
exactly where you would like them to be.
The possiblilities are endless, experiment a little.

• Classes - What Are They ?

A CLASS is known as a selector in CSS terms.
The easiest way I can describe what "classes" are
is to say they are like giving an element a "name".
Each CLASS can have it's own set of attributes assigned
to them. Any element within the <BODY> of an
HTML document can be "classed". For this next lesson
we will "class" another paragraph for our CSS web page.
The CLASS (or name) we will give the next paragraph
will be "par2". You can use any word you would
like, it really makes no difference, it's only there for
idenification purposes. The best way to understand this
is to see it in action, so let's put our first CLASS into the 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; }
H1 { font-size: 24pt;
        font-weight: bold;
        color: #66ccff;
        font-style: italic;
        text-align: center; }
H2 { font-size: medium;
       font-weight: 200;
       color: #ffffff;
       font-style: normal;
       text-align: left;
       text-decoration: underline;
       letter-spacing: 2mm;
       font-family: comic sans ms; }
P { font-size: 15pt;
       color: #7fffd4;
       text-align: center;
       margin-top: 100px; }
.par2 { font-size: large;
           color: #000000;
           margin-right: 20px;
           margin-left: 90px;
           background-color: #ff7f50; }
</STYLE>
</HEAD>
<BODY>
<H1>My First CSS Web Page</H1>
<BR><BR>
<H2>Learning With Draac.Com</H2>
<P>This is an example paragraph using CSS<br>
it has it's own text and alignment attributes.<br>
With these attributes you can set how the text<br>
will look and exactly where on the page it will appear.
</P>
<P CLASS="par2">
This is our second paragraph<br>
which is using a CLASS to govern<br>
how it looks and where it appears<br>
on the web page.
</P>
</BODY>
</HTML>
Click To View Our Page Here
Note: Not All Text Attributes Are Supported by MSNTV
So if you wanted another paragraph in a different
formating you could add another CLASS, maybe
called "par3" and give it it's own attributes and alignment.
You might have noticed the background color behind
the last paragraph, just another cool attribute to try with
any of the elements. Try it on one of the "headings".

Back------Next

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