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 CSS selectors .

Click Add Style.

Edit the Style Rule.

Responsive Media Queries

To see the media queries for a style rule, click the arrow to the left of the style selector.

Add a New Media Query

Click +.

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

Click CLEAR in the Style Rules dialog.

You can also import CSS Stylesheets, and then edit them visually.