4.5. A Practical Example
Now, let's put what we've learned so far to good use. We're going to create a stylesheet for the XHTML document from Example 3.2.
Although XHTML elements have implicit styles, we often need to extend or override them for a richer appearance. Stylesheet-aware browsers allow us to do that with a CSS stylesheet.
XHTML allows you to put stylesheet information inside the <head> element of the XHTML file with a <style> element. However, including style information in the document files is strongly discouraged, as it leads to all kinds of problems when you want to expand and repurpose the document. Instead, we will declare the stylesheet as a separate file using the XHTML's <link> element.
Before creating the stylesheet, let's make some changes to the XHTML file to help it take full advantage of CSS's capabilities. First, we'll add some <div> elements to act as section containers. Since HTML suffers from a lack of block containers, <div> was added to the specification as a general-purpose division element. However, since it's so generic, we'll have to use a class attribute with it to differentiate its roles. So we will also be adding class attributes to other elements, increasing the number of things that can be assigned unique styles.
Example 4.1 lists the new XHTML file. The stylesheet is shown in Example 4.2.
Example 4.1. The Revised XHTML Document
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ... |
Get Learning XML now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
