.

Find the file "my-first-webpage.html" and open it in a text editor. You would have created that page on p-tag.htm. I also have a copy of it in this page's source code or you can go back to p-tag.htm and make it again.

Open that file in a text editor (on PCs Notepad will do - don't use MS Word) and just before </head> add:

<style>
.outer {
width: 960px;
color: navy;
background-color: pink;
border: 2px solid darkblue;
padding: 5px;
}
</style> *

The style tag is used to create classes. In this case the class "outer" is made up of various styles (width, color etc.) each separated by a semicolon.

This class is then applied to a div tag. Change the body to this:

<div class="outer">
<p>My fourth webpage!</p>
</div>

Save it as "my-fourth-webpage.html". Again, you will find a copy of the new file in the source code.

Just so you know, rather than using a class statement you could have written:

<div style="width: 960px; color: navy; background-color: pink; border: 2px solid blue; padding: 5px;">
<p>My fourth webpage!</p>
</div>

This is called an "inline style statement". While occasionally handy, it's not nearly as versatile as a class. I'll show you why in a moment.

Save that file and open it in your favorite browser. It should look something like this:

Let's take a look at the styles.width: 960px;The "px" stands for pixels. A pixel is a size of one dot on a monitor. 960 pixels fits comfortably on a 1024 pixel wide screen **, leaving room for the slide bar on the right.color: navy; & background-color: pink;The former set the color of the font inside the div tag. The later obviously sets the background color.border: 2px solid blue;This sets the border to 2 pixels wide, makes it solid (as opposed to say dashed) and colors it blue.padding: 5px; ***This adds 5 pixels of padding from the border inward.

You can play with the styles in my-fourth-webpage.html, but do not be surprised if something doesn't work. I have tried to select styles that are fairly straightforward, but even so your changes may not (often won't) work. Just go back to what I wrote and try something else. Have fun, but don't get discouraged. Eventually it will all make sense.

Let's create another class.

.c {
text-align: center;
}

Add the class to the h1 tag: <h1 class="c">My fourth webpage!</h1>

Save it, refresh your browser and you should have:

Note that I chose to name the class "c". I could have named it "center" or even "callipygian" **** had I been so inclined, but "c" is easier to remember ...and spell.

The advantage a class has over an inline style statements is that it is reusable. You set a class once and use it over and over again. Above we used a style tag, but better still you can save all your classes in what is called astyle sheet (a separate file with a ".css" extension) and use those classes anywhere on your site.

In the head of this page's source code you will see where I call my style sheet:

<link rel="stylesheet" href="mycss.css">.

Take a look at it. I doubt you will understand much, but at this point you don't have to. At least you know what it looks like.

I have created a fifth page. Open it, copy the source code and save it with the rest of your webpages.

On that page the various divs have different background colors so you can see where each goes.

Now remove the color and the background-color for each class, save it and voila! ...you see div tags in action (actually they should be invisible, but you get my point).

We covered a lot of ground in the last two pages – so much that you may feel a bit disheartened (especially considering what a boring page you've ended up with) but I hope it has begun to make some sense. This stuff isn't easy. Don't worry, it will get better ...eventually.

When all is said and done div tags are not that difficult. Understanding how CSS works can be problematic, but the div tag itself is not. In practice it's really nothing more than a container – a box with CSS styles defining size, color, position, border etc