INTRODUCTION:
As this website becomes larger, so does the task of maintenance. I must start to find ways to leverage my time to avoid being overwhelmed. One of the new HTML tools available to help keep the appearance of a site consistent is"cascading style sheets".
BEGINNING RESEARCH:
The only browser in widespread use that supports cascading style sheets currently is
Microsoft Internet Explorer 3.x, so I decided to begin my research at Microsoft. At Microsoft's SiteBuilder Network I found
A User's Guide to Style Sheets in the Workshop area. Next I went to the World Wide Web Consortium (
W3C)to find the latest recommendation specifications for
Cascading Style Sheets, Level 1. Now that I have the latest specification and Internet Explorer's implementation of that specification, it is time for study, absorption, and experimentation. When I have played around a little, I will be back to continue this narration.
Konsultant's Log
Cyberdate 03.14.1997
Well, after reading the above referenced documents, I decided to get my hands dirty with the following restrictions:
- I would do my testing on an Intranet system devoted exclusively to Internet Explorer 3.x browser technology;
- I would work with only the one method: embedding a style block.
This first experiment involved editing the HTML code by hand and then viewing it in the browser, then tweaking the code and viewing again. This is a tedious process but worth the time if later used for many documents in the form of a linked css file format.
I chose a simple resume page for the architectural firm I am employed by as the object of my experimentation. I wanted to provide a wide margin on the left side of the page for a graphic band (similar to this page) and a smaller margin on the right. I also wanted to specify font styles and colors for headers and normal text.
I ended up with the following embedded style block placed between the HTML "HEAD" and "TITLE" tags:
The <STYLE TYPE="text/css"> tag indicates the beginning of the style block to browsers that support cascading style sheets. Browsers that do not support ccs will generally ignore the tag.
<!-- and --> is HTML code for programmer comments. Browsers will not display text placed between these code elements to the user viewing the page. They are used here to keep browsers that do not support ccs from displaying the confusing style sheet code to the user. Browsers that do support css implement the codes and "know" not to display the code text.
HTML specifies header elements H1 through H6 with H1 being the most prominent and H6 being the least prominent. H1 {font: 24pt/26pt "Times New Roman"; color=red; margin-left: 150px; margin-right: 50px} tells the browser to ignore the default settings for H1 and to display any text between the <H1> and </H1> tags as Times New Roman TrueType font 24 points high with a line height of 26 points, red in color, and with left and right margins of 150 pixels and 50 pixels, respectively.
The other heading element,H3 {font: 16pt/18pt "Times New Roman"; color=red; margin-left: 150px; margin-right: 50px} has been formatted the same as H1, but with a slightly smaller font size and line height.
For normal text contained between the paragraph elements <P> and </P> I selected P {font: 11pt/13pt "Arial"; margin-left: 150px; margin-right: 50px}, where the font is "Arial",the font size and line height are 11 points and 13 points, the color is the browser default color (black) and the margins are the same as H1 and H3.
"Times New Roman" and "Arial" fonts were chosen because they are standard Windows fonts initially installed on all Windows systems. (If the specified fonts are not installed on the user's system, the browser will fall back to the default browser fonts for that element.)
The HTML "Ordered List" elements <OL> and </OL> are used to format outline type lists. (e.g. 1,2,3 or A,B,C line items). The two "restrictions" at the top of this article is an example of an ordered list. OL {margin-left: 175px; margin-right: 75px} widens the margins on any ordered lists in the HTML document by 25 pixels on each side.
The HTML <HR> "Horizontal Rule" element places a divider line or graphic between blocks of text. HR {margin-left: 150px; margin-right: 50px} formats the dividers to the same margins as the main text.
The result of the embedded Cascading Style Sheet block code when viewed in Microsoft Internet Explorer 3.x is shown below.
The same page when viewed with Netscape Navigator 2.x which does not support Cascading Style Sheets renders the following screen.
OTHER KONSIDERATIONS:
I could have applied the "margin-left" and "margin-right" property values of 150 points and 50 points to the HTML <BODY> element which would have eliminated the need to specify these properties in the <H1>, <H3>, <P> and <HR> elements. Because these elements are contained within the <BODY> and </BODY> tags, they "inherit" the margin properties. Since the <OL> element also inherits the margin properties, It's margin properties would have had to be changed to 25 pixels on both sides to produce the same effect as the above code (25px + 150px inherited = 175 pixels for the left margin and 25px + 50px inherited = 75 pixels for the right margin).
When I applied margin properties to the <BODY> element, however, I ran into problems. This same page has HTML table elements in it, and the tables did not "react well" to the css margin properties applied to the <BODY> element. The tables became unreadable. There may be a way to make the tables coexist with the css code, but I haven't found it yet.
Since the Cascading Style Sheet technology is, in part, designed to reduce the need to resort to the "kludge" solution of using borderless tables to produce columns of text, resolving the conflicts between tables used in this way and css is probably not a priority among browser programmers. You can produce precise columns of text with css code alone and dispense with tables entirely, but doing this "by hand" without a WSYIWIG css-aware HTML editor is tedious at best.
KONCLUSIONS:
I find this technology too "bleeding edge" to be employed on this site yet. I will be ready to embrace it when the majority of browsers and publishing tools support it. I'm excited about the future of Cascading Style Sheets and will continue to experiment with css in intranet environments where I can limit the browsers to those that support it.
TECH INVESTIGATION UPDATES:
Is CSS Really Here? 03.17.1997 Brian Wilson. As the creator and developer of Index DOT Html, he's been busy putting Navigator 4.0b2 through a number of CSS1 compliance tests. What follows are his findings
Real-World Web Design 04.01.1997 Webmonkey's designer, Eric Eaton. Reprinting of one of his rants on the current state of CSS and Web design.
Web Style Sheets Internet Toolkit 04.30.1997 PC Magazine Online
Unfurling Style Sheets 05.08.1997 ZD Internet Magazine feature story by Robert Richardson
Getting started with cascading style sheets 09.03.1997 C/NET Browser.com feature on Web development for 4.0 browsers by Matt Rotter and Charity Kahn.
|
