You can add borders, padding, colors,
and more with CSS. In this next example
we will add some colorful borders around
our "toucan" image but is can be done with text too.
We will add these new attributes to the ID
we set up for our toucan image.
MSNTVers will not see any of these borders
and Netscape users will see the borders but
not with all the colors. So be careful when and
where you use CSS, it is not supported by all yet.
Let's add some borders and colors to our image.
<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; }
#image1 { background-color: purple;
margin-left: 170px;
margin-right: 170px;
border-color: red green blue orange;
border-style: ridge;
border-width: 50px;
padding: 10px; }
</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>
<P ID="image1">
<IMG SRC="toucan2.gif" WIDTH="225" HEIGHT="179" ALT="toucan">
</BODY>
</HTML>
Click To View Our Page Here
Note: Not All These Attributes Are Supported by MSNTV
MSNTVers And Netscape Users Please Click Here
To View What This Image With it's Color Borders,
Looks Like On Internet Explorer 5.0, It's Very Cool !
Again please take the time to look over
The
Reference Sheet to study all the attributes
and effects CSS can deliver to your web page.
Your only limited to your own imagination.
Let's move on an look at "inline" CSS codes.
 Back------Next 
| 
