CSSEditing
I recently evaluated an Application called CSSEdit that was the only decent web authoring application I could find. Everything else pretty much sucks (including GoLive, DreamWeaver, Contribute, Mozilla, BBEdit, Word and WOBuilder but not WebObjects) Though Mozilla and BBEdit are probably the best in that list that’s not saying much. Though these are all web authoring applications they all take a different tact on what that means and on what the scope any web authoring application should encompass. For example the big guns, GoLIve1 and DreamWeaver try to do everything: site management, html authoring and styling. Mozilla’s somposer module tries to be a decent HTML editor. It does this adequately except that it throws deprecated html style elements in the users face when it shouldn’t (or it should edit a separate stylesheet if it feels these must be front and center). Word tries to be an everything but the kitchen sink word processor that can also do an excellent job of destroying your HTML code. BBEdit does a decent job of HTML (and even some CSS) authoring, except for two major problems. First it doesn’t allow users to directly manipulate rendered HTML. And second, the arrangement of it’s menu items and dialogs are bizarre. They’re filled with eliminated, deprecated or deprecating elements and attributes. They’re arranged in ways that make elements harder to find than just looking them up in a reference. For example you have to first think about whether you’re looking for a block, inline or phrase element, etc. Then these are not arranged alphabetically (or in any easily discernible logical fashion).
Then within menus these elements are arranged alphabetically. So often times elements one seldom uses are not easy to recall. For instance arranging INS and DEL (and are these block or inline) adjacent to one another would help one recall that these are for inserted and deleted text. When theire alphabetical any nemonic utility vanishes.
In contrast tot these applications CSSEdit chose a rather narrow scope. To provide an excellent CSS authoring and editing tool. Like many HTML editors, CSSEdit provides both visual editing and source code editing of files. When in source code editing mode it does an excellent job of providing quick auto-completion of property names and then when typing the delimiting colon it switches to providing auto-completionof the relevant values for the already completed property name.
The visual editing mode provides an excellent method for editing style without needing to return to the specification for reference. It doesn’t eliminate the need to understand CSS in broad terms. But it does provide someone who understands those basics of CSS will feel like an old hack when using CSS.
The key basics that CSS doesn’t help with are:
- understanding how to attach styles to your html files
- the cascade
- creating appropriate selectors
So let me just briefly discuss these basics and point readers to some very quick and easy resources to understand these more in depth.
First thing to understand is how CSS styles get applied to your html files. There are several ways to do this. I would recommend against all of them except one. The recommended way is to simply provide a stylesheet relational link within the head of your html files.
Placing the following code in the head will take care of the HTML side of things.
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"><!– for IE Windows only styling; since microsoft sucks –><!–[ifIE]><link rel=”stylesheet” href=”styleIEwin.css” type=”text/css” /><![endif]–>
Let’slook at this piece by piece. The firstline:
<link rel="stylesheet"href="style.css" type="text/css"charset="utf-8">
creates a link element, linking the current HTML (or XML) document to another file. The linked file is related (”rel” attribute) to the current file as it’s stylesheet. And the relative path to the related/linked file is specified as href=”<relative path>”. Finally, the type and charset attributes provide hints to the browser so that it doesn’t need to retrieve files it cannot handle. In other words, a browser that cannot handle css or utf-8 encoding need not retrieve this linked file. You can list any number of these links in your HTML head, even linking to conflicting stylesheets. CSS handles conflicts through it’s cascade rules which I’ll talk about more below. The remaining lines are a trick you may or may not need. Of the current browsers IE Windows has the worst CSS support. But Because IE Windows looks for these conditionals within HTML comments you can link another stylesheet that will be used only by IE Windows. This can provide a mechanism to get around it’s poor CSS support. Since IE has not seen a significant upgrade since 2001 and may not see another until 2006 or beyond this trick can allow us to at least make sure our pages are usable in IE Windows. IE Mac can also cause problems, but the latest release (5.2) for Mac OS X addresses the most pressing CSS problems. If everything works with linking to only one stylesheet that’s probably the way to go. Or you might want to use a first sheet for the overall website and add another link after that for changes specific to that web page alone. You don’t want to let the number of links get out of hand. Make sure you have a good reason for specifying another link or some procedure in place for managing the extra complexity.
The styling itself.
Stylesheets consist of a list of one or more style declarations. Each declaration has two main parts. A list of one or more comma delimited selectors and a property list. The declaration begins with the selectors followed by a curly brace and then a semi-colon delimited list of properties. The list of properties ends with the closing curly brace which can then be followed by another declaration or could simply end the file.
Basically the selectors provide a rather intricate way to select elements (including what are called pseudo elements) of your html so that you can assign style properties to that selection. So to make all paragraph elements and heading level three elements double spaced with times font you would do:
p, h3 {
line-height: 2em; font-family: Times, “Times New Roman”, sans-serif; }
The above example selects these two elements: paragraphs and headings of level three. Then it assigns the following style properties: double-spacing and the font family(ies) times, or sans-serif. This example raises two best practices typically recommended for CSS. First, since web standards are about device independence, authors seldom know the much about the state of the content when it’s consumed. One way CSS handles the challenge is through providing prioritized lists of fonts followed by a generic font family. Browsers will then start with the first font in the list, see if the font is available and continue down the list until it finds an available font. One should always end the list with one of the generic font-families (serif, sans-serif, cursive, fantasy or mono-spaced) as a guaranteed fallback font.
The other practice to try to adhere to is the specification of styles in relative measures. By specifying the line spacing as 2ems (rather than 24pt, or 24px) we make no assumptions about the font as it’s displayed on any particular device (that’s device independence). If I had specified 12pt, but that 12 pt was overridden by someone with sight difficulties specifying 24pt for double spaced may have instead made it single-spaced or space-in-a-half. For more information on measurements see: CSS lenght measures
First let me say why I do not recommend the other methods of attaching CSS to your HTML files. The least desirable method is to set style information within your HTML elements’ style attribute. Many authors find this to be an attractive way to set style information because it p, h3 { line-height:2em; font-family: times,sans-serif;
Anyway, you might want to use it for your own web design. CSSEdit isn’t too good at providing a GUI for selectors (partly because it’s rather intricate). But if you use this table for a reference combined with CSSEdit you’ll be up in running in no time.
http://www.w3.org/TR/CSS21/selector.html#q1
Basically the selectors provide a rather intricate way to select elements of your html so that you can assign properties to that selection. So there are two parts to the style: a selector and a list of properties. So to make all paragraph elements and heading level three elements double spaced with times font you would do:
p, h3 { line-height:2em; font-family: times, sans-serif; }
Names and values are separated by colons while each listed property is separated by a semi-colon. Curly brackets bracket the list (even if it’s a list of one item).Returns and other whitespace don’t matter and the semi-colon at the end of the list is optional. Multiple selectors can be separated by a comma. Anyway CSSEdit is really good at helping you set the properties. Not so good at helping you set the selector(s). Also it’s not as good as it should be for setting font-family. But that’s basically a comma separated list of fonts (when the names contain spaces they must be quoted, e.g.,”Times New Roman” ). The list should be ended with the generic font family that all browsers are supposed to understand. Those generic font families are: serif, sans-serif, cursive, fantasy (like zapf dingbats) and monospace.
The key thing is that you don’t put any style elements, style attributes or even styles into the body of the html document. That way it’s easy to completely change the presentation later.