How to get started creating CSS for given (dynamically generated) HTML?

Question

The Separat*ion* of Layout and Content is the domain of CSS and HTML - so far well understood. Now about separat*ing*...

I'm looking for hints and Best Practices to get started with the task of providing a "skin" or "theme" for a content management system.

Background:

We are starting to embrace a Portal Server/Content Management System and are starting to change the look and feel to match our needs.

Our designer has so far mainly worked with full control over HTML and CSS, tweaking either one in order to get pixelperfect layout. With adoption of the cms there's a lot precreated HTML (very semantic, almost no tables :) that needs to be skinned with CSS and Images. Though it is possible to change the HTML fragments, I'd prefer to do so only as a last resort.

As this provides the challenge of "how to get started" my question is about any tipps how to proceed or articles that can help managing or organizing this task - e.g. best practices in designing, how to slice this task or what tool to use.

It seems bad practice to just save a dynamically generated page to disk and make changes locally. This would be somewhat ok for the css files but changes to html elements must be retrofitted to the fragments that they are generated from. I'd like to keep this out of the designers realm if possible. Also the thought of Dreamweaver (or any similar tool) making implicit tweaks to the HTML structure is frightening for me.

For the curious: The mentioned CMS/Portalserver is Liferay, but the question is really language- and tool-agnostic.

Edit: FireBug (as Josh suggested) is awesome for trying on-the-fly changes to css. Is there more - either in the area of tools or in process and self-organization?

Answer 1

Usually, Whenever I am in a situation Like this, I bring up the page in FireFox, inspect the different elements using FireBug and see exactly what css is applied to them. THen I'l just modify the existing css until I get what I like. You can even play around in firebug and modify the CSS without "saving" those changes.

Answer 2

If you're looking for practical examples of separating style and content, then I'd suggestion the CSS Zen Garden. Trawling through the HTML and CSS is inspirational and enlightening and should help with what you're trying to do.

My #1 tip would be be to make everything as semantic as possible and use lots of classes and ids to hook your styles onto.

Answer 3

Have look at CSS Tidy, we normally use this to clean up the CSS and reorganise for development and production. However, I personally prefer writing HTML/CSS by hand before using this. It is just a matter of individual preference I guess.