Css Course

Boxes And Borders

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

Next Prev