Text styles help you to make sure that your users are using consistent styles in their designs. Using a consistent style helps your contacts to recognise you and reinforces your brand image.

To create and save new text styles, you must add CSS to the source code of your template.

After you've created a new text style, we recommend that you use the style manager to edit that text style instead of editing it in the source code.

If you want to stop your users from editing your styles, you can lock them.

Find the CSS rules for your text styles

Go to Utilities > Edit Source and find the last internal stylesheet, which has an ee-styles attribute. All of your text styles are in this internal stylesheet and any new text styles must added to it.

<style ee-styles="" ee-render="inline">  /* Auto-generated style block.  Only edit if you know what you are doing! */</style>

Edit the default text style

The .base-styles rule is the 'Default style' in the 'Styles' dropdown and it is applied by default to all text building blocks. All other rules for text styles, such as heading styles and paragraph styles, inherit from this .base-styles rule.

The .base-styles rule looks something like this:

.base-styles { color: rgb(56, 75, 106); font-family: Arial, sans-serif;              font-size: 14px; line-height: 155%; Margin: 0px; text-align: center; }

If you edit the .base-styles rule, you must make sure that the following three rules below it have the same values for any properties that they each have in common with the .base-styles rule. Otherwise, you will not be able to apply the 'Default style' to your text:

body, td { font-family: Arial, sans-serif; }.ee_editable, .ee_editable td { color: rgb(56, 75, 106); font-size: 14px; line-height: 155%; }.ee_editable p { Margin: 0px; text-align: center; }

These three rules must contain only the following specific properties:

The body, td rule should contain only the font-family property
The .ee_editable, .ee_editable td rule should contain only the color, font-size and line-height properties
The .ee_editable p rule should contain all properties other than those in the other two rules

To automatically update the three rules below the .base-styles rule, edit only the .base-styles rule, then edit a text style in the style manager.

Edit text styles and adding new text styles

You can add and edit both heading styles and paragraph styles in your templates.

After you've created a new text style, we recommend that you use the style manager to edit that text style instead of editing it in the source code.

If you want to stop your users from editing your styles, you can lock them.

Heading styles

Rules for heading styles must start with the .ee-editable class selector, and the second and third class selector must define the level of the heading, for example:

.ee_editable .h1, .h1.ee_editable { font-size: 28px; font-weight: bold; }

You need to add properties to custom paragraph style rules only if they differ from the .base-styles rule.

You can add different levels of heading style by copying the 'Heading 1' (h1) heading style rule, pasting that rule below the h1 rule, and changing any instances of h1 to your chosen level. For example, you could change both instances of h1 in this example to h2 to make it a second level heading:

Original h1 rule: .ee_editable .h1, .h1.ee_editable { font-size: 28px; font-weight: bold; }

Your new h2 rule: .ee_editable .h2, .h2.ee_editable { font-size: 24px; color: red; }

After you've added a new heading style, it appears in the 'Styles' dropdown.

Paragraph styles

Rules for custom paragraph styles must start with the .ee-editable class selector. The second class selector is a custom class selector for your chosen name of a custom paragraph style, for example:

.ee_editable .my_new_paragraph_style { color: red; font-size: 20px; }

You need to add properties to custom paragraph style rules only if they differ from the .base-styles rule.

Your custom paragraph styles appear in the Styles dropdown below the heading styles.

Remove a text style

To remove a text style, delete the rule.

Important

If you remove the .base-styles rule and the three rules below it, the fonts of all the non-button text become Times New Roman.

Unsupported CSS formats

Any style rules that contain selectors that are not formatted correctly might be removed after those styles are edited in the style manager.

Furthermore, some CSS properties might be removed if they are not supported by your browser (non-standard rules or vendor-specific rules).

The following examples are CSS formats that are not supported in EasyEditor:

EasyEditor does not support rules that contain more than one custom class selector
Unsupported: .ee_editable .my_new_text_style, .ee_editable .my_new_text_style2 { font-size: 20px; }

Custom class selectors must be preceded by the ee-editable class selector
Unsupported: .my_new_text_style { font-size: 20px; }

EasyEditor does not support multiple classes in a single <p> tag
Unsupported: .ee_editable .my_new_text_style.my_new_text_style2 { font-size: 20px; }

EasyEditor does not allow you to customise sub-components in a single rule
Unsupported: .ee_editable .my_new_text_style b { font-size: 20px; }

Workarounds for unsupported CSS formats

To create a text style rule that contains unsupported selectors, you can add those rules to a stylesheet that comes before the ee-styles stylesheet.

For example, if you want bold text inside an h1 to be red, you can create the following stylesheet (that comes before the ee-styles stylesheet):

<style ee-render="inline">.ee_editable .h1 b, .h1.ee_editable b { color: red; }</style>

Add, edit, and style the Text block

Add CSS to email templates

CSS inliner

Create button styles in EasyEditor

Style your dynamic content in Magento Open Source and Adobe Commerce

Create text styles in EasyEditor