September 11, 2002

Sneak Peek at the future look of BilikFamily.com

Posted by Scott at 10:24 PM

I've been reading about what web developers call Cascading Style Sheets (CSS). It's a couple year old web specification that has been implemented in most web browsers made in the past few years. The key concept of CSS vs. HTML (the language of web pages) is this: you separate formatting/layout from content.

It's not unlike nine years ago when I did my Masters Thesis with this mindset. You don't say that this paragraph is such and such a font with such and such margins. You say it's a header or it's body text. The separate style sheet specifies how all headers, body paragraphs, tables, figures, etc are to be formatted. Power word processing users are familiar with this concept.

HTML + CSS allows this concept. With a little care, common themed web pages can all reference the same style sheets for quick formatting with consistent results.

There are many other benefits to CSS. The control over positioning, borders, fonts, colors, etc. is much better than by using advanced HTML. With CSS you can do away with what HTML calls “table”s. Tables are how you typically get those multi-column layouts that dominate the web. CSS allows you do do very powerful positioning without using tables. With new browsers you can specify one style sheet to be used for the screen and another for use when printing. No longer do websites have to make a special “Printer Version” of their webpages. The reformatting comes for free automatically when you print. It also makes it easy to make your web content port to some of the new devices — like the web-savvy phones and handheld PDAs like Palm Pilots. These devices don't have huge screens but still might need access to content with simpler formatting. Lastly if you get bored with the look and feel of your pages, just redefine the style sheet. Bam! you have a new “theme” for your web pages. Lastly the overall HTML page can be faster loading because you do away with a boatload of formatting commands embedded within the page.

I'm just learning and my finished work is probably days away. You can get a sneak peek at what BilikFamily.com might look like here. Feedback on this style (the font is too small, the color scheme sucks, etc) is welcome. If it doesn't show up as a two column layout with two earth tone backgrounds and a small border between the columns, then you probably have a very old version of your web browser. Let me know what you have and I'll see if I can help you get up to date.

Comments