For different types of frames you can define different Styles with plenty of properties.
Here is the comprehensive cheat sheet of all the stylable properties of frames!
There are two different views available for Styles. By default the Style is shown with the UI at the Styles Tab.
But if you click on the brackets icon 
on the right top it will change to the Code Editor View.
The Style Code Editor helps you to edit styles as code with syntax highlighting, auto-completion, and error messages.
While typing, auto-completion will start to automatically display and filter options from items contained inside of your current code.
To select an item from the list simply click on it or move up and down through the list with Cursor Up or Cursor Down and Return for inserting.
If an error is detected, an error message will appear at the bottom of the Editor tab.
For convenience, any colors used in a Style will create a small color patch to the left of the line where the color is mentioned.
If you are using the Code Editor to define Styles there is a certain CSS-like syntax you have to comply with. A Style is a collection of different properties and has a clear syntax:
.stylename {
propertyName:value;
secondProperty:value;
}
Note that a Style always starts with a . directly followed by the name of the Style. Then comes the Style’s properties which are enclosed in two curly brackets {}. The properties are used to control nearly every aspect of a frame or its content (e.g., fillColor, textColor, strokeWidth, etc.).
Each property is set with its respective propertyName followed by a :. Then you input a value, followed by a semicolon ;.
If you click on the icon 
on the right top it will change to the UI View again.
Using the 
sign on the bottom of a Style adds a new property to the Style.
This opens the property selector which allows you to add all available Style properties sorted by frame type. Note that the text properties for a Multi Line text frame are located under Paragraph- and Character-Style.
To delete a property in a Style or switch it to be directly controlled by a Form Field, simply select the property and open the drop-down with the triangle to the left:
You can assign a Style to a frame directly from the Style tab by selecting the target frame, then clicking the gear icon 
and selecting Assign to Frame. You can also remove all Styles assigned to a frame with Remove from Frame. Note that assigning a new Style to a frame will remove any previously assigned Styles.
In rare cases you may wish to assign multiple Styles to a frame. To do this you need to use the Style Selector in the Position 
tab to choose and add whatever Styles you want applied to the frame.
x Will remove a selected style.
Tip: Conflicting Styles Behavior
If you select multiple Styles containing the same properties (e.g., color) - the Style which appears last in the Style tab will determine the property independent from the order in which the styles are mentioned in the frame’s Style Selector.
Notice: Document Styles will take precedence over Template Styles.
Styles can be made conditional. Read more about conditional styles here!
If a series of Styles are using the same Form Field to activate it, the Printess Editor automatically recognizes this and displays a little button on the top to set the Form Field value so that the selected conditional Style is active.
This allows you to work faster as you don’t need to switch between the Form Field and Style tabs all the time while testing and adjusting. Check out our Avatar T-shirt example to see a bunch of conditional Styles in action.
Special kinds of Styles are the character, paragraph, and base Styles of a frame. Paragraph Styles may contain all paragraph properties (e.g., indents, alignments, and paragraph distances) plus all character properties like font size, font color, etc. Character Styles can only use character properties such as font size and tracking.
Both Styles can either be applied to the frame (by using the Style selector from above) or selected within the Multi Line Text Editor in the Text tab. Styles can also be comfortably created within the Multi Line Text Editor.
Learn more about Multi Line text frame features here!
Both usages have different outcomes. If you apply a Style within the Multi Line Text Editor (paragraph or character Style Selector), the properties which are set in the Style tab will disable the respective UI elements and you cannot overwrite the properties.
If you set the Style for the complete frame, it will form the new base style of the text (resetting all styles will also revert to this style). Properties can be overwritten in Designer & Buyer Side UI.
This can be achieved by selecting the base Style in the Text tab while not being in the Editor:
Another convenient option if no Style has been created is to format the text as you want the base Style of the frame to be (for a minimum of one paragraph) and while the I-beam pointer is in the paragraph press the Add Paragraph Style button:
A popup will appear asking for the name of the Style, which you must enter and select Set as base style for selected frame. This will create a new Style and assign it to the current Multi Line Text Frame as its base Style.
A special paragraph Style that cannot be addressed via the UI elsewhere are the tabulator settings.
Start by creating a new paragraph Style with tabulator settings included:
This will create a Style where all tabulator-related properties are included. Alternatively, you can add them manually to a Style by adding from the paragraph Style properties.
fontSize - this controls the standard font size of the paragraph Style.
fontColor - controls the color of the paragraph text.
tabSize - this controls the standard tab size when no specific tab is defined. Values can be either % of the character height or absolute values (e.g., pt, px).
tabs - here you can define specific tab steps and types. The first parameter is the position of the tab followed by its type. Tabs can either left-, right-, or center-align a word. They can also align to a certain character in the word - a so-called decimal tab - here the choice is between , or . or -. Additionally, you can enable a line between the last position before the tab and the tab position.
The 
removes a tab position and the adds another position.
tabLineColor - controls the color of an activated tab line.
tabLineType - controls the type of the line where you have the choice between solid, dotted, and several dashed line types.
tabLineHeight - controls the height of the line. Can be expressed in absolute values (pt, px, etc.) or as % of the character height.
Here is the same Style expressed in code:
.Tabulator {
fontSize: 24pt;
fontColor: [Black];
tabSize: 150%;
tabs: L1cm C_3cm R5cm .7cm;
tabLineColor: [Black];
tabLineType: dotted;
tabLineHeight: 1pt;
}
Another special paragraph Style that cannot be addressed via the UI are the ruleAbove and ruleBelow Styles. Either use Add rules above and below in the Create New Paragraph Style dialog or manually add the following properties to a style from the paragraph Styles properties.
ruleAbovexxx properties control a line above the paragraph and ruleBelowxxx properties control the line below a paragraph.
ruleBelowWidth, ruleAboveWidth - can be set to frame which will create a line in the width of the frame, or text which will create a line the width of the text.
ruleBelowColor, ruleAboveColor - defines the color of the line.
ruleBelowOffset, ruleAboveOffset - defines the offset of the line to the baseline of the text. Positive offsets will move the below line downwards and the above line upwards.
ruleBelowHeight, ruleAboveHeight - defines the thickness of the line.
ruleBelowLineType, ruleAboveLineType - this property sets the line type. By default, it is solid which will show a solid line. dotted will create a line from dots, dashed1 - dashed6 will create a dashed line with different distances between the segments.
The above Style will create the following output when it is assigned to the first paragraph.
Here is the same Style expressed in code:
.headlineWithRuleBelow {
font:Noto Sans;
fontSize: 24pt;
fontColor: [Black];
spaceAfterParagraph:15pt;
ruleBelowWidth: frame;
ruleBelowColor: Pink;
ruleBelowOffset: 2pt;
ruleBelowHeight:2pt;
ruleBelowLineType:solid;
}
The Condition Editor is a great way to build conditional Styles.
Please also read about conditional Styles here.
To add a condition to a Style press the icon at the bottom of the style and select Add Condition.
Once added it will have the start editor icon: 
beside the condition in a Style.
With the Condition Editor you can easily combine AND and OR conditions for all the tests you do.
An AND condition means two tests must be true to let the whole condition be true.
An OR condition means one of the tests must be true to let the whole condition be true.
Here is an example of a conditional Style which exchanges an image only when the Form Field ‘hairstyle’ is set to ponytail AND the Form Field ‘glasses’ is not set to glasses OR the Form Field ‘haircolor’ is not set to Blonde.
Below is this example condition represented in the Condition Editor:
A big plus with the Condition Editor is that all defined values from a selected list are directly shown in drop-downs.
This is how the condition looks in the Code Editor:
The Condition Editor is also used for conditionally visible Form Fields.
In addition to Form Field values, you can also use the following special values to test for:
doc.name - this contains the name of the currently shown document.
doc.mode - this is ‘display’ when the document is configured or ‘production’ when the document is rendered as an output file.
doc.device - is ‘desktop’ if the current device is any desktop browser (or during production) and ‘mobile’ when a document is configured on a mobile device.