Introduction

cssBuilder makes it possible to create and edit Cascading Style Sheets with real-time preview.
Design your webpage styles in a few minutes with the easy to use and mostly self-explaining functionality of cssBuilder.

Features

Simple style management in the hierarchical style table.
Loading HTML files for real-time preview.
Loading elements and import styles from the preview window.
Previewing the current css file.

Installation

cssBuilder requires a Windows operating system with Internet Explorer 6.0 or above.

Setup is performed automatically by the installation file.

The installation includes the Common Dialog Control OCX.

Beta Remarks

cssBuilder is a pure DHTML application.
As the program is still in beta stadium it is very likely to experience runtime errors. Even if script errors occur, you generally will still be able to save changes to the currently opened css file.

If you experience problems while using cssBuilder, please contact the VBX support.

Description of the main window

File menu commands

	Create a new css file
	Open an existing css file
	Save the css file
	Save the css file as
	Preview the css file in the preview frame or in an user defined editor
	Add an existing HTML file in the preview frame
	Open the settings window
	Show help

Elements list

Click an element to load its properties.
When you load a html file in the preview window, all its elements are added to this list.

Element commands

	Copy the styles from an element into another
	Load styles for the currently selected element from the preview html file. Only styles defined in stylesheets are imported.
	Load styles from the preview frame on element click. If you want to cancel the select mode then click the button again. Styles from stylesheets and element are loaded.
	Add an element to the list. Class elements always begin with a '.'. e.g. '.myClass'
	Delete the currently selected element

Properties frame

Here you can set the styles of the selected element. If elements of that type exist in the preview frame, they will be updated when properties are changed.
By default all styles are shown. Unsupported styles are hidden for known elements (tags).
When you hover on the properties input a short description of the style is shown in the status bar.

HTML document selector

Each opened html file is added to the document selector. Click on a file button to refresh/reload the file.
The tool tip shows the complete file path.

Preview frame

Click an element in the preview frame to select it. The tag or class of the currently hovered element is shown in the status bar.
You can also drag a file from Windows-Explorer into the preview frame to load it.

Sample text

The styles of the currently selected element are also applied to this sample text. As the text is not part of the preview HTML file, only set styles are conclusive, meaning that the appearance may differ from the actually result.

Program Settings

Use the tool tips for settings description.

History

0.7.2
- fix: IE7 compatibility issue. Failed to get working directory.

0.7.1 beta
- fix: css lines containing comments with a slash (/) caused serious memory leaks in IE.
- fix: properties table was not correctly rendered if contents exceeded the default size.
- readded sample file
- added shell context menu entry "Edit with cssBuilder" for css files and command line support

0.7 beta
- improved UI, list sorting, performance
- improved: colored select button for color styles
- added sample element which recieves the styles of the currently edited element
- [+] button in styles list is colored if sub-styles are set
- changed: tag name of elements is added to the css element: TagName.ClassName
- changed: importing styles by clicking a preview element: the styles are imported for the currently selected element
- lots of other fixes and improvements