| CSS:
The True Language of Web Design: Part 1 | Part
2
Contributor:
Molly E. Holzschlag, Communications Director
World Organization of Webmasters
Part
1: the separation of presentation from document
structure
We
have not learned to design the Web. This is not
to say that we haven't done some profound work when
it comes to Web design, usability, technological
progress and innovation. But in order to get to
this point in the Web's history, we've had to borrow
guidelines from other media, hack and workaround
our way through browser inconsistencies, and bend
markup so far out of its normal shape that we've
nearly broken it.
CSS
has been around for a long time, but the main problem
has not been with CSS, rather, browser support problems
for CSS. But with the release of Netscape 6.x browsers,
and the prevalence of IE browsers along with somewhat
less common but CSS-savvy browsers such as Opera,
we can now begin to turn to CSS for at least some
of our design concerns.
As
a result of the growing proliferation of browsers
on the Web that can support CSS, there is the growing
issue that we as Web designers and developers will
be seriously challenged to begin looking at Web
design in new ways. The bad news is that for those
of us with little experience of CSS, well, we've
got to learn how to write a whole new language!
The
good news, however, is that it's not that difficult
a language to learn if you've been working with
HTML for some time. And there's more good news,
because once you've
learned to employ CSS in your site designs, you'll
find that your are left with a lot less work, a
lot less document overhead such as numerous font
tags and graphic image spacers. Your documents will
be cleaner, much easier to manage, and load and
render much more quickly as a result.
A
Separate Peace
Philosopher Bertrand Russell said that "War
does not determine who is right - only who is left."
For Web designers and developers, it's been browser
wars that have made our lives very difficult. In
some ways, those difficulties have sent some less
committed Web workers running into the night. Those
of us that are left must find our way to steadier
ground.
If we seek innovation in design, we must look first
to the Web browser, for it is within the Web browser
that our visual designs are rendered. We must also
look at our practices with HTML and XHTML. The heart
of the information regarding how Web browsers as
well as those of us authoring documents should ideally
be practicing lies under the auspices of the World
Wide Web Consortium (W3C), www.w3.org. Known as
recommendations or specifications and sometimes
referred to as standards, HTML, XHTML, CSS, and
many other languages and methodologies are being
developed by the W3C with very clear guidelines
as to how to use them.
Fortunately, there's been enough discussion over
the past years of the importance of using W3C recommendations
and specifications as de-facto Web standards. Many
browser manufacturers, Web authors, and tools manufacturers
are starting to pay detailed attention to getting
on with creating a consistent means for Web authors
to achieve consistent results across browsers.
For those Web authors working in today's transitional
time, several ideas that exist in markup are coming
to the forefront as a concern. The primary issue
in terms of CSS is first described in HTML 4, which
asks for a separation of presentation and document
formatting ideally, and demands it in its most strict
interpretation. This means reserving CSS for design,
and the document for the more straightforward structuring
of content.
But Web documents have not been historically developed
that way. Instead, we have developed and learned
to rely on presentational elements and attributes
such as the font element and attributes for alignment,
color, size, and so on. This is the most common
practice in use on the Web today, but that will
ideally change as the rationale and implementation
for CSS grows.
Understanding What
To Separate
When writing documents for structure rather than
presentation, you'll likely stick to the basic structural
components of a document, including:
•
DOCTYPE
declaration
•
HTML
element
•
Head
portion of document with title
•
Body
portion of document
Within the document body, structural markup includes
such things as:
•
Headers
•
Paragraphs
and breaks
•
Lists
•
Divisions
•
Tables
(especially when used as intended: for tabular data)
•
Forms
Some examples of presentational concerns that are
ideally separated out into style sheets would include:
•
Alignment
values (right, left, justify)
•
Color
values
•
Fonts
•
Borders
There are many more presentational concerns. A good
rule of thumb to follow is if an element or attribute
it has anything to do with the way something is
designed versus the way it is structured, it is
likely to be considered presentational.
An
Exercise In Separation
To clarify the point of presentation versus structure,
let's begin by examining an HTML which uses presentational
elements and attributes (Listing 1). This document
is constructed within HTML 4.01 guidelines for Transitional
documents. Transitional documents allow the use
of presentational elements even though HTML 4 recommends
against their use whenever style can be applied.
Listing
1: Example of a Transitional HTML 4.01 page with
presentational elements and attributes
|
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document with Presentational
Markup</title>
</head>
<body>
<h1
align="right">Presentational
Markup</h1>
<p
align="right"><font face="Arial,
Helvetica, sans-serif" size="2"
color="blue">Content here will
be aligned to the right, appear in a sans-serif
font, be the size 2, and be colored blue.</font></p>
</body>
</html>
|
While
the document structure here is fairly intact, it's
easy to see how with only one paragraph using presentation
that the document can get complicated very quickly.
Add more paragraphs, or tables, or what have you,
and the page becomes overly cluttered.
Because Strict HTML 4.01 documents ask that no presentational
elements or attributes will be used, we'll now remove
all of the presentational components. Once we've
taken out the presentational concerns, you'll see
that we can use the Strict version of HTML 4.01
and have a document that conforms to W3C recommendations.
Note: Not to worry, we'll move the presentation
to a style sheet in just a bit to clearly show how
the separation works!
In Listing 2, examine the HTML document, this time
without presentational elements and attributes.
Listing 2: Example
of the same HTML page as in Listing 1, but without
presentational elements and conforming to HTML 4.01
Strict
|
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Document with Structure</title>
</head>
<body>
<h1>Structured
Document</h1>
<p>Unless
a style sheet is applied, this paragraph will
render with defaults: left aligned, default
font, default size, and default color.<p>
</body>
</html>
|
In
the case of Listing 2, the document is properly
structured in conformance with HTML 4 guidelines.
With the removal of the presentational elements,
this can now be an HTML 4 Strict document instead
of a Transitional one.
Restoring
The Style
Of course, our page now has no style-it's simply
structured properly. So, in order to add style,
we turn to CSS. In this case, I'll use an external
(also referred to as a linked) style sheet. The
first thing to do is to create the style rules for
each element.
Begin
with the header, which we want to align to the right:
|
h1
{
text-align: right;
} |
Now
to the paragraph, which we also want to align to
the right:
Now,
for the font. We can add this information to the
rule we've already created for paragraph, since
this is the font we want for our body text.
|
p
{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: blue;
} |
Listing
3 shows the completed style sheet.
Listing 3: The complete
style sheet
|
h1
{
text-align: right;
}
p
{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: blue;
}
|
Type,
or copy and paste, this information into a text
or HTML editor. Save the document as presentation.css.
Of course, the document must be connected to the
style sheet in order for this to work. Open the
HTML document, and note the way the link element
is used in the document head to link to presentation.css.
Listing 4: Linking
to the style sheet
|
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Document with Structure</title>
<link
type="text/css" src="presentation.css">
</head>
<body>
<h1>Structured
Document</h1>
<p>Unless
a style sheet is applied, this paragraph will
render with defaults: left aligned, default
font, default size, and default color.<p>
</body>
</html>
|
Go
on and load the HTML document to see how the styles
take effect. Be sure you're using a style-compliant
browser.
Simplicity
Begins, Complexity Ensues
While this introduction to the concept of separation
of document structure and presentation is very straight-forward,
there are many more ways to approach style. In fact,
style can be downright complicated to work with,
but again, the results are very much worth it. In
upcoming columns, I'll be stepping you through CSS
from both a theory perspective, and one of hands-on
practice. Along the way, you'll begin to see very
clearly why CSS is such an important technology
to be concerned with now, and your enthusiasm at
CSS's strength will undeniably encourage you to
begin using, or broaden your current use, of style.
CSS:
The True Language of Web Design: Part 1 | Part
2
Book
Reviewed at AbleStable®
Cascading
Style Sheets: The Designer's Edge by Molly E.
Holzschlag
|
|
|
|
