Create CSS Code

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

The following topics provide more information:

1. Working with selectors and rules
2. Editing common properties
3. Using Inspector
4. Using Auto Complete

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:

1. Create Selector opens New Selector dialog box which builds new selector(s) based on options you chose.
2. Duplicate Selector opens New Selector dialog box which builds new selector(s) based on options you chose, using rules of current selector.
3. 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:

1. Font displays Select Font dialog box and creates font-family property based on selected font(s).
2. Bold adds or removes font-weight: bold.
3. Italic adds or removes font-style: italic.
4. Underline adds or removes text-decoration: underline.
5. Left adds or removes text-align: left.
6. Center adds or removes text-align: center.
7. Right adds or removes text-align: right.
8. Justify adds or removes text-decoration: justify.
9. Set Line Height creates line-height prop erty.
10. Set Text Color displays Color Picker dialog box and creates color property based on selected color.
11. 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.