| I originally taught myself HTML 4.0 a few years ago, | | | | The biggest hurdle for myself personally was learning |
| but I found it difficult to make the transition to using | | | | the syntax of CSS. There are actually three ways of |
| xHTML with CSS (Cascading Style Sheets). However, | | | | using CSS, of which one is to create a separate |
| due to being involved with a small website I was | | | | document with a .css extension. This file will contain |
| forced to make sense of it. In this article I will run | | | | all the styling attributes of the elements in your |
| through the practical implications of switching | | | | xHTML code. You can also place CSS in the 'head' |
| between the two, in other words what you will need | | | | element (using 'style' as an element), or you can |
| to do to make your HTML work with stylesheets. | | | | embed it into an element anywhere in your code (for |
| I'm not going to go over the history of xHTML here, | | | | this you would use the 'style' attribute). Using an |
| but you should take note that there are many 'tags' | | | | external file can be useful as changes made to this |
| that have been deprecated and should be avoided in | | | | one document cascade throughout your entire |
| when using xHTML. | | | | website, hence eliminating the need to change the |
| The first important difference in xHTML comes in the | | | | code on each page. The syntax basically consists of |
| form of its syntax. The language is case sensitive, so | | | | a 'selector', which can either be an 'id' selector, a class |
| it is all written in lowercase, no more use of caps! | | | | selector or a generic class selector . So, for instance, |
| Secondly, 'tags', or elements to be technical, are now | | | | I've given an 'img' element the id "MyImg", then I go |
| classified into two types: those that 'contain' data, | | | | to my css section/file and create the selector |
| and those that are 'empty'. An example of the | | | | #MyImg {}. Here's where the syntax comes in. the # |
| former might be a paragraph element, which has a | | | | symbol means that I've created an id selector, so |
| closing tag. That which is in between these two tags | | | | what follows in the curly brackets will apply to all |
| is the 'contained data'. For instance, a sentence is | | | | elements with the id "MyImg". An example might look |
| understood to be data. An example of an empty tag | | | | something like this: |
| could be a line break, and is written slightly differently | | | | #MyImg {width: 200px;height: 100px;border: 0px |
| than in HTML 4.0, instead of having a forward-slash | | | | } |
| just after the opening bracket the forward-slash | | | | Notice that I use a colon in place of the equals sign |
| must be written just before the closing bracket and | | | | to assign values. If you fail to do this your styles will |
| must be preceded by a space. Other 'empty' types | | | | not be applied. Also, each attribute is followed by a |
| include the image element and the horizontal rule | | | | semicolon which separates them. If you do not follow |
| element . | | | | this syntax when using CSS your styling will not |
| Another point to bear in mind is that because xHTML | | | | come into effect. The last thing you need to know |
| is supposed to be compatible across various devices, | | | | to get started is how to link your external CSS |
| all images must have alternative descriptions (which | | | | document to your xHTML document. Just nest a |
| means you have to make use of the 'alt' attribute in | | | | element in your 'head' element and you're ready to |
| image elements, it's no longer just an option). Similarly, | | | | go. There are plenty of new ways to perform tasks |
| you'll be making extensive use of the 'id' attribute in | | | | such as positioning in CSS. Have fun playing around |
| xHTML (similar to the 'name' attribute, but used | | | | with these new possibilities! |
| differently - see below). | | | | |