Add CSS rules

To customize the Answer style, perform the following actions:

1. While adding or editing the Answer, enter a CSS class name in the CSS Rules field, for example, myAnswerClass.
2. Save the Answer.
3. In the Code Editor, add a <style></style> section.
4. Inside the style section, write your CSS code for this class. For example, .myAnswerClass {color:red;}.

To set a correct Sub-Answer behavior and style, perform the following actions:

1. While adding or editing the Sub-Answer, enter a CSS class name in the CSS Rules field together with expand:on(Parent_Answer_Option_Value). If the Parent_Answer_Option_Value is selected in the Main (Parent) Answer, this Sub-Answer will be shown. Otherwise, the Sub-Answer is not displayed, for example, mySubAnswerClass expand:on(1).
2. Complete steps 2-4 from the previous procedure.

The Sub Answer inherits all styles from its Main (Parent) Answer by default.

Without the expand:on(Parent_Answer_Option_Value) in CSS Rules, the Sub-Answer is always displayed and is handled like an ordinary Answer.

Main Answer (Option 2 is selected) with custom styling

Main Answer (Option 1 is selected) and Sub Answer with custom styling

<style>
    .myAnswerClass {
        color: red;
    }
    .myAnswerClass .answerInput {
        color: black;
    }
    .myAnswerClass .na-check {
        outline: 2px solid green;
    }
    .myAnswerClass .instructions {
        color: blue;
    }
    .mySubAnswerClass
    {
        outline: 2px dashed violet;
    }
</style>