Editing Style Sheets

Special CSS code writing features enable you to instantly create and edit cascading style sheets.

Standards compliance

WeBuilder suggests and generates code according to CSS specification. Currently supported are CSS Level 1, CSS Level 2 and some other specifications. You can select CSS specification to work with.

Creating CSS code

With WeBuilder, you can easily create and edit CSS code with little or no typing.

Working with selectors and rules

Selectors can be easily created, deleted and duplicated using CSS menu and toolbar.

Following CSS menu and toolbar commands are available for working with selectors:

• Create Selector opens New Selector dialog box which builds new selector(s) based on options you chose.
• Duplicate Selector opens New Selector dialog box which builds new selector(s) based on options you chose, using rules of current selector.
• Delete Selector deletes current selector.

Editing common properties

You can easily and quickly modify common formatting properties using CSS menu and toolbar without any typing.

Following CSS menu and toolbar commands are available for quick modification of current selector's common properties:

• Font displays Select Font dialog box and creates font-family property based on selected font(s).
• Bold adds or removes font-weight: bold.
• Italic adds or removes font-style: italic.
• Underline adds or removes text-decoration: underline.
• Left adds or removes text-align: left.
• Center adds or removes text-align: center.
• Right adds or removes text-align: right.
• Justify adds or removes text-decoration: justify.
• Set Line Height creates line-height property.
• Set Text Color displays Color Picker dialog box and creates color property based on selected color.
• Set Background Color displays Color Picker dialog box and creates background-color property based on selected color.

CSS toolbar displays Font and Font Size drop down boxes for modification of font-family and font-size properties.

Using Inspector

You can use Inspector to quickly add, remove and modify style properties and property values without editing the code directly.

Once caret is inserted inside { and } brackets, Inspector displays a list of supported properties. Code is automatically updated as you cnahge property values.

To enable Inspector, on the View menu click Inspector.

Using Auto Complete

Auto Complete allows to reduce the amount of typing, by displaying list of valid property names that can be inserted with a mouse double click or Enter key.

Auto Complete window is displayed automatically as you type the code. You can also call the Auto Complete by pressing Ctrl+Space.

Notes

• Auto Complete can be disabled via Preferences dialog window.
• Auto Complete popup delay time can be customized via Preferences dialog window.
• To close Auto Complete popup, press Esc.

Using Code Explorer

Code Explorer lists all CSS selectors in contained current document. You can navigate to a selector by clicking it. This will make it current selector.

To enable Code Explorer, on the View menu, click Code Explorer. Make sure that the CSS option is enabled at the bottom of the Code Explorer pane.

Code Explorer refreshes automatically as code is edited, but you can also refresh it manually at any time by clicking Refresh button.

Note

• You can right-click Code Explorer to open a popup menu with commands for working with selectors.

Previewing style sheets

You can preview Style Sheets directly in WeBuilder or automatically open them in specified Web browser.

Preview without leaving WeBuilder

To quickly preview CSS document without leaving editing environment, click Preview tab at the bottom of document window.

You can also use one of the Split Screen tabs at the bottom of document window, to switch to horizontal or vertical split screen preview mode which allows you to edit code and preview results instantly.

Style sheets can be previewed in two ways

• Based on automatically generated web page which generates content for each selector
• Based on any HTML document of your choice

Style sheet preview mode can be selected using Preview toolbar.

To preview CSS document in a Web browser

• On the Tools menu, point to Preview In.
• On the Preview In submenu, click the Web browser you wish to use.

Validate CSS code

You can check/validate your CSS file using the CSS Check feature.

To validate a CSS file

• On the CSS menu, click CSS Check.