For each example in this chapter, you’ll need a fresh copy of the base template provided in this
section. This is a very simple (X)HTML page consisting of some standard document sections
(<head> and <body>) and familiar elements (headings, paragraphs, and links to further
templates in an unordered list) thrown in, all of which you’d expect to see in a typical web page.
We won’t deal with tables or images just yet.
To appreciate the effects of the applied CSS, it is worth copying this template verbatim at
this stage, as that’ll help you understand the examples discussed. Note that the list of links will
tie together further templates in this section, giving you a cut-out-and-keep mini-site for reference.
The (X)HTML is also available to download from www.apress.com if you’re one of those who
doesn’t like typing very much. For reference, it’s also printed here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Applying CSS Mini-site</title>
</head>
<body>
<h1>Applying CSS Templates</h1>
<p>A mini-site containing several (X)HTML templates, each being➥
styled using a different method of CSS application.</p>
<p>Click an example below.</p>
<h2>Examples</h2>
<ul>
<li><a href="base.html">Base template</a></li>
<li><a href="inline.html">Inline CSS template</a></li>
<li><a href="embedded.html">Embedded CSS template</a></li>
<li><a href="external.html">External CSS template</a></li>
<li><a href="imported.html">Imported CSS template</a></li>
</ul>
</body>
</html>
Note that there has as yet been no CSS in this chapter whatsoever. So to create a base template
file, go through the following steps:
1. Create a new file called base.html.
2. Add the (X)HTML.
3. Save the file to a new folder on your computer.
4. Drag the file onto an empty browser window to see the basic web page as it stands.
Now you are ready to build a set of templates, each influenced by CSS in a different way.
This mini-site can then be used to revisit and play with the methods discussed in this book,
applying the CSS however you see fit.5. Next make four copies of base.html, and name them inline.html, embedded.html,
external.html, and imported.html.
6. Ensure you save these new files to the same folder as base.html.
7. The four new files should now be available from your base.html file in your web browser.
Great! Now for each following method, you will have a corresponding (X)HTML file with
which to work. Let’s work through the main methods of applying CSS to XHTML one by one.
Later you’ll learn how the numerous methods can be combined for a more powerful effect.
No comments:
Post a Comment