Separating Design from Content (HTML/CSS)
More and more people are turning to CSS to separate as much as of their design from the content and more importantly to free their html layout from the shackles of tables. Tables are thus best left for tabular data display. I had nurtured myself a layout done purely through CSS 2.0 and a doctype of XHTML 1.0 transitional a few weeks back, Philippe Wittenbergh was helping me with the layout, trying to get around to it using many hacks. But in due course of hacks over hacks, one day my site get caught in the ALA cut of bug, or the “guillotine bug”.
Then it was time to think over and do a hackless CSS layout as much as possible, so I settled with the present simple layout based on XHTML 1.0 transitional doctype powered by a mix of CSS 1 and CSS 2. And yes, at this juncture, let me tell you that the last ditch problem in validating the CSS was, that of the CSS from the updated MTCodeBeautifier with the whole bunch of codes, I had to modify that to validate as a valid CSS 2.0. At the moment, I had just completed the modification for the Actionscript syntax style sheet, and most likely I will have to modify some MTCodeBeautifier file for the same. While struggling to do a tableless (yes, no tables at all) for this site, I came across and learnt a lot from the following sites regarding CSS, their techniques, tips, tricks and hacks. Head over to the links listed below and learn some cool stuffs. Remember CSS is being supported more and more by most modern browsers and many other applications, so it is a good thing to learn something along the way.
CSS related worth mentioning links
- eric meyer’s website
- the css wiki
- a list apart’s css layout technique
- blue robot how can you miss this one,
- the noodle incident
- glish a good resource,
- kay
- css shark
- nc design rather basic but still good for a start,
- nu blog, care for css for print,
- real world style, styles that works with antique browsers too,
- w3 schools’ css and how can I forget the css link on
- w3c
- Jeffrey Zeldman’s CSS smorgasbord)
- CSS Text Propeties
- Fast Rollovers, No Preload Needed
- Red Melon experiments
- Mini-tab shapes vertical mini-tabs
- Pure CSS popups
- Source-ordered columns CSS Hints for IE5
- Netscape-4-compatible CSS layouts
- CSS browser hacks Hiding CSS from old versions of Opera
- Hiding CSS from various browsers
- Using CSS to style email