Smart Solution

Introduction

The distinction between structure and presentation is basic to the successful integration of XHTML and CSS
If you take the raw text that will become the content of your website and mark it up with XHTML elements such as headings, paragraphs, lists, and block quotes, you are structuring your document.

The div & id

The div (for division), is what the W3C calls a generic mechanism for adding structure.
A div, with a class or unique id attribute assigned to it, can assume a structural role on the page according to your particular needs.
If you need a banner, a content area, a sidebar, and a footer, you can create that structure with div elements.
Using id labels like "banner", "content", "sidebar", and "footer“ with the div element gives you the ability to create page components

Structural XHTML markup

To make CSS really capable of meeting the demand for beautiful presentation, certain elements and attributes are needed in XHTML to allow the specificity of selectors and the inheritance of the cascade to shine in all its glory.
You will use four of these markup elements and attributes to pry structure and presentation apart:

• div
• span
• id
• class

div

Pages fall into logical divisions (divs), such as banners, navigation, subnavigation, search boxes, ads, content, and footers. By enclosing these page divisions in a generic container with a named id, e.g.

 <div id="search">search content here</div>

You create a unique structural element on the page that can be presented to the viewer using specific CSS rules.The div is a block level element.

span

When the element you wish to style is inline, for example, just a few words in a sentence, the span element creates boundaries for the styling to apply to. Consider this example:

<p>Author <span class="author">Alice Walker</span>is our greatest living writer. She is closely rivaled by the wonderful <span class="author">Elizabeth Berg</span>.</p>

In that paragraph, only the words “Alice Walker” and “Elizabeth Berg” are styled according to whatever rules were specified for the class "author". The two names have the same presentation values since they share the same class rule.

id

The id attribute, which identifies the element it’s assigned to, does more than merely serve as a stylesheet selector, although that is certainly an important job. The id attribute can also be a target for a hypertext link or a referenced object in a script.
Remember that any id can only be used one time on a page; it must be unique. An id attribute must begin with a letter or an underscore and cannot contain blank spaces.

class

For elements that are not unique on the page—that is, styles you plan to use more than one time per page—there is the class attribute. A class attribute can be assigned to any element, either block or inline. The class attribute creates context on the page, so that the element can be presented to the viewer using specific CSS rules.

By: Ian