| home / programming / css_utopia / chap1 / 1 |   [previous] |
|
|
|
Finally, you can define CSS rules in a file that’s completely separate from the Web page. You can then link to this file by including a <link> tag in the head portion of any Web page on which you want to implement the styles contained in that file.
<!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>CSS Style Sheet Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="corpstyle.css" />
</head>
...
In this example, the file corpstyle.css contains a set of external styles that have been linked to this page. Here's what the contents of this file might look like:
h1, h2 {
color: green;
}
h3 {
color: blue;
}
This is my personal preference for the way we should deal with all CSS usage, for a number of reasons.
First, this is the least “locked-in” of the three basic methods designers can use to insert styles into a Web page. If you define an external style sheet file, you can bring it to bear on as many pages on your site as you want, simply by linking to the style sheet from each page on which you want it used. Making a change to a style that appears on every page of your site becomes a simple matter of modifying the shared .css file. If you use embedded or, worse yet, inline styles, you’ll have to copy and paste them into other documents if you want to use them.
Second, and closely related to the first advantage, is that this method is the easiest way to ensure the maintainability of your CSS styles. If you define all your site’s styles in external files, implementing a site-wide style change is a simple matter of making one edit in a single file. All the pages that use that style sheet will display the new styles immediately, following this one change. With the other techniques, you have to either remember which styles are defined on which pages, or use search mechanisms to help you deal with the decentralized styling rules.
Third, external style sheets are treated as separate files by the browser. When the browser navigates to a new page, using the same style sheet, the external style sheet does not need to be downloaded again. Pages that use external styles are therefore quicker to load.
Last, but not least, external style sheets are simply more professional. By using them, you demonstrate an understanding of the importance of the first two issues I’ve just raised, and you make it much easier to discuss them, share them with colleagues, analyze their effects, and, in general, to work with them as if they were a serious part of the site’s design, rather than an afterthought.
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).
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, Digging Below The Surface, 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>
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, Putting CSS Into Perspective, 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.
[1] Cascading Style Sheets Level 2 (CSS2) includes a property called table-layout that alters this behavior, with several important caveats. Refer to Appendix C, CSS Property Reference for details.
[2]Many books and articles about CSS call them “attributes,” or use the two terms interchangeably. In this book, I used the W3C endorsed terminology of “properties”, and reserve the name “attributes” for attributes of HTML tags.
| home / programming / css_utopia / chap1 / 1 | [previous] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27 2003
Revised: June 10, 2003
URL: http://webreference.com/programming/css_utopia/chap1/1
