Tips for using TopStyle Pro

TopStyle Pro is an auxiliary tool focused on CSS design. It has many functions and comes with a CSS code checking function to reduce the chance of writing errors. In particular, the detailed introduction of CSS instructions in its HELP file is very suitable for use as a reference document and for learning by people who are new to CSS. Let’s introduce the usage skills of TopStyle Pro:

Text annotation: Shift+Ctrl+M

Indent to the right: Shift+Ctrl+.

Indent to the left :Shift+Ctrl+,

Next CSS:Ctrl+]

Previous CSS:Ctrl+[

Select color:Shift+Ctrl+C

Save We will change the

that cannot be undone (Ctrl+Z) in the future~

Option location: Options--Editor--Select Enable undo after save

Automatically Replace

For example, if you type "!i" and then press a space, TopStyle will automatically replace "!i" with "!important"

Option location: Options--Editor- -Auto Replace You can also add shortcut input yourself.

Tree CSS

Sometimes you feel that there is too much CSS to browse? TopStyle provides an abbreviation that hides the CSS content and only displays the selector name. The form is very convenient.

Option location: Options--Editor--Rule Collapsing Select Enable rule collapsing

Quick verification

W3C CSS Validator in the shortcut menu and The W3C HTML Validator button is very convenient. After editing, you can know whether it has passed the verification with just one click.

Style Sweeper

The following is a grand recommendation for TopStyle’s built-in CSS organizing function: Style Sweeper. It can organize your CSS very neatly and standardizedly. A very nice feature.

Option location: Tools--Style Sweeper

Rules Rules Panel: Rule Format can set single-line and multi-line display. Combine Rules sets whether CSS with the same properties will be combined.

Selectors selector panel:Selector Case Set the case of the selector. Selector Order sets the sorting method of the selector.

Property property panel: Property Case Set the case of the property. Property Order sets the ordering of properties.

Shorthand Properties abbreviation property panel: You can choose to abbreviate the font, background, margin, and padding properties.

Others Other attribute panels: Color Format Color format: Hexadecimal, RGB, color name, etc. can be selected.