Css Course

 

Adding Headings

In this section we will add a couple of headings. For each heading added we will assign them their own attributes which will govern that heading. For example we can assign font size, color, weight style and alignment to each heading we create.

Lets add the first heading 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; }

</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Now lets add the heading itself to our CSS page. This will be set within the <BODY> of 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; }

</STYLE>
</HEAD>
<BODY>
<H1>My First CSS Web Page</H1>
</BODY>
</HTML>

Click To View Our Page Here

Now when ever you use <H1> and </H1> to any text on your page it will take on the attributes you have asigned to that heading. Let's add a second heading to our web page with a set of new attributes assigned to it.

<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; }

</STYLE>
</HEAD>
<BODY>
<H1>My First CSS Web Page</H1>
<BR><BR>
<H2>Learning With Draac.Com</H2>
</BODY>
</HTML>

Click To View Our Page Here

Note: Not All Text Attributes Are Supported by MSNTV

You can add as many headings as you would like. There are many different attributes to use with text. Please look over the Reference Sheet for a minute before moving on. I think you will understand the attributes on this sheet and how to use them. This is just one way to add text to your CSS web page. We will explore other ways next in this course.