Street Sign - Web Design

 Making the transition from HTML 4.0 to xHTML and CSS

First off, you should read Eric Lester's article "XHTML - Kicking and screaming into the future" in which he basically summarizes the differences between xHTML and previous versions of the language.

You should also take note that some tags we all got used to in previous versions of HTML have been deprecated.

Once you've Googled around and familiarized yourself with these, it's time to consider changes in syntax. In xHTML the only real differences are that the language is case sensitive, so we write it all in lowercase, no more use of caps! Also, elements are classified make a street sign two types: those that 'contain' data, and those that are 'empty'. An example of the former might be a paragraph element , which has a closing tag. That which is in between these two tags is the 'contained data'. An example of the latter could be a line break, written as follows: Other 'empty' types include the image element and the horizontal rule element Finally, bear in mind that all images must have
alternative descriptions (so make use of the 'alt' property in image elements). You'll also be making extensive use of the 'id' attribute in xHTML (similar to the 'name' attribute, but used differently - see below).

The biggest hurdle for myself personally was learning the syntax of CSS. There are actually three ways of using CSS, of which one is to create a seperate document with a .css extension. This file will contain all the styling attributes of the elements in your xHTML code. You can also place CSS in the 'head' element or you can embed it into an element anywhere in your code. Using an external file can be useful as changes made to it 'cascade' throughout your website, hence eliminating the need to change each page's code. The syntax basically consists of a 'selector', make a street sign can either be an 'id' selector, a class selector or a generic class selector - read up on the differences in the resource box. So, for instance, I've given an 'img /' element the id "MyImg", then I go to my css section/file and create the selector #MyImg {}. Here's where the syntax comes in. the # symbol means that I've created an id selector, so what follows in the curly brackets will apply to all elements with the id "MyImg". An example might look something like this:

#MyImg {

width: 200px;

height: 100px;

border: 0px

}

Notice that I use a colon in place of the equals sign to assign values, and each attribute is followed by a semicolon which separates them. If you do not follow this syntax when using CSS your styling will not come into effect. The
last thing you need to know to get started is how to link your external CSS document to your xHTML document. Just nest a element in your 'head' tag and you're ready to go!