CSS Declaration Designer

CSS Declaration Designer allows you to author CSS style declarations with semantically grouped property editing controls while providing instant preview.

Editing font list

You can select a predefined list of fonts from the drop-down list.

To build you own list of fonts press the ellipsis button and use the Edit Font List dialog.

 

Editing lengths

Properties denoting length provide two fields. The left field contains the number (with or without a decimal point) and the right field contains the unit identifier.

To enter a new value, first type the number and then select the unit identifier.

To remove a value, clear the number field.

 

Picking a color

You can select a predefined HTML color from the drop-down list.

To use the web-oriented color picker press the ellipsis button. The color picker dialog allows you to choose from HTML, SVG, web-safe and system color. To define a custom color, use the system color picker by pressing the bottom-left button.

 

Keywords

Many properties have got predefined values denoted by keywords. You can choose from available keywords for particular property from the drop-down list.

To remove property value, clear field contents.

:

 

Referencing images

You can type the URI (or URL) of the image directly in the field, for example:

http://mysite/img/set.jpg
or
img/sample.gif

You can browse for an image by pressing the ellipsis button. The URI that is inserted in the field is the relative path of the image according to the path of the document being edited.