CSS Style Rule Generator
Editing a Style Rule
Either click the edit button (it will turn red), or, click the CSS button and then click the code box to activate the CSS for editing.
Visual Editing or Code Editing
You can either change the style rule manually by editing the CSS code or change it visually by using the block formatting tools (Block Format dialog) and text formatting tools (in the Text dialog).
To update the style, click either the CSS button or the edit button again. (Make sure that the code box is highlighted (red border) when you do so.
Delete a CSS Style Rule
Click the cross next to it.
Add a New Style Rule
You can either create a new CSS style rule from scratch, copy an existing one or generate a class from a formatted element.
New style from Scratch
While no elements or styles are selected, click New Rule under inline CSS or Add in the Style Rules dialog.
Copy a style rule
While a style is activated for editing (see above), click New Rule under Inline CSS or Add in the Styles Rules dialog.
Create Class from an Element
While one element but no styles are selected, click New Rule under inline CSS or Add in the Style Rules dialog.
In the Add Class dialog fill In the form with a selector.
Note: all CSS selectors are allowed including: pseudo classes, tag names, combined classes, nested classes, ids and so on. See
Click Add Style.
Edit the Style Rule
To see the media queries for a style rule, click the arrow to the left of the style selector.
Add a New Media Query
Fill in the form in the Media Query dialog and click Create Query.
To edit the contents of the media query, such as the break points, click the Q button.
Clear Classes on an Element