Jul 10 2004

The joy of separating style from content!

Tags: , Rajiv @ 9:09 am UTC

I have always had this fascination for CSS. Moving from hard-coding-style-in-HTML-sources to defining-it-in-CSS is like moving from Procedural Programming to Object Oriented Programming. Defining style classes gives a very consistent feel to the whole site [assuming you have defined your style classes properly!] And if you want to change how some of the content looks, all you need to touch is the CSS file. You no longer have to depend on complex search and replace regular expressions.

So, when I wrote the Export to HTML plug-in for Pramati Studio, I made sure the exported HTMLs used common CSS files to set colors and fonts. Changing the colors and fonts in one CSS, changes the appearance of all the sources.

Wanna checkout the layout capabilities of CSS?! How about moving the main content to the right?! Or how about choosing a more tacky theme?!

If you are a firefox user, you can choose an alternate style sheet using it’s style sheet switcher. What’s more, firefox will remember your choice the next time you visit this page!

Screenshot of style sheet switcher

And if you are one of the 30% visitors, who are still not using the firefox browser, give it a spin:

Get Firefox

Apart from the advantages you get from abstracting style into classes, better accessibility is another key benefit of using CSS. The other day I was reading this very neat book on accessibility, called Dive Into Accessibility. I loved the way the content is presented in the context of some "real people" and how they benefit from sites using CSS. In the chapter Presenting your main content first, Mark points out that screen readers read aloud the content of the HTML source from top to bottom. However, most sites have the navigation links at the top of the HTML source followed by the main content. So a screen reader has to read out all the navigation links before reaching the main content. What a pain! One of the advantages of using CSS is the ability to control the layout of HTML elements independent of their location in the HTML source. So, using CSS we could have the main content of the page at the TOP of the HTML source though it is visually layed out at the center of the page.

It hardly takes any time to read and appreciate the book … but trust me, it takes a whole lot longer to implement it and to get it into your blood! … but then I have made a start! Check out how this page would look to a screen reader or in a text browser [needs to be improved].

Share:
  • email
  • del.icio.us
  • DZone
  • Technorati
  • Reddit
  • Ma.gnolia
  • Google Bookmarks
  • YahooMyWeb
  • SphereIt
  • StumbleUpon
  • Digg
  • Mixx
  • TwitThis
  • Furl
  • Simpy

No trackbacks

3 comments

  1. Doug


    Ah, the enthusiasm of the newcomer. I was there once, myself. But there is a growing movement away from CSS-P (positioning, aka layout) because it takes an awful lot of effort and produces almost no value.

    You already *have* separation of content and presentation: the presentation is in your Blogger template.

    What HTML/CSS does is give you separation of “semantic markup” and presentation. That’s nice, but not really of much value for a weblog. And CSS-P is a bugbear to get working right in more than one browser.

    CSS *styles* (colors, fonts, etc.) are definitely useful, although if you think “you no longer have to depend on complex search and replace regular expressions” you’ve never tried to *change* an existing design of any complexity. A simple change of font color or typeface requires locating every font rule and updating it. Still, it beats doing it in the HTML.

  2. Sachin


    Thanks for introducing me to CSS. I have been dabbling with it ever since you showed me what I could do with it and the results have made me like my HTML pages a whole lot more!

  3. Mike


    Very nice post. I’ve always thought that separating style from content and giving web-sites a “skinnable” property would be neat thing to have. Similar to what you did with the setActiveStyleSheet() function, I’m currently developing a project called ‘Webskins’ (http://sourceforge.net/projects/webskins) that will let users choose their own CSS for particular web pages (all with Javascript/CSS).

    Pretty neat, GPL/free/etc. I’ll be releasing the source in a day or two. Until then, you can check out a demo at http://webskins.blogspot.com/.

    –Mike

Leave a Reply

Subscribe to comments on this post

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>