Css Course

 

Using An ID

An ID is another selector you can use. An ID will identify an item and the attributes to be used with that item. For our sample CSS web page we will use this with the placement of an image but it can be used for text as well. Here is the image we will be using.

Let's add an ID and an image 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; }
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;
           padding: 10px;
           margin-right: 170px;
           margin-left: 170px; }

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

I think you get the idea that an ID can be used to identify an item on a page. We have only touched upon IDs and CLASSES. There is much more to CSS than explained here. My hope is to give you examples of ways to use some of these CSS codes. CSS is easy to do but there is so much to learn if you really want to get into it. Let's move on to more examples for our CSS web page.