HTML Editor- Custom CSS

You can add custom CSS applied across your demo to solve any style inconsistencies that you may find while using the HTML Editor. 

In addition to applying Custom CSS globally to your entire demo, you can now apply CSS to individual Screens (clips). This gives you more granular control over styling specific parts of your demo without affecting other Screens.

When to Use Clip-Level CSS

Clip-level CSS is useful when you want to:

• Change the appearance of a specific Screen without affecting others
• Override global styles for a particular section of your demo
• Apply targeted visual changes for different demo scenarios

How to Apply CSS to a Clip

1. In the HTML Environment editor, select the Screen you want to customize.
2. Open the Screen settings panel.
3. Navigate to the Custom CSS section within the Screen settings.
4. Toggle on Enable Custom CSS for this Screen.
5. Enter your CSS code in the editor.
6. Preview the changes and save.
   
   Before we walk through the steps on adding custom CSS to your demo, it's important to understand CSS selectors. A CSS selector selects the HTML element(s) you want to style. 
   
    

We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color: 

p {
  text-align: center;
  color: red;
}

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

The CSS rule below will be applied to the HTML element with id="para1": 

#para1 {
  text-align: center;
  color: red;
}

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with class="center" will be red and center-aligned: 

.center {
  text-align: center;
  color: red;
}

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page: 

* {
  text-align: center;
  color: blue;
}

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma.

All CSS Simple Selectors

Selector	Example	Example description
.class	.intro	Selects all elements with class="intro"
.class1.class2	.name1.name2	Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2	.name1 .name2	Selects all elements with name2 that is a descendant of an element with name1
#id	#firstname	Selects the element with id="firstname"
*	*	Selects all elements
element	p	Selects all <p> elements
element.class	p.intro	Selects all <p> elements with class="intro"
element,element	div, p	Selects all <div> elements and all <p> elements
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects the first <p> element that is placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that is preceded by a <p> element
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target="_blank"]	Selects all elements with target="_blank"
[attribute~=value]	[title~="flower"]	Selects all elements with a title attribute containing the word "flower"
[attribute|=value]	[lang|="en"]	Selects all elements with a lang attribute value equal to "en" or starting with "en-"
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"
:active	a:active	Selects the active link
::after	p::after	Insert something after the content of each <p> element
::before	p::before	Insert something before the content of each <p> element
:checked	input:checked	Selects every checked <input> element
:default	input:default	Selects the default <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children (including text nodes)
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> element that is the first child of its parent
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the input element which has focus
:fullscreen	:fullscreen	Selects the element that is in full-screen mode
:has()	h2:has(+p)	Selects h2 elements that are immediately followed by a p element, and applies the style to h2
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects input elements with a value within a specified range
:indeterminate	input:indeterminate	Selects input elements that are in an indeterminate state
:invalid	input:invalid	Selects all input elements with an invalid value
:lang()	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child	p:last-child	Selects every <p> element that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
::marker	::marker	Selects the markers of list items
:not()	:not(p)	Selects every element that is not a <p> element
:nth-child()	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child()	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type()	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type()	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects input elements with no "required" attribute
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
::placeholder	input::placeholder	Selects input elements with the "placeholder" attribute specified
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified
:required	input:required	Selects input elements with the "required" attribute specified
:root	:root	Selects the document's root element
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all input elements with a valid value
:visited	a:visited	Selects all visited links

For more information on CSS selectors, reference this page. For a full list of CSS selectors, reference this page.

How to Target Elements Using content_node_id and reprise_id

When working with our platform, you may need to target specific elements using their unique identifiers. Here's how you can do it using content_node_id and reprise_id.

Targeting Elements with content_node_id

To select an element using its content_node_id, you can use the following CSS selector format:

 

div[content_node_id=""]

By copying and pasting the specific content_node_id between the quotation marks, you can begin styling the element. For example:

 

div[content_node_id="4738978234"] { background: red; }

Targeting Elements with reprise_id

Similarly, you can target elements using their reprise_id with this CSS selector format:

 

div[reprise_id=""]

Just like with the content_node_id, you can insert the specific reprise_id between the quotation marks to start writing your CSS.

Example

Here’s a complete example to illustrate how you can style an element using its content_node_id:

 

div[content_node_id="4738978234"] { background: red; }

In this example, the element with the content_node_id of 4738978234 will have a red background.

By using these selectors, you can precisely target and style elements on your webpage based on their unique identifiers.

Now that you understand how to select the element that you want to style, follow the instructions below to learn how to add custom CSS in Reprise: 

1. Navigate to the Settings tab 



2. On the left hand side, select Custom CSS



3. Toggle on to include custom CSS for this replay 



4. Navigate to your real app, and open the developer tool.



5. Press the arrow button in the top left hand corner of the developer tool. 



6. Now you can select the element on the page that you want to edit. From here you can copy the code with the new style changes. In this example, I changed the color to yellowgreen. 



7. Add custom code to the custom CSS box within Reprise and press save. 

Related to

• New Replay Editor Overview