Why doesn't the Form Designer Canvas always show the treatment of the CSS?

This depends on how the CSS was written. Generally, a CSS Selector #liveForm, which limits the visibility of the styling so it is only shown in the Form Preview or the live Form, is included. Limiting the effect of the custom CSS ensures that it does not interfere with Digital and make it difficult to use.

Why is everything "!important"?

Because CSS is hierarchical, it is possible that an object on a page can have several CSS selectors that apply to it. If some properties have been defined for the same object in different style sheets, the value from the last read style is used.

Although it is possible to determine which style is influencing an object, it is not possible to guarantee it will stay that way. To ensure that the code is the one that takes precedence, the !important syntax is u sed. Adding !important at the end of an attribute tells the browser to override all the other CSS commands and just use this one.

How do I identify which object I want to modify?

The process of identifying the object to change is not difficult, but there is some finesse required. All browsers have built-in tools to help with the process, but the automation usually only identifies a very specific object as opposed to a higher level object that may also include several other objects. The CSS needs to be written using a selector to narrow down the specific object you want to modify.

CSS selectors use the hierarchical nature of HTML to identify a specific object. There are many ways to use selectors, and it sometimes requires understanding of how the HTML is written to find the right selector. To view detailed information about CSS selectors, see https://www.w3schools.com/cssref/css_selectors.asp.

For example, a survey may have a simple structure, as follows:

<div>
<div>
<p>
</div>
</div>

In the following example CSS file, all <div> objects have a bold font:

div {
font-weight: bold !important;
} 

To modify only the second <div> element, use the following selector:

div>div {
font-weight: bold !important;
} 

To modify only the <p> element of this particular structure, use the following selector:

div > div > p {
font-weight: bold !important;
} 

To find out what selector is used for a specific object, complete the following steps:

1. Hover over the highlighted HTML in the Developer View to view the HTML code highlighted in the Developer View/Elements panel.

2. Right-click the object to inspect and click Inspect.

3. Open a survey that contains the object that requires re-styling.

4. Right-click and select Copy > Copy selector.

This then captures the exact CSS selector for the object, which can be pasted into the CSS file.

There are occasions where this may not work because of the way the object is named. If you experience problems identifying the object you want to modify, contact your Experience Cloud expert.