Interaction®
- free web application server for Mac

Visualizing the Interaction CSS Editor

This location contains annotated screen shots for the Interaction Cascading Style Sheets Editor. The editor is a comprehensive dialog that allows a webmaster to use the full power of the CSS specification to control presentation style.

The left table in the CSS editor is a list of "selectors", typically identifiers for HTML tags. For each selector, the editor allows configuration of all the about 50 "properties" defined in the CSS specification. The Interaction CSS Editor provides a sample display of the current style settings for an element in the upper right corner of the dialog. The properties are organized into seven groups (see below). The example above shows the Text Properties: Word Spacing, Letter Spacing, Vertical Align, Text Transform, Text Align, Text Indent, and Line Height.

The property group is selected using the pop-up menu for groups found on the top of the dialog:

Interaction put a checkmark for each property group that is configured so that it is easy to identify where changes has been made. The properties for each selector in a style sheet are organized into seven groups: Font, Color/Background, Text, Box Margin, Box Padding, Border and Classification:

Font

Font properties includes font family, style, variant, weight, and size.

Color/Background

Describes the foreground and background color of an element.

Text

Properties related to the text of an element, included spacing, alignment and indent.

Box Margin

Set the size, circumference and position of boxes that represent elements.

Box Padding

Set the size, circumference and position of boxes that represent elements.

Border

Set the size, circumference and position of boxes that represent elements.

Classification

Classify elements into categories.

On-line ballon-help is available for all properties and property groups:

Some of the properties has fairly complex value schemes. Many properties can have a relative value, a percentage value, an absolute value, or be one of a set of options. The Interaction CSS editor doesn't ignore these variations in the name of simplicity, but does instead provide the full range of options in a manageable way.

To make it easier for authors to enter property values, specialized dialogs for each property embodies the rules for which values can be used for the property. For example, colors are set in color palettes instead of requiring the entering of cryptic codes, and many properties can be assigned a value in multiple ways included as a length value based on various units:

When used with a Mac web server, Interaction will automatically assign the style sheet to every HTML page it serves. Thus the webmaster can configure the style in the editor and leave to Interaction to take care of the rest. The Interaction CSS editor can also save the style sheet to file for use on other servers.