XHTML for CSS
For the purposes of this class, effective use of CSS requires:
- Each page must include a complete DOCTYPE statement, including the URI, in order to identify the version of (X)HTML being used.
- The XHTML must be well formed, properly structured, and semantically based.
- Content should be separated from presentation, with all content in XHTML and all presentation defined by CSS.All examples in this class are created with Strict XHTML which does not allow presentation related element attributes.
- Each page must pass a validation scan with no errors.
Separation of content and presentation
Old forms of HTML mixed in many element attributes to set font styles, font sizes, font colors, background colors, padding, and much more to control how pages looked. Combined with the use of tables to control layouts, old-style HTML got very complex and hard to update.
With XHTML and CSS, content is maintained in the XHTML and all the presentation is controlled by the CSS, making it much easier to maintain each independent of the other.
Proper XHTML
Consider the following simple XHTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Moby Dick, or, The Whale</title>
<link rel="stylesheet" href="melville.css" type="text/css" />
</head>
<body>
<h1>Moby Dick, or, The Whale</h1>
<p>Call me Ishmael.</p>
</body>
</html>
The XHTML has the following characteristics:
- Well-formed
Each element has a begin tag and an end tag. Empty elements such as horizontal rule and break contain a slash (<hr />, <br />), thus creating a single tag that is both a begin and end tag. - Structured
Elements do not overlap. Each element is either completely inside or completely outside other elements, created a nested heirarchy of elements. This heirarchy, which establishes parent/child relationships among the elements, will be used in CSS to select which elements styles apply to. Each element type also belongs within some elements but not others. For example, a Paragraph element should not appear within the Head element and a Title element should not appear within the Body element. - Semantic
Element types are chosen to reflect the role of a block of text within the document. (X)HTML is based on a logical model of a report with elements for headings, paragraphs, lists, tables and other specific types of content. Blocks of text are placed in elements based on their role in the document (their logical type), rather than upon the appearance desired on the final page. Appearance (also called presentation) will be controlled by the CSS stylesheet.
DOCTYPE statements
The DOCTYPE statement declares what type of XHTML is being used on the page. Browsers use the DOCTYPE statement to decide how to process a page. Pages with a complete DOCTYPE statement and correct XHTML are processed in "standards" mode, which ensures the page will display in the most consistent, predictable way across a variety of browsers. Pages without a DOCTYPE statement or with incorrect XHTML will be processed in "quirks" mode and are less likely to show in the way their author intended.
Divs and Spans
Two types of elements that were seldomly used in old-style HTML are very important when working with XHTML and CSS: Divs and spans.
Divs enclose a set of XHTML elements in the body, creating a unit of content that can have styles applied to it as a unit, including positioning.
Spans enclose text within an element, such as some text in a paragraph, allowing the span and its contents to have styles applied to it independent of whatever styles apply to the element that contains it.
<div style="text-align: center;">
<h2>Moby Dick, or, The Whale</h1>
<p>This story of a obsessive sea captain's quest to
<span style="color: red;">find and destroy<span>
an extraordinary whale that
had taken his leg in a previous encounter is sometimes
seen as an allegory for all of humanity's obsessive pursuits.
</p>
</div>