AbleStable®
go to Reviewsgo to Servicesgo to Registered Usersgo to Resource Centrego to AbleStable: Helpgo to About Us
go to AbleStable: Home Articles
go to Search

go to Exhibitions Centre
  Web Design: advice and help to improve your web site
go to Help
go to Resource Centre
go to Library
go to Articles
go to E-Books
go to Glossary
go to Reviews
go to Web Link
Library > Articles > Web Design > 014

E-mail this web page address to a friend or colleague
Enter their email address below (no record is kept of this action)

     

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:

p {
text-align: 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



     
       
 
Authors background

Molly E. Holzschlag

Deemed one of the Top 25 Most Influential Women on the Web, there is little doubt that in the world of Web design and development, Molly E. Holzschlag is one of the most vibrant and influential people around. With over 25 Web development book titles to her credit, Molly currently serves as Communications Director for the World Organization of Webmasters.

As a steering committee member for the Web Standards Project (WaSP), Molly works along with a group of other dedicated Web developers and designers to promote W3C recommendations. She also teaches Webmaster courses for the University of Arizona, University of Phoenix, and Pima Community College. She wrote the very popular column, Integrated Design, for Web Techniques Magazine for the last three years of its life, and spent a year as Executive Editor of WebReview.com.

Find Molly's Web Site at www.molly.com. Molly Holzschlag can be contacted by emailing her at molly@molly.com
.

Although our contents are free to browse, copyright resides with the originators of all works accessed at AbleStable®, and unauthorised copying or publication of our site contents is strictly prohibited. 

AbleStable © 2002-2007
 
     
       

 All Material: AbleStable © 2002-2007
go to Frequently Asked Questionsgo to Feedbackgo to Press Centrego to Privacy Statement