Elements and classes - a side trip.

When you make a style sheet, internal or external, mostly what you define are elements and classes. You can define one or more elements, one or more classes, or mix and match. But which to use? First we need to review a little html - deep breath, we aren't going deep!

Web pages are written in a language called html. If you look at the source code of any of your pages, or any you see on the web, you'll see the same basic structure. As you work in layout view, Golive writes the html code for you behind the scenes.

The structure goes like this:

At the beginning of the page in source view (find it here:) ....

... is an opening tag like this:

and right at the end is a closing tag like this:

Everything in between is in html and enclosing it in these two tags tells the browser this.

Nested inside these two tags are an opening head tag and a closing head tag at the end, like this:

In the head part you find the title of the page, meta tags, and sometimes some javascript.

After the head part is the body of the page - that's what you see on screen, and it's the part we're interested in. It comes between, yes, an opening body tag and a closing body tag:

That opening body tag is very useful, if you give your page a background colour in Golive, maybe set your page margins to zero, perhaps set the colour of links via the inspector, that information goes inside the opening body tag, like this:

(Try it on a page and then look at the source).

Yes, but elements and classes???? Patience please, or skip to the next page.

Inside the body tags you find the main page content. If you use tables, each one has an opening and a closing tag:

Inside the table, each row has a ......

And inside the table row, each cell also has ... you've got it.

So here's your page structure, in the source code:

And if you want a heading you can click in a paragraph, choose Header 1 from the drop down menu at the top of the page, and Golive will surround that paragraph with the appropriate tags:

There are lots of other tags that work the same way - p for paragraph, link tags, etc. OK, now we're ready for elements and classes. Thanks for your patience.

Bored already? back to the main css tutorial or on to elements.