Creating boilerplates

Every web page looks different, just as every book or magazine is different from every
other one. However, under the hood there are often many similarities between sites, and
if you author several, you’ll soon note that you’re doing the same things again and
again. With that in mind, it makes sense to create some web page boilerplates—starting
points for all of your projects. In the download files, available from the Downloads
section of the friends of ED website (www.friendsofed.com), there are two boilerplates
folders: basic-boilerplates and advanced-boilerplates. In basic-boilerplates, the
XHTML-basic.html web page is a blank XHTML Strict document, and in advancedboilerplates,
XHTML-extended.html adds some handy divs that provide a basic page
structure that’s common in many web pages, along with some additions to the head section.
(The former is used as a quick starting point for many of the tutorials in this book.
The latter is perhaps a better starting point for a full website project.) The CSS-with-
ToC.css document in advanced-boilerplates uses CSS comments to create sections in
the document to house related CSS rules. This is handy when you consider that a CSS document
may eventually have dozens of rules in it—this makes it easier for you to be able to
find them quickly.CSS comments look like this: /* this is a comment */, and can be single-line or multipleline.
In the advanced CSS boilerplate, a multiline comment is used for an introduction and
table of contents:
/*
STYLE SHEET FOR [WEB SITE]
Created by [AUTHOR NAME]
[URL OF AUTHOR]
ToC
1. defaults
2. structure
3. links and navigation
4. fonts
5. images
Notes
*/
Each section of the document is then headed by a lengthy comment that makes it obvious
when a section has begun:
/* --------- 1. defaults --------- */
* {
margin: 0;
padding: 0;
}
body {
}
As you can see, property/value pairs and the closing curly bracket are indented by two
tabs in the document (represented by two spaces on this page), which makes it easier to
scan vertically through numerous selectors. (Note that for the bulk of this book, the rules
aren’t formatted in this way, because indenting only the property/value pairs differentiates
them more clearly in print; however, the download files all have CSS rules indented as per
the recommendations within this section.) Comments can also be used for subheadings,
which I tend to indent by one tab:
/* float-clearing rules */
.separator {
clear: both;
}
Although the bulk of the style sheet’s rules are empty, just having a boilerplate to work
from saves plenty of time in the long run, ensuring you don’t have to key in the samedefaults time and time again. Use the one from the download files as the basis for your
own, but if you regularly use other elements on a page (such as pull quotes), be sure to
add those, too—after all, it’s quicker to amend a few existing rules to restyle them than it
is to key them in from scratch.
To show you the power of CSS, we’re going to work through a brief exercise using the boilerplates
mentioned earlier. Don’t worry about understanding everything just yet, because
all of the various properties and values shown will be explained later in the book.
Required files XHTML-basic.html and CSS-default.css from the basicboilerplates
folder.
What you’ll learn How to create, style, and restyle a web page.
Completed files creating-and-styling-a-web-page.html, creating-andstyling-
a-web-page.css, creating-and-styling-a-web-page-
2.html, and creating-and-styling-a-web-page-2.css, in the
chapter 1 folder.
1. Copy XHTML-basic.html and CSS-default.css to your hard drive and rename
them creating-and-styling-a-web-page.html and creating-and-styling-aweb-
page.css.
2. Attach the style sheet. Type Creating and styling a web page in the title element
to give the page a title, and then amend the @import value so that the style
sheet is imported:
<style type="text/css" media="screen">
/* <![CDATA[ */
@import url(creating-and-styling-a-web-page.css);
/* ]]> */
</style>
3. Add some content. Within the wrapper div, add some basic page content, as
shown in the following code block. Note how the heading, paragraph, and quote
are marked up using a heading element (<h1></h1>), paragraph element (<p></p>),
and block quote element (<blockquote></blockquote>), rather than using styled
paragraphs for all of the text-based content. This is semantic markup, as discussed
briefly earlier in the chapter.<div id="wrapper">
<h1>A heading</h1>
<p>A paragraph of text, which is very exciting&mdash;something
å that will live on through the generations.</p>
<blockquote>
<p>&ldquo;A quote about something, to make
å people go "hmmmm" in a thoughtful manner.&rdquo;</p>
</blockquote>
<p>Another paragraph, with equally exciting text; in fact, it&rsquo;s
å so exciting, we're not sure it&rsquo;s legal to print.</p>
</div>
4. Edit some CSS. Save and close the web page and then open the CSS document.
Amend the body rule within the defaults section of the CSS. This ensures the text
on the page is colored black and that the page’s background color is white. The
padding value ensures the page content doesn’t hug the browser window edges.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background: #ffffff;
padding: 20px;
}
5. Style the wrapper. Add the following property values to the #wrapper rule to define
a fixed width for it and then center it (via the margin property’s auto value).
#wrapper {
font-size: 1.2em;
line-height: 1.5em;
margin: 0 auto;
width: 500px;
}
6. Style the text. Add the h1 rule as shown, thereby styling the level-one heading:
h1 {
font: 1.5em/1.8em Arial, sans-serif;
text-transform: uppercase;
}
7. Add the blockquote and blockquote p rules as shown. The former adds margins to
the sides of the block quote, thereby making the text stand out more, while the latter
(a contextual selector) styles paragraphs within block quotes only, making them
italic and larger than standard paragraphs. Once you’ve done this, save your files
and preview the web page in a web browser; it should look like the following
image. (Don’t close the browser at this point.)blockquote {
margin: 0 100px;
}
blockquote p {
font-style: italic;
font-size: 1.2em;
}
8. Duplicate creating-and-styling-a-web-page.css and rename it creating-andstyling-
a-web-page-2.css. Open creating-and-styling-a-web-page.html, and
amend the @import value, linking to the newly created CSS document:
@import url(creating-and-styling-a-web-page-2.css);
9. Open creating-and-styling-a-web-page-2.css and switch the values of color
and background in the first body rule.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
background: #000000;
padding: 20px;
}
10. Replace the text-transform property/value pair from the h1 rule with color:
#bbbbbb;. For the blockquote rule, make the following amendments, which add a
border to the left and right edges, and some horizontal padding around the block
quote’s contents.
blockquote {
margin: 0 100px;
border-left: 3px solid #888888;
border-right: 3px solid #888888;
padding: 0 20px;
}
11. Finally, amend the blockquote p rule as shown:
blockquote p {
font-weight: bold;
font-size: 1.0em;
}Refresh the web page in the browser, and you should see it immediately change, looking
like that shown in the following image. Effectively, nothing in the web page was changed
(you could have overwritten the rules in creating-and-styling-a-web-page.css rather
than creating a duplicate style sheet)—instead, the web page’s design was updated purely
by using CSS. (Note that in the download files, there are two sets of documents for this
exercise—one with the design as per step 7, and the other as per step 11, the latter of
which has the -2 suffix added to the HTML and CSS document file names.)
Although this was a very basic example, the same principle works with all CSS-based
design. Create a layout in CSS and chances are that when you come to redesign it, you may
not have to change much—or any—of the underlying code. A great example of this idea
taken to extremes is css Zen Garden (www.csszengarden.com), whose single web page is
radically restyled via dozens of submitted CSS documents.