Documentation

CSS Style and Media Query Generator

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

Click New Rule under inline CSS or Add in the Style Rules dialog.

Copy a style rule

In the Style Rules dialog, either click the edit rule button next to a style (it will turn red), or, click its CSS button and then click the code box. Then click ADD.

Create a 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: most CSS selectors are allowed including: pseudo classes, tag names, combined classes, nested classes, ids and so on. See CSS selectors .

Click Add Style.

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. 

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.

Delete a CSS Style Rule

Click the cross next to it.

Clear Classes on an Element

Click CLEAR in the Style Rules dialog.

Importing CSS Style Rules

Open the Styles Rules dialog at the left of the screen. Click IMPORT at the top. Paste in style rules or type them in. Then click Import (in the box). 

Importing Media Queries

You can import media queries, but when you edit them, the conditional part of the media query will be shown as a string rather than as separate boxes. To edit it, type values into the boxes, rather than by editing the string (see above).

Exporting CSS Style Rules

Open the Styles Rules dialog at the left of the screen. Click SHOW at the top. You can then copy and paste the styles into your own .css document.

Importing HTML and Markdown

You can also import HTML and Markdown with the CSS Generator. 

Exporting HTML Fragments

If you only want to export HTML fragments or parts of pages, click on an element that you would like to export, and then click Edit HTML at the top of the screen. Select the content of the box and copy it.

Exporting Markdown

Select an Element. Click Markdown (in the Block Format dialog) and copy the content of the box to the clipboard.