Css Course
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>
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>
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".