the differenct syntax used: a period (.) for class and (#) symbol for id
class is used to define a related group of xHTML elements on a document and means they have the same "rules" applied to them.
- To create a class you have to give it a name. It must be one word and it's best to use letters and numbers. Do not use periods, underlines & other non-alphanumeric characters when naming classes.
- A descriptive name is good. One that desribes function rather than presentation: class="detail" rather than class="bluetext"
- Don't set more than one class per element
id is used to mark a single instance in a document, much like the name attribute. In fact, the name attribute has been deprecated in favor of the <id> element except in forms, where name is still used to build name="value" pairs for passing data to the server. Why would use use an id over a class? To identify a unique item within a page - for example the navigation, or layout elements.
- If you use name and are planning to use XHTML, you need to include the identical markup value for the name and <id> attributes in your markup.
For example: <a href="blah.html" name="same" id="same">Blah</a>
The SPAN element was
introduced into HTML to allow authors to give style that could
not be attached to a structural HTML element.
<SPAN> may be used as a selector in a style
sheet, and it also accepts the STYLE, CLASS, and ID attributes,
at least one of which must be used for the tag to have any affect.
You must also include the closing tag </SPAN>, as one would
with any inline element.
The DIV element is similar to the SPAN element
in function, with the main difference being that <DIV> (short
for 'division') is a block-level element.
DIV may contain paragraphs, headings, tables,
and even other divisions. This makes DIV ideal for marking different
sections of the page, such as chapters, abstracts, or notes.
As with SPAN, the section of the page is defined using the <DIV></DIV> tags
with a STYLE, CLASS, or ID attribute.
The following example demonstrates how to change
the background colour of a heading and paragraph section in a
<P>This paragraph has the normal background colour.</P>
< DIV STYLE="background-color:wheat">
< H3>This heading has a wheat-coloured background.</H3>
< P>So does this paragraph, <SPAN STYLE="background-color:aqua">apart
from this bit which is aqua</SPAN>.</P>
< P>Now we're back to normal.</P>
This paragraph has the normal background colour.
This heading has a wheat-coloured background.
So does this paragraph, apart from this bit which is aqua.
Now we're back to normal.