12.1. Quickly customizing the style of selected element

12.1. Quickly customizing the style of selected element
	12. The "Customize CSS Stylesheet" dialog box

The "Add Style for Selected Element" button lets the user quickly customize the screen style of the element being implicitly or explicitly selected. Clicking this button displays a style editor, which may be used to quickly and easily specify one or more CSS style properties.

Clicking OK adds a new CSS rule at the end of the text area of the "Customize CSS Stylesheet" dialog box. The body of the rule comprises the properties specified using the style editor, while the selector of the rule is simply the name of selected element. However when selected element is an XHTML element having a class attribute, this selector is element_name.first_class_name. In practice, this means that you may have to modify by hand this automatically determined selector in order to make it more specific.

Figure 9.13. An easy to use style editor

No prior knowledge of CSS is required to use the Styles tab of this style editor: simply check the checkbox corresponding to the style (e.g. "Text color") you want to add, then possibly adjust the style using the button, combobox or numeric field found next to the checkbox.

In the case of the above figure, selected XHTML span (having a "tag" class attribute) element is given a dark gray text color, a fixed-width bold font and a slightly smaller text size.

Clicking the "CSS Source" tab lets the user hand edit the CSS properties specified using the Styles tab. The figure below shows you the CSS properties corresponding to the dark gray text color, fixed-width bold font and slightly smaller text size chosen using the Styles tab depicted in the above figure.

Figure 9.14. The "CSS Source" tab of the style editor

When the "CSS Source" tab is selected, its content is used as is (of course after a successful syntax check) to specify the screen style of selected element. This allows typing CSS properties not supported by the Styles tab, for example, text-indent, margin or even display.

The style editor is easy to use however, in some cases, you'll have to workaround some of the limitations of XMLmind XML Editor in terms of CSS support in XMLmind XML Editor - Support of Cascading Style Sheets (W3C CSS). Examples:

You may have to check "Border width" in addition to "Borders" in order to successfully add a border around an element.
The box decoration properties (borders, space around content, etc) are not supported for inline elements. The background color is the only property supported for such elements. A workaround consists in typing "display: inline-block;" in the "CSS Source" tab.


12. The "Customize CSS Stylesheet" dialog box		13. The "Customize Document Conversion Stylesheets" dialog box