Article
HTML Utopia: Designing Without Tables Using CSS, Chapter 1: Getting The Lay Of The Land
Why Bother?
Well, now that you have a basic overview of what CSS is all about, why we have it, and why I think it’s an important technique for Web designers to adopt, where’s the proof? Let’s look at an example of a small, but not overly simplistic Web page (see Figure 1.4).
Figure 1.4. Sample Web Page Demonstrating Embedded Styles
Using embedded CSS, here’s the HTML that will produce that page. Look ma, no tables! Don’t let the complexity of the code intimidate you—by the end of Chapter 3, you should be able to infer the meaning of most of it without my help. For now, you can download the code archive from the book’s Website and marvel at the results in your browser. The file is called ch1sample.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic 3-Column Sample Page</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-color: teal;
margin: 20px;
padding: 0;
font-size: 1.1em;
font-family: verdana, arial, helvetica, sans-serif;
}
h1 {
font-family: verdana, arial, helvetica, sans-serif;
margin: 0 0 15px 0;
padding: 0;
color: #888;
}
h2 {
font-family: verdana, arial, helvetica, sans-serif;
margin: 0 0 5px 0;
padding: 0;
font-size: 1.1em;
}
p {
font-family: verdana, arial, helvetica, sans-serif;
line-height: 1.1em;
margin: 0 0 16px 0;
padding: 0;
}
.content>p {
margin: 0;
}
.content>p+p {
text-indent: 30px;
}
a {
color: teal;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: 600;
text-decoration: none;
}
a:link {
color: teal;
}
a:visited {
color: teal;
}
a:hover {
background-color: #bbb;
}
/* All the content boxes belong to the content class. */
.content {
position: relative;
width: auto;
min-width: 120px;
margin: 0 210px 20px 170px;
border: 1px solid black;
background-color: white;
padding: 10px;
z-index: 3;
}
#navleft {
position: absolute;
width: 128px;
top: 20px;
left: 20px;
font-size: 0.9em;
border: 1px dashed black;
background-color: white;
padding: 10px;
z-index: 2;
}
#navright {
position: absolute;
width: 168px;
top: 20px;
right: 20px;
border: 1px dashed black;
background-color: #eee;
padding: 10px;
z-index: 1;
}
-->
</style>
</head>
<body>
<div class="content">
<h1>Getting the Lay of the Land</h1>
<p>We can look at Cascading Style Sheets (CSS) from a number of
contextual perspectives. I prefer to view them as a
correction to a fundamental mistake that was made at the
beginning of Web Time, back in the old days of the mid-1990's
when Tim Berners-Lee and a subsequent phalanx of Web builders
first envisioned the beginnings of the Web.</p>
<p>What was that mistake?</p>
</div>
<div class="content">
<h2>CSS in Context</h2>
<p>Almost as soon as the Web became popular, graphic designers
began noticing what they saw as a fundamental flaw: the
method by which a Web browser displayed information in HTML
files was not within the designers' control. No, it was the
users who were in primary charge of how the Web pages they
visited would appear on their systems.</p>
</div>
<div class="content">
<h2>Keep Adding Content</h2>
<p>You can see that as you keep adding content to this page, it
adds nicely boxed and centered material down the center of
the page.</p>
</div>
<div id="navleft">
<h2>Some Links</h2>
<p>
<a href="http://www.danshafer.com/"
title="Dan Shafer's Personal Web Site">Dan's Home Page</a><br/>
<a href="http://www.sitepoint.com/"
title="SitePoint Home Base">SitePoint Home</a><br/>
<a href="http://www.sitepointforums.com/"
title="Discussion Board for This Book">Discuss This Book</a><br/>
<a href="" title="">Fake Link One</a><br/>
<a href="" title="">Nothing Here</a><br/>
<a href="" title="">Links Nowhere</a><br/>
<a href="" title="">Fake Link Four</a><br/>
<a href="" title="">Fifth Fake Link</a><br/>
</p>
</div>
<div id="navright">
<h2>Why CSS is Better</h2>
<p>Style sheets allow you to separate content from its
presentation, which leads to pages that are more easily
reproduced as templates for other pages and to vastly easier
maintenance. Smaller file sizes, fewer place-holder graphics,
and faster load times are some of the other benefits of CSS.</p>
<p>If you have other ideas on this subject,
<a href="mailto:dan@danshafer.com">drop me an email</a> and
let's talk about it!</p>
</div>
</body>
</html>
Summary
You should now understand the historical and technological contexts in which CSS has emerged, what major problems it is designed to solve, and how it works at a surface level. You should also know why tables are a bad idea as a Web page layout device, even though they have other, perfectly valid uses.
In addition, you can identify both the parts of a CSS rule and at least three ways
of categorizing CSS style rules in general.
Chapter 2 drills more deeply into the prospective issues surrounding CSS. It clears up some of the misconceptions you may have about this technology, and describes some of the important issues you’ll have to take into consideration because of the way Web browsers work (or don’t) with CSS rules.
Read Chapter 3: Digging Below the Surface.