Digital Web Magazine

The web professional's online magazine of choice.

Integrating CSS with Content Management Systems

Got something to say?

Share your comments on this topic with other web professionals

In: Articles

By Victor Lombardi

Published on September 15, 2004

Diagram showing database content going into a CMS/PMS system, which generates an XHTML file and a CSS file, which combine to create a Web page Building CSS editing features into our content management systems allows us to make style changes as easily as we make content changes. In the future, managing the design of a Web site at the tactical level will be as easy and efficient as managing content.

Managing presentation

Let’s assume we all run big, important Web sites that require content management systems for editing content. We go to our Web-based forms, edit the content, and publish with style and grace.

Let’s also assume we’re all good boys and girls and have separated our content from our presentation. We not only have content management templates that flow content into XHTML, but our presentation code exists separately in CSS files.

Once we have a CMS that lets us manage our content, the next step in this put-your-feet-up-on-the-desk-and-manage-the-Web-site evolution is a system that lets us manage our presentation, too. Let’s call this a presentation management system, or PMS.

The PMS administration interface

I will tackle process and philosophy later; for now, let’s examine the user interface.

Here are a few sketches of how you might edit your stylesheets from a Web-based interface. They’re listed in order of technical skill required of the user, from most to least.

Web-based CSS upload

Image showing ability to upload a CSS file and choose the media type This design:

Web-form CSS editor

Image showing the ability to edit some aspects of CSS rules This design:

Web-form CSS editor with lists

Image of screen allowing the selection of preset values for selector properties This design:

Modular style selector

Image of screen allowing selection of theme, palette, and type styles. This design:

Monolithic style selector

Image showing selection of a style sheet by user-friendly name This design:

Using styles in the CMS author interface

Image showing text editing interface with ability to select text and apply a seletor to it One obstacle to more widespread adoption of Web standards is the outdated mark up generated by CMSs. When marking up content in a CMS, all appropriate selectors defined in stylesheets should be made available.

For example, a PMS text input interface should be designed so that authors can select text and apply a style to it.

Rich application CMS add-ins like CSS Web Edit Pro will even do this with a WYSIWYG display.

Why PMS? Why?

A PMS is useful when any of the following is required:


It is essential to determine certain user needs when designing a PMS UI.

First, I discover who the users are, what roles they play, and what expertise they have. Next, I use this information to match features to users.

On a particular project I might have two types of users—designers and clients, for example. The designers are given an interface to modify the CSS. In this case they have extensive CSS expertise and only edit styles occasionally, so they are given a PMS interface to upload whole CSS files. When clients (who generally have no Web development skills) create new pages with the CMS, they need a variety of layouts that correspond to the content they’re authoring. They are given a PMS interface that allows them to simply select one of a variety of page layouts.

I’ve found it can be a mistake to match the role to the ability to edit specific files (for example, using a PMS to match designers to a user interface that inserts images into the XHTML). In reality, the separation of content and presentation isn’t that clean. Images can be content, like when a photo accompanies a news story; or decoration, like when a company logo appears in the header. Images can be specified in the CSS or in the XHTML. The CMS and PMS should do the correct mapping of user to function, regardless of how the function corresponds to XHTML or CSS files.

That’s it! If you design a PMS, please post screenshots and link to them from the comments section of this article so we can all learn from each other.

Got something to say?

Share your comments  with other professionals (24 comments)

Related Topics: Content Management Systems (CMS), CSS

Victor Lombardi is a design consultant living in New York City. His personal website is Noise Between Stations.

Media Temple

via Ad Packs