Styles

You will probably have noticed by this stage that all of the tags we have looked at so far have been concerned with only two things - describing what is to go in the page and how the pages are linked together. At no point have we looked at tags or attributes on tags that are there to define how the parts of the page are to be positioned or how they are to look.

The reason for this is that the job of XHTML is to define the content of the page and not its appearance. There are only two attributes that we use in our HTML that affect either the position where the parts of our page are placed or the way that parts of the page are to look and these attributes are id and class. Either or both of these attributes can be placed on just about any tag at all within the body of your page.

An id attribute is used to uniquely define a particular tag and so each id that you add to the page must have a different value assigned to it. You can assign whatever value you like as long as it contains only letters and numbers and starts with a letter.

The way in which the class attribute differs from the id attribute is that you can have more than one tag that is assigned the same class. You can also assign multiple classes to the same tag by separating their names by spaces. The class values must also contain only letters and numbers and start with a letter.

Here's an example of a couple of divs with ids and classes assigned to them (I have left out the content so as to concentrate on the tags themselves):

<div id="content">
<div id="menu1" class="menu"></div>
<div id="menu2" class="menu"></div>
</div>

So how does assigning ids and classes to the tags in our page help with defining where they are to be positioned and how they are to look? Well XHTML doesn't define those aspects of the page at all. Instead that task is performed using a completely different markup language called Cascading Stylesheets. The stylesheet(s) that you attach to your page will contain the instructions on where to place particular parts of the page (usually identifying them by the id you assigned) and what fonts, colours, etc to use to display them (identifying them either by the type of tag or the class or both). We'll look at how to attach stylesheets to our XHTML in the next tutorial.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate