Using CSS Designer

In order to use the visual CSS Designer integrated in Wappler you just need to open it by clicking Styles (1) and then select the element you'd like to style (2):

You can add new style property, edit existing style or remove a property from the selected element. Choose whether to add the style inline directly in the element.style {} rule, in an existing CSS file or choose whether to attach or create a new CSS file and set the rule there:

You can add an inline style by either using the color pickers for color/background color:

Where a nice color picker appears:

Or you can directly click in the rule and enter your property and value. Autocomplete popup appears when you start typing so you can use it to speed up your work:

You can see the changes immediately in Design View. Disable or remove rules by clicking the checkbox (1) or the remove button (2) for the selected rule:

In Wappler general settings you can setup the options for the CSS editor. You can enable the CSS autoprefixer and select the browser versions you want to support. On save the required prefixes will be added automatically. Also you can enable CSS prettify on save: