6 - Authoring Style and CSS

6.1 - The Local Approach

Most people knowledgeable about HTML and CSS suggest (strongly) that these two components be kept separate; ideally, CSS in a file somewhere else, and HTML in the web document; secondly, CSS in the page header, and HTML in the document body; third and least desirable, CSS in the style tags of HTML elements.

These are very sane and reasonable suggestions, as they abstract the styles away from the HTML. Such an abstraction is invaluable in keeping the content you are writing (in HTML) easy to read, and further, in allowing that content to take advantage of the CSS without having to re-write the CSS it every time. This is all true when you're writing HTML and CSS natively.

In the wtfm environment, however, the primary mechanism for abstraction is the use of styles. When you put CSS in the styles, you abstract it away from the content in a much more powerful and clean way than just putting the CSS away in some other file.

That's not to say that you can't, or shouldn't, put your CSS in the page header or in an external style file. You can, and if you're only comfortable doing those things, perhaps you should. But the opportunity is here to make CSS much more approachable and local to what your intent is; I hope you'll take advantage of that. In that spirit, I've concentrated on that approach, so you become aware of the benefits.

Here's an example that I'm using in this manual. It's a basic paragraph style. I've defined it this way:

 [gstyle p <p style="margin-left: 0">[b]</p>[lf]] 

So, to write a paragraph, I use this form:

 {p This is a paragraph.} 

As you can plainly see, the CSS is abstracted from the content, just as one would like. So the benefits of abstraction are entirely in play. In addition, the CSS is directly associated with the form I want to use. For instance, let's say I want to write some paragraphs that have an indent. I can add this global style:

 [gstyle pi <p style="margin-left: 2em">[b]</p>[lf]] 

...and then write this...

 {pi This is a paragraph.} 

...to get this:

This is a paragraph.

6.1.1 - The CSS File Approach

To create an external CSS file, you'll want to set  [local ds_rawmode 1]  in the Page Locals section of the page form so the Page Content will not be subject to any processing; you'll probably also set the Non-Default Extension to a single dash (-), which suppresses adding an extension to the file name; and and the Non-Default Location such that the CSS file ends up where you want it to.

Having done the foregoing, the CSS file will be generated exactly where you want it, exactly as you write it.

When generating in raw mode, the local variables nextpage and prevpage are still set, so in order to move the raw file out of the next/previous page processing order, put them at the end and use a local statement on the page prior to them to ensure that the sequence does not link into the CSS file.

Keyboard Navigation
, Previous Page . Next Page t TOC i Index

Valid HTML 4.01 Loose
 

This manual was generated with wtfm