Create Variations by using the StyleSheet

About this page

This page explains how to create Variations using the StyleSheet.

Edit the StyleSheet

Selecting the StyleSheet-tab at the bottom left of the Kaizen Platform UI editor will expand the StyleSheet for editing.

Working order of the StyleSheet

This StyleSheet will be loaded after the StyleSheet of the Experiment page.
To override that StyleSheet, the recommended method is using a description of a higher level than the current description. Or to use the !important-command to override all other descriptions.

This is the working order:

DescriptionExampleLevel Added
Universal selector * 0
Element name li 1
Pseudo-element :first-line 1
Class .class 10
Pseudo-class :hover, [href] 10
ID #id 100

Source: Calculating a selector’s specificity

If for example this is the existing description:

.container { width: 950px }

describing it in the StyleSheet in this order and width will override that description

body .container { width: 850px }

By adding the body-element, the second description moves up 1 level from the first description.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.