Separation of Presentation from Structure

ABSTRACT

In the next several missives, I’ll go over the “Basic Tripod” of CSS-Based Design: Separation of Presentation from Structure, Block-Level and Inline Elements and CSS Specificity. These will give us a good place to begin our exploration of using CSS in a manner that will make our sites powerful, flexible, attractive and fast as all git-go.

WHAT IS “CSS-BASED DESIGN”?

This is being touted as the “New Way,” or the “Only Way” (depending on your Kool-Aid intake) to design Web sites. In fact, it isn’t new at all. It was the way that the W3C wanted Web page design to be done when they made CSS a standard. The idea was to separate presentation from structure. You’ll hear this phrase being repeated like a mantra. I’ll explain what they mean by this besides “The W3C said it. I believe it. That settles it.”

Structure

Structure is the [X]HTML of the page. It is the various elements of the page, such as <div>, <p>, <img>, etc. Many people call these “tags.” “elements” is the pedantic, anal-retentive and “proper” term that is used because that is an XML term. Still, many people just stick with “tag,” because it’s friendlier and easier. I’ll stick with “elements” throughout this, as I’ve developed the habit, but don’t be surprised to see a “tag” slip out here and there. In any case, the idea is that we use these elements to denote how things relate to each other on the page. This is not necessarily where things go when displayed on the page, as I’ll explain later.

In the examples I give here, you will be able to copy the examples and paste them into your own HTML or CSS files, and test it out. I’ll provide the files separately as well.

For example, you can have some elements contained within others, like so:

Example 1:

<div><p>This is a paragraph contained within a &lt;div&gt; element.</p></div>

In the above example, the text is inside of a <p> element, which is inside of a <div> element. The proper term is that the text is the node value of the <p> element, and the <p> element is a child element of the <div> element. This terminology becomes more apparent when you start really digging into what makes a Web page a Web page (the DOM structure of a page). But that is all pretty high geek-factor stuff that we don’t need to worry about right now. It’s just a good idea to start getting in the habit of using it now.

This means that, under the current structure of HTML (and pretty much forever afterwards, as well), rules that apply to the <div> element can often be applied to its child elements as well. For example:

Example 2:

<div style="font-weight:bold">
	<p>This is a paragraph contained within a &lt;div&gt; element.</p>
	<p>This is another paragraph contained within a &lt;div&gt; element.</p>
</div>
<div>
	<p>This is a paragraph contained within a second &lt;div&gt; element.</p>
	<p>This is another paragraph contained within a second &lt;div&gt; element.</p>
</div>

In the above example, both of the <p> elements in the first <div> element will have their node values displayed as bold, while neither of the two <p> elements in the second <div> will be bold. I’ll explain the exact mechanics of that ‘style=”font-weight:bold”‘ later, but suffice it to say that it will cause text to be displayed as bold.

Now, if we don’t mess with things, the text in the second example will display like this:

[X]HTML is displayed in your browser left-to-right, top-to-bottom; in the manner in which it appears in the file, unless modified by CSS.

The reason I keep referring to XHTML/HTML as “[X]HTML” is because markup (another term for HTML) actually has two flavors: HTML, which is the “classic” version of the language, and XHTML, which is a version of HTML that has been “cleaned up” as a true XML language. There are advantages and disadvantages to using either one. I tend to use XHTML, but that’s mainly because it’s a very “uptight” version of HTML, and I like to “cross my Ts and dot my Is.” Many people prefer using HTML, as it is more flexible and forgiving. There are also some technical reasons for using one or the other that I won’t bother getting into here.

Presentation

Now, in Example 2, above, we actually “cheated.” We snuck a bit of presentation into our structure (If anyone is ancient enough to remember those silly Reese’s Peanut Butter Cup ads, this may elicit a giggle).

In the “new way” of doing things, structure is defined and implemented by markup ([X]HTML), and presentation is defined and implemented by style (CSS). I will use “markup” and “style” to refer to these from now on, as it is a bit less cumbersome and “geeky” than “[X]HTML” and “CSS.”

The idea is that you can have separate people working on each part of a Web page. The “code geeks” can work on the markup, and the designers/artists can work on the style.

In reality, the code geeks work on everything. CSS work is every bit as hard as working on any other part of the code, and I have yet to meet a designer who is willing to devote the time required to debugging CSS, when they could be making designs. However, with this structure, you can split the work up between multiple code geeks.

In its simplest definition, you can think of markup as structure, and style as presentation. There can be some intermixing, but this is quite an appropriate assumption.