Successful CSS template skins   

The CSS mantra is the separation of content and style. The content should be in the HTML and the CSS should take care of how the HTML is displayed on the page. However, most web-designs don't properly separate content and style. The HTML and CSS are there separately, but if you changed the HTML, the styling would fall apart because the CSS relies on elements in the HTML to do it's job properly.

Now this will not matter to anyone putting together a few fixed pages of content which are not going to change appreciably who will benefit from using the CSS for simple tweaks and to ensure accessibility criteria are met.

But if with a site that is properly managed and regularly refreshed and with a lot of dynamic content then it is important that it can be reskinned and adjusted without having to edit the HTML in every page, and without throwing out all the content so far accumulated. CSS is the answer, but only if the content is fully separated from style.

To have sites which have fully switchable CSS skins it is necessary to recognise that in any HTML there are actually two separate elements. There is the content: the text and images that people will read; and the page structure - that is the DIVs (or table) that defines the different elements on the page.

To be successful with CSS skins, the structural elements of the HTML page need to be planned and implemented so as to allow the CSS to make changes to the page regardless of the content.

To take an example, most pages will have a Header, a Left Column, a Main Area, a Right Column and a Footer. These are structural elements of the page. Into each of these structural elements you will place content - for example the company logo into the header, a menu into the left column, the main text into the main area and so on.

With the page considered in this structured way then the CSS can then target specific blocks or areas on the page, without worrying about the content. If the left column text is at 10px and the main area at 12px, you can target these in the CSS with things like .left p { font-size:10px } .main p { font-size:12px }

This means that so long as the pages have the same basic structural elements they can be radically switched around purely with CSS - for example make the left column float left, add background images to the header or main area and so on.

But recognising that HTML contains both structure and content is stage one. To generalise further needs a page structure that is almost flexible enough so that the CSS can produce almost any effect necessary, again without worrying about the content held in each area.

To do this, the basic structures need to be sub-divided one stage further. Within the header DIV for instance splitting out three internal DIVs - left, main, right, will cover almost all the possible combinations you will need to get the CSS to display in any style you want. You just need to place the content in the relevant area.

<DIV class='header'> <DIV class='headerleft'></DIV> <DIV class='headermain'></DIV> <DIV class='headeright'></DIV> </DIV>

The benefit of this three part split is that all the standard fancy header tricks such as fade backgrounds to solid color, background images to add rounded corners, gradients in and out of images can now be accomplished just with CSS (use background: URL(); width: to accomplish anything you want). The inner DIVs can also be floated to place one image on top of another.

If this approach is applied to the other structural areas in the HTML, then you have a page where the layout is fully defined by the CSS and completely independent of the actual page content. www.notanant.com is an example of this working in practice.