In the print world you're used to, content, structure, and
presentation are tightly fused. For example, if the ink on a piece of paper is
black today, it will most probably be black tomorrow.
That's not true on the Web. Here, you can separate content,
structure, and presentation and you can manipulate them independently. You use HTML tags to structure content. You use style
sheets to present content.
Who's in charge?
Why is this page so brown? Why is it in this plain font? Most
importantly:
Who should decide what a page looks like, the page maker or
the page reader?
Style sheets, or Cascading Style Sheets, are documents
that contain information about presentation. They're an official specification of the World Wide
Web Consortium, W3C, the standards-setting body
run by the Web's inventor, Tim Berners-Lee. Very authoritative.
Originally, that is, 1993, the first popular browser, Mosaic,
was free for the downloading. It rendered an HTML file by interpreting the tags
the way you, the user, wanted them. You would choose the page's background
color, typeface, text color, text size, etc. For example, you could set the
browser to render all the text between p tags as a black 10pt Times New Roman or
any other font on your computer.
The page maker was responsible for content and structure.
The page reader was responsible for presentation and meaning. Oh yeah?
Graphic designers, who have made their living for hundreds of years controlling
presentation for the reader, found HTML somewhat, uh, challenging in this
regard, to be kind about it.
Marc Andreesen, one of the University of Illinois grad students
who wrote Mosaic, graduated and moved to California where he found financial
backing for a new company, Netscape Communications. They had a great business
plan: extend HTML until it was a pretty good page layout language. Build the
only browser that rendered their extended HTML. In addition, build the server
software that best made it all work together. Give away the browser and charge a
lot of money for the server.
By analogy to the Information Highway, Netscape gave away
the cars but owned the land that the cars took you to.
This business plan worked brilliantly. The Netscape founders are
all billionaires. But you'll notice their company doesn't exist anymore. AOL
bought it and no new Netscape browser came out until 2001, and then it was
completely rewritten. As a result, most web pages look better if viewed through
Microsoft's most recent browser, but that's another story.
Meanwhile, designers flocked to Netscape's extended HTML because
they could relate to it as sort of better paper. Note how cars were
originally "horseless carriages". For you and me, it was a hard
bargain. As users of the Web, we got pretty pages, but we lost our ability to
make them look like what we wanted them to look like. Once that degree of
control was back in the hands of the designers, the marketing departments took
over starting in 1996. They created the Web as we know it today.
For the designers, however, it was an even harder bargain. They
were trying to use the wrong tool, to use a hammer when they needed a
screwdriver. Through the open standards process, this conflict between structure
and presentation is resolving slowly. Until then, I'm asking you to change from
a Web user into a Web maker under difficult conditions: a lack of standards.
The current state of affairs is a trade-off as you'll soon see
when you start asking, "But why can't I ... ?" To help you understand
why you can't, let's look at two features of computers inherent in the
distinction between atoms
and bits.
separate form and content
In the world of atoms, form and content are frozen and
inseparable. I can't change the size of the text on a page once the ink has been
squirted onto the dead tree. I can change the lens through which I view it by
putting on my glasses, but I can't change the atoms I'm looking at.
In the world of bits, form and content are fluid and
separable. If you're using Internet Explorer, pull down the Tools menu and
choose Internet options. At the bottom of the General tab, you'll see color,
font, and accessibility options. Also, pull down the View menu and choose Text
Size. If you're using Netscape's browser, pull down the Edit menu and choose
Preferences. You don't need a lens to make the text appear different.
separate objects
In the world of atoms, objects have integrity. A book is an
object. Let's take it apart. We can slice off the binding and create a separate
object out of each page. The next level might be a paragraph. We can cut out
each paragraph -- but on which side of the piece of paper? If we separate each
paragraph on one side, the paragraphs on the other side will get messed up.
Okay, so let's slice the paper like a sub roll and create two sheets, four
sides. Now we can separate the paragraphs. Let's take it to the next level.
Let's separate each paragraph into words, then each word into letters, the
digital code. How could we change the color? We could spray paint it red, so it
would appear red even though the black ink and white paper are still underneath.
What do we have? A heap of atoms. A mess.
In the world of bits, we can also separate objects, but we don't
have a mess. We can name the objects, we can give them behaviors, we can relate
them to other objects as parent and child or sibling with inheritance of
properties. That's just for starters.
For example, use the Internet Explorer browser to look at the splash page I made for Clear
Light Studio. (If you're using an older version of Netscape's browser, you may
get two pages depending on how it's set for JavaScript.) For the moment, let's
think of this "page" as composed of four objects: the background and
the three logos circling on it. Now move your cursor over each of the circling
objects in turn. See the red text that appears and disappears? How many more
objects is that?
You can't do that with paper. You can't do it with TV, either;
you can watch TV, but you can't change what's on the screen. (For what it's
worth, however, in a couple of years, you'll be able to choose your camera angle
for watching the Super Bowl.)
How do you make web pages like Clear Light Studio's? For
starters, you recognize the limits of
the whole "page" metaphor. Then you learn more about style sheets.
Style basics
If you know about web page anatomy,
you may already know how to fuss with the presentation of a document when you
set the background color of the page by adding an attribute
to the body tag and giving a value to the
attribute.
<body bgcolor="#ffcccc">
That works because there's only one body tag. But the page
you're reading now has dozens of p tags. You have three ways to style them,
three levels. They're called cascading style sheets because when there's
a contradiction, level 1 is given priority over level 2, which always has
priority over level 3.
Level 1: line by line
The font tag
I could add a color or font attribute to each p tag and change
the value of those attributes for each paragraph. I could do it for each word.
For example: word green.
Here's the source code:
<font color="#00FF00" face="Times New Roman" size="5">word green</font>
To set the style for each word or even each paragraph is
time-consuming. It's also unnecessary. For most documents to be readable, they
need a lot of consistency. Except for some of the examples, every text paragraph
on this page has basically the same style. So does every h2 heading and every h3
heading. For that matter, every paragraph in the Gizmos section of Ricci Street
has the same style. If you ignore the colors, every paragraph on Ricci Street
has the same style.
Let's say I styled every paragraph individually. What would
happen when I wanted to change the typeface throughout Ricci Street? I'd have to
re-tag every single paragraph, thousands and thousands of them. Not likely.
The answer: separating the form or style from the content's
structure.
Level 2: page by page
The style tag
Let's say I want every paragraph to be just like this one: The
typeface is Verdana, it's a medium height when compared to the headings and
navigation bars, it's aligned left, and it's very dark brown, though it may look
black.
In the head section of the source code, I can put the style tag:
<style> </style>.
Between it, I can specify what I want:
p { font-family: Verdana;
font-size: medium; text-align: left; color: #331A00; }
Then I don't have to specify it for each p tag. If I want to
change them, I can make one change in one place to one variable. The change will
affect every p tag. It would be nice if it were that simple, but of course I
want two types of p styles. I want the regular text paragraph. I also want the
links at the top of this page to carry the p tag but I want that text to be
smaller and centered:
Or I want to put it into a colored box for emphasis:
this page
structure | getting started
presentation | style sheets | learn
more
These are all p tags, but a different type or class of p tag.
Each of these types or classes of style needs its own attributes and values. When
you view the source of this page, you'll see that the common body paragraph is
designated class=body. The centered links are class=foot. The colored box is
class=lightbox. The tags read:
<p class=body>
<p class=foot>
<p class=lightbox>
In the document head, the style tag for the body class would look like this:
<style>
.body { font-family: Verdana; font-size: medium; text-align:
left; color: #331A00; }
</style>
Level 3: site by site
Separate style sheets
When you view the source of this page, you'll see that I've
taken it one level further. Because I want all of the Gizmos pages to share a
common style, I've put all the style information into a separate file called
gizmos.css. In the head of every document, I link to that style sheet.
<link title="Digital Wares house style" rel="StyleSheet" href="../../images/gizmos.css"
type="text/css">
On your home PC or laptop (this won't work on the network at
school), go to the Start menu and select Find | Files or Folders .... In the
Named box, enter *.css. You'll soon have a list of all the style sheets on your
computer, mostly in your browser cache. I just did it on mine and it found 324 .css
files. Clicking on Name at the top of the list will alphabetize them. Scroll
down to gizmos.css. Double-click on it, which should open the style sheet in
Notepad. You'll be looking at the style sheet that's governing this page.
I could copy and paste it between the head tags of an .htm file,
too.
Syntax Guides
No, that's not what you pay at the liquor store. Syntax is the set
of rules that makes a semi-colon ; different
from a colon : and a curly brace { different from a bracket [.
To learn more about the syntax for style sheets, I highly recommend the Web
Design Group's comprehensive list of CSS properties below. CSS stands for
cascading style sheets.
Start with Webmonkey's articles and
tutorials on Cascading Style Sheets.
The Web Design Group has a collection of resources,
including a very short tutorial
and especially a comprehensive current list of CSS1 properties.
Internet.com's WDVL (Web Development Virtual Library) has an
SS Tutorial that
includes a
Quick
Reference.
Miloslav Nic has a comprehensive CSS1 Reference as
well as a CSS1 Tutorial.
What's next? The modularization
of CSS, says the W3C.
Everything
you ever wanted to know about Style
by John Allsopp
Interactivity - DOM and JavaScript
CSS layout templates
Web Nouveau - 500 CSS
layout sites
Rob Chandanais' The
Layout Reservoir
Eric Meyer’s CSS Edge - experimental, creative areas that exceed the
capabilities of all but a handful of browsers
Eric Costello’s CSS Layout
Techniques
Owen Briggs’s Little Boxes click on a layout and view the CSS
New York Public Library's Style Guide: CSS: Steal These Style
Sheets!
Mark Newhouse’s Practical
CSS Layout
A Web Designer’s Journey - one site's recent conversion
from table layouts to CSS
Open Source Web Design -- free
layouts, mainly using tables, not CSS.
hang out with the experts
Steven Champeon’s Webdesign-L
a community like Evolt.org
John Allsopp and Eric Meyer's CSS–Discuss,
a superfine mailing list created
in January 2002 by CSS experts and open to designers and authors at every
level.
Fancy Drop Down Navigation Box
Q: How do you make this?
A: Use style sheets.
1) Put this code in the header of your page between
</title> and </head>. Substitute the colors you want for my ffcc99
and cc9966. I'm only using two colors here, but you can specify as many as you
wish by giving each a unique class name.
<STYLE type="text/css">
.lightSelect {background-color:#ffcc99; font-weight:bold;}
.optiondark{background-color:#cc9966;}
.optionlight{background-color:#ffcc99;}
</STYLE>
2) Use the classes defined in your style sheet. Note (class="lightSelect")
inside the <select> tag and class="optiondark" and any others
inside the <option> tag.
<form name="DropBox">
<select class="lightSelect" name="SampleDropDown"
size="1" language="javascript" onchange="gotoLink(this.form);">
<option value="index.html" class="optiondark">Webmaking
Home</option>
<option value="browser.htm" class="optionlight">Browser</option>
<option value="ftp.htm" class="optiondark">FTP</option>
<option value="webpageanatomy.htm" class="optionlight">Web
Page Anatomy</option>
<option value="websiteanatomy.htm" class="optiondark">Web
Site Anatomy</option>
<option value="websitemanagement.htm" class="optionlight">Web
Site Management</option>
<option selected> -- Select to Go -- </option>
</select>
<script language="JavaScript">
<!--
function gotoLink(form) {
var OptionIndex=form.SampleDropDown.selectedIndex;
parent.location = form.SampleDropDown.options[OptionIndex].value;}
//-->
</script>
</form>
3) To make the links go where you want them to go, exchange my file names for
the path to yours and exchange my link names for yours. Add as many options and
colors as you like.
Style
Sheets
