Looking at the marked-up sample page from the last step, there are several things going on. The table breaks the page into four main parts: a header, a sidebar, a body, and (outside the table) a footer. Inside of those sections, we know by the structure of the Tinderbox file that we have several 'sidebar' notes (About this site and blogroll) and several 'body' notes (Each note is timestamped and Design by Derek Powazek) and several 'footer' notes (Navigation, Copyright).

An export template turns a Tinderbox note into a chunk of HTML, so to produce that page we'll need templates that produce the HTML for the sections of the page that come from notes. We'll need

• a template that produces the page (bwPageTemplate.html)
• a template for the body notes (i.e. the blog entries, item.html, which we'll make "post.html")
• a template that produces the stuff in the sidebar (sidebar.html)
• and a template that produces the footer.

We don't need any other templates yet because the other stuff --title, 'made with tinderbox' logo, dividing lines on the page-- don't correspond to Tinderbox notes. They're just HTML.

Here's a quick picture made in the Map View out of adornments which shows the structure of the page and its html templates. I'm not sure why the names are of different brightnesses.

And, in fact, we have those templates. We just need to adapt them to use CSS.

A quick note before moving on to styles: We're fine right now if we want to create a site just like Simplicity. It has pages with a bunch of entries on them, and the entries are one TB note each. That's all. If you want to do more, your templates get more sophisticated accordingly:

If you want your entries to have child notes, you'll need a template to make them appear on the pages.

If you want your entries to be pages unto themselves so that you can do "crazy things" like link between them (I've heard the term "Fagerjordian" applied for Anders Fagerjord's Surftrail) then you'll need a template that is ready to put a post on a page rather than a bunch of posts.

If you want to combine these ...say, *blush* have entries appear one way on the front page of the site and a different way on their own unique post-pages, plus have child notes in both cases... well, I'll get to that. Someday.

CSS is very flexible. Styles can be any combination of attributes you might change about text. Styles can "cascade", meaning that if you tell a paragraph to be green, and then have a style that's bold but doesn't have a color applied, the 'green' cascades down into the bold section so that it's green and bold. When you take a bunch of styles and group them to apply to text, that's a class, a class of text. So we need to figure out what classes we need in our stylesheet.

We need classes(s) for all the situations where we want to affect the appearance of the text. If we want the ability to have our posts outlined or in a color or spaced a certain way, then we'll need a style for them. If we want the sidebar to appear in a certain place on the page (or have the flexibility to appear on the left or the right without changing our HTML templates) then we'll need a class for the sidebar. If titles are bold, we'll need a class for them. If links are colored and get an underline when you put the mouse over them, as is the case in Simplicity, then we'll need a class for links.

So, brainstorming, we might want styles for:

• the header section (to position it)
• the title of the blog
• the tagline of the blog
• the sidebar (to position it)
• the individual notes in the sidebar
• the title of a sidebar note
• the body of a sidebar note
• the body (to position where the blog entries appear)
• the title of a post
• the body of a post
• the footer (to position where the footer goes)
• the text of a footer note

In the case of Simplicity, we've got a few exceptions to the style of the sections:

• links
• dates of posts
• list items that appear in the sidebar

Note that I'm being (overly?) thorough with that list. The original Simplicity gets away with styles for just: text, heading, tagline, date, sidebar-head, sidebar-list, link.

To replace the tables in Simplicity, we'll want two different kinds of classes: classes which determine the appearance of text wherever it is on the page, and classes which determine where on the page the sections are (basically, which replace the table cells). We can't conflate the two because then we'd have all of our ... oh, blog entry titles appearing in the same place on the page, or we'd have our sidebars all over the place (but pretty!).

The final html page will have style classes applied in this structure, then:

Notice how this mirrors the structure of the html export templates on the page. This means that the html export templates are going to be pretty simple (in the next CSSimplicity post).

In CSS, if you want a class to apply to only one <div> then it gets an ID Selector, and appears in your stylesheet like so:

1. classname{stuff}

So all those styles which place things on the page are going to go in our stylesheet as IDs.

1. headerFrame{ /* the frame around the entire header */ }
2. sidebarFrame{ /* puts the sidebar in place */ }
3. bodyFrame{ /* the frame around the whole body, probably for positioning */ }
4. footerFrame{ /* puts the footer in place */ }

Then we can put in the classes that will get applied one to each note. There will be many of these, so they're a regular class. On the other hand, we supposedly don't know what sort of html thing these might be applied to, so we'll include them as classes independent of the html element. It's almost always going to be a <div>, but we need to be open-minded so we'll leave out the selector.

.blogtitle{ }

.blogtagline{ }

.sidebar{ /* an individual sidebar */ }

.sidebarHead{ /* the head of a sidebar piece */ }

.sidebarBody{ /* the body... */ }

.postHead{ /* the headings or titles of the blog entries */ }

.postBody{ /* the text of the blog entries */ }

.footer( /* in case we want to surround multiple footers like sidebars */ )

.footerBody{ /* the text of the footer */ }

We can't forget the basic HTML selectors, which we can bring right over from the old Simplicity stylesheet. These should appear at the top of the stylesheet, but we'll get to that:

a:link { /* each of these from before */ }

a:visited { }

a:visited { }

a:visited { }

p { /* all paragraphs will get this unless the others override it */ }

body { /* will define the way the body appears, unless overridden by bodyframe */

Now that we know what the styles should be, we can plug in the old styles. Add some comment headings for readability and we have a stylesheet framework.

Next up: Ridiculously simple template making.

I realized that the diagrams I've made of the html page re: exports and re: classes might help, so I've added them and moved the text around a bit.