An increasing number of web developers are turning towards the combination of an off-the-shelf PHP CMS, integrated with MySQL databasing and a mixture of HTML and CSS describing the content. It is natural that with this level of sophistication, newcomers to the world of publishing systems like WordPress, and templated (or themed) systems like MySpace might feel out of their depth.

However, with this ground-up description of how content management systems work, the reader will begin to be able to understand the documentation surrounding them, and be able to create their own, personalized, pieces of the Internet. Some HTML programming and an understanding of both PHP and CSS will be required, but we will give the reader as much as we can along the way.

HTML, CSS, Templates

The relationship between HTML and CSS is a simple one. HTML provides a device and platform-independent way for a publisher to describe how the document should look. The platform, or browser, decides how it should interpret that layout.

This works up to a point. That point was reached when the vast majority of publishers decided that they wanted to have more control over how the document should be rendered. Style Sheets (CSS) were the answer – they were designed to allow the publisher to indicate the layout, font, color, padding, margins, borders and so on that they preferred for their document.

The overriding advantage of this approach is that if a given publisher wants to change the appearance of the document, they need only change the style sheet. If there are hundreds of pages based on the same style, they still only need change one document – the style sheet.

The HTML Document Model

An HTML document consists of:

The head – with document information
The body – the actual content
The body is then divided into sections, such as:

headings
paragraphs
links
lists

With CSS, a common additional formatting container object is the DIV. The DIV allows the publisher to set the default text and layout for a section of text, which may contain other elements inside it. These elements may also be altered by the definition of the DIV.

Using Style Modifiers

In writing a style sheet using the CSS model, we name each custom element, and provide modifiers that change various attributes of that element. We do this by indicating that a custom element is of a specific ‘class’. So, if we wanted to change the H1 tag, we could use code such as:

H1 { color: Green; }
Each time that the browser encounters an H1 tag, it will color the text green as well as apply the default behavior: making the text larger, for example. The element is of the ‘class’ H1. We can also use ‘dotted’ notation to create a new class based on an existing one:

H1.GreenHeading { color: Green; }
This makes it much more flexible, but has the downside that the publishers all need to know what classes exist and how they are used. To write the HTML for the new H1 we use:

Green Heading

The same notation can be used for all HTML elements that can be manipulated in this way.

Using Linked Style Sheets

Styles can be introduced as part of the head of a document:

This is known as applying an inline style. However, they are more commonly used as external files, with the extension .css that the browser downloads along with the HTML itself. To link to it, we use code in the head of a document:

This tells the browser what the additional file is, and where to find it.