HowTo discover CSS Class Names in Forms

Business Studio Model-Driven Forms can be styled like any other Webpage, too. CSS Styling is an easy task, but could consume a lot of time if you have very specific requierments. 

Any Style change should be tested in your target Browser Application, first in Preview mode & and as a second Step in your target Application.
Remember: there is only one CSS Definition per Browser DOM, it is created out of all CSS Files loaded. So there could be Side-Effects.

To be able to Test Styles in you target Browser, just copy the Preview URL from the "GWT Preview" (right click, context menu "Properties")

And than copy the URL by selecting the string, press CTRL+a (select all), CTRL+c (copy selection)

Now the URL can be opened in a 'real' Browser like Chrome or Firefox, and you can press F12 to find the right CSS class paths and names. 

Hints on CSS Styling

• Start with Main Form Root Class Name, e.g. "niceForm" for your custom Styling
• make use custom CSS definitions on specific needs. (e.g. a red Field)
• make any CSS Definition Path as specific as you can. (with longer Path defintions you can overwrite unwanted defintions)
• always try to find reuseable CSS path, e.g. component, control, ... instead of pane4
• use "!important" only if nothing else is working. (this is the last choise)