OS/2 eZine - http://www.os2ezine.com
Spacer
November 16, 2004
 
AL du Pisani is a South African, working at a large financial institution, where he looks after their Lotus Notes environment. He has been using computers off and an for the past twenty years. His first exposure to OS/2 was with 2.11. It is still the preferred environment, and is what he runs at home. He is also a fan of Science Fiction.
If you have a comment about the content of this article, please feel free to vent in the OS/2 e-Zine discussion forums.

There is also a Printer Friendly version of this page.



Spacer
Previous Article
Home
Next Article


WarpFX


Case Study: Redeveloping a web site with PPWizard (Part 5): Cascading Style Sheets

In the previous part of this case study, I dealt with extending PPWizard by writing REXX code to import semi-structured text into a PPWizard template file, and generating a HTML page from the resultant template.

In this part I will discuss what was to me the most frustrating part of the whole site redesign: Seperating the HTML information from the display of the information.

The way to do this is by way of a style sheet, conforming, in my case, to CSS2.


The Good

Seperating the data from the presentation is a good idea. This enables me to tweak the display of the pages without having to touch the underlaying HTML page, and vice versa.

My problems with it is solely based on my difficulty in getting it to work the way I wanted it to work.

Except for one or two instances, where I made a conscious decision not to make use of the style sheet, I separated all style information from the HTML pages, and put all the style information into a seperate file.

For a good example of how CSS2 style sheets can make your life easier, you need to look no further than the first definition in my style sheet:

body {
color: white;
background-color: black;
font-family: "Times New Roman", serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
text-align: left;
margin-left: 1.5em;
margin-right: 1.5em;
}

In this I define how the BODY tag in all HTML pages should be displayed:

The Background colour should be black, the foreground colour should be white, leading to white text on a black background.

I set my default font type, namely Times New Roman. Font style is set as normal, i.e. not italic. Font weigth is set as normal, i.e. not bold. The size of the font is set to medium, which in my case displays as about 12 point type. The normal text alignment on my pages is left justified, and I set a small left and right margin.

As you can see, none of my definitions are absolute. I do not demand that you will read my page in my defined font size, which means that somebody that have set their computer to display everything in a larger font size, will still be able to read what I have written. Similar arguments follow for margins, and further display elements.

Once I have defined the above element, it is used by the HTML pages linked to this style sheet. Since I want every page to look the same, having a single BODY style element works for me.

Classes

For modifying text display and colour, I have defined a couple of variants to the default behaviour:

/* Item Label. This is usable by by all tags, but mostly used with P or SPAN tags */
.ITEM_LABEL {
color: yellow;
font-weight: bold;
font-size: 1.5em;
}
/* Reviewer. This is usable by by all tags, but mostly used with P or SPAN tags */
.REVIEWER {
color: yellow;
font-weight: bold;
}

Both ITEM_LABEL and REVIEWER are used to modify the display of text.

Example:

<p class="ITEM_LABEL"><$ThEventName>

<p><SPAN class="ITEM_LABEL">Time: </SPAN><$ThEventTime></p>

In the first instance, the entire paragraph are displayed in yellow, slightly bigger than normal bold text.

In the second instance, the word Time is displayed in yellow, slightly larger than normal bold text, and the rest of the paragraph in the default style of text. In this case, white normal text.

The Bad

/* Div classes */
DIV {
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
DIV.LAST_UPDATED {
position: static;
top: 1.5em;
bottom: 4.5em;
clear: both;
text-align: right;
color: yellow;
font-size: 0.8em;
margin-right: 1.2em;
}

In the definition for DIV.LAST_UPDATED, you can see part of my problem: The definition as it is work. I just do not know which parts of it I can leave out and still have it work the way I want it.

What still works nicely is that I can define something in one part, and it is inherited by the next. So, I can define that font family as a sans-serif type in the DIV definition, and still have the text in a sans-serif font in the DIV.LAST_UPDATED definition.

And only where I override the text colour, do anything other than the originally defined BODY's text colour apply.

The Ugly

The above code snippet for the DIV tags are the only parts which remains of nearly four days' worth of work, where I tried to display something on one of my pages using DIV tags. In the end I redeveloped that portion of the page using a hidden table, and it worked the way I wanted almost immediately.

Here I ran into one of my main complaints with the CSS2 standard document: Too many of the pieces are all over the show. To set margins, one chapter. To define this element as not part of normal data flow, another. Positioning on a page, yet another chapter.

Nowhere could I find which parts I should be mixing and matching. And in too many cases I could not get the resulting styles to behave in a way similar to the documentation. And I have no idea if it is because the CSS2 documentation is ambigiously written, it is badly implemented, or both.

With tables I also had the problem that it would appear that the various table elements were not inheriting qualities that way that I expected it to do.

So I could not go and define a generic TABLE element, and define only that which have changed in the variants and smaller table elements, but had to declare each element explicitly.

/* Table specification */
TABLE.normal {
vertical-align: middle;
text-align: center;
border-width: medium;
border-style: solid;
border-collapse: collapse;
}
TABLE.hidden {
text-align: center;
width: 98%;
border-width: 0;
border-style: hidden;
border-collapse: collapse;
}
TABLE.navbar {
text-align: center;
width: 98%;
border-width: medium;
border-style: solid;
border-collapse: collapse;
}
TABLE.BookTable {
text-align: center;
width: 90%;
border-width: medium;
border-style: solid;
border-collapse: collapse;
}
/* Table Heading Specification */
TH {
text-align: center;
font-weight: bold;
color: yellow;
border-width: medium;
border-style: solid;
}
/* Table cell specification */
TD {
text-align: left;
border-width: thin;
border-style: solid;
}
TD.hidden {
text-align: left;
border-width: 0;
border-style: hidden;
}
TD.hiddenCenter {
text-align: center;
border-width: 0;
border-style: hidden;
}

Which is why all of my 4 TABLE variant definitions have some elements defined the same in each instance.

I have also not been able to get a centered table on any of my pages. And there is no explicit way to get it done in the CSS2 standard document. As far as I could figure it out, having a text alignment of Center, would also center align the table. This have, needless to say, not worked when I tried it.

And once again I have to wonder if the documentation is wrong, the implementation is wrong, or I am stupid. This is not a wonderful place to be in.

Conclusion

Where CSS2 are fully documented and implemented, it is good. Where the above does not apply, it is bad. And unfortunately for myself, I needed elements from both places to make my web site work.

This concludes today's article on CSS2 use in my web site.

In the next (final) article, I will be looking at validating the HTML pages and CSS2 style sheet.

Previous Article
Home

Copyright (C) 2004. All Rights Reserved.