A Style Class is a group of Style settings that are saved together. Style Classes can be applied to multiple components to provide consistency in design. A Style Class enables you to define style elements in one place, and then quickly apply that style to different components. Style Classes are stored in the Styles folder in the Project Browser.
Within the Styles folder, Style Classes can be placed into folders in order to keep them organized. In the following example, we created separate folders for banner styles and logo styles in the Designer. As projects grow and increase in complexity, use folders to more easily manage your Style Classes.

This feature was changed in Ignition version 8.1.22:
The prefix
ia_
is reserved for the base, predefined styling that is built into Perspective, and should not be used when naming user-created Style Classes. Using the
ia_
prefix for user-created Style Classes may result in unintended behavior.
Creating a Style Class
In this example we'll create a 35 point Italic font, and center the text.
To create a Style Class, right-click on the Styles folder and select New Style.
Enter a name for the new Style Class. Style Class names must be unique to the project. You will see a green check icon if the name you enter is acceptable. In this example we'll name ours "Header".

Click Create Style Class.
On the Edit Style screen, use the style editor to define the style. In this case we'll configure values for the following properties under Text:
Size: 35pt
Italic: enabled
Text align: center

Click OK to save the Style Class.
Once a Style Class has been created, it can then be applied to a component. In the component's Style property, there will be a classes property with a dropdown list of all available Style Classes that can be applied to the component.

Enabling the Advanced Stylesheet
This feature was changed in Ignition version 8.1.22:
Users with extensive background working with CSS are now able to fine tune styling by modifying the Advanced Stylesheet resource. The stylesheet is an advanced feature and is not placed by default. To enable the Advanced Stylesheet, right-click on the
Styles folder and select
Enable Advanced Stylesheet.

The stylesheet.css resource will now be available under Styles. The stylesheet allows users to insert CSS as in any normal CSS file. Note the editor does not support auto-complete CSS syntax.
Common examples of how this resource can be used include overriding or extending Perspective Style Classes or CSS classes used within a component's structure. CSS classes are not exposed in a component's Property Editor, where as Style Classes are exposed. Perspective uses the prefix .psc-
for Style Classes before they are injected onto the page, so if you are trying to target a Style Class, you’ll need to add this prefix to the name of your style declaration. Then add the Style Class name (without the prefix) to your Property Editor style field. Use the prefix .ia to edit CSS classes as shown. No further steps are required to activate edits to CSS classes.

The rules defined in this resource are inserted into the Perspective project between the Theme files of the Gateway and the Named Styles of the project. This means the resource is scoped to a project, unlike Theming files being Gateway-scoped.
To disable this advanced feature, follow the Delete a Style Class process below.