How do I style CMS rich text in Webflow?

Put the article body in a rich text field

A plain text field is for a short line with no formatting. A rich text field is for a long post, a bio, or an event description. In Collection settings, click New field and choose Rich text. Before you save the field, you can set a minimum character count, a maximum character count, or both. Help text and a required flag work here the same way they do on other fields.

On each item, type or paste the body. The field can hold paragraphs, headings, lists, links, images, videos, quotes, and other blocks the editor supports. A paste from a document can bring colors and hidden characters you do not want. When that happens, paste without formatting and apply headings and links again inside the field.

Bind a Rich text element on the template

On the Collection template, open the Add panel, then Typography, and drag a Rich text element onto the canvas. Select it. Open Element settings, then Content. Click the purple dot and choose the rich text field.

That connection is what gives each item its own body. You can put a class on the element while it stays connected. You cannot select and style the nested headings or paragraphs while the connection is on. Content editors can still format the text in the CMS, such as bold or a heading level. They cannot restyle those nested elements in the Designer.

To disconnect, open Element settings, Content, click the purple dot, and choose Disconnect property. Style the nested content, then choose the field again.

Nest paragraph and heading styles under one class

Give the Rich text element a class you use only for this body, such as post-body. Select a paragraph inside the element. Open the Style panel and click the Selector field. Choose the HTML tag. Webflow's example is All paragraphs. Click Nest selector inside of post-body. Then set the size, color, and spacing for those paragraphs.

Do the same for the heading tag you use inside articles. Nest that tag inside post-body, and set space above the heading there. Nested tag styles apply to matching elements inside anything that has the post-body class, not only Rich text elements. A class that lives only on the article body keeps the styles off buttons, nav text, and other pages. Styling All paragraphs with no class changes every paragraph on the site. That is too wide for a blog.

Example: the blog template's Rich text element has the class post-body. Paragraphs nested in post-body use the article size you set, for example 18 pixels, and a dark gray. An H2 nested in post-body has space above it. A paragraph on the homepage that is not inside post-body keeps the site's normal paragraph style.

Keep a style guide element on the same class

Webflow recommends a style guide page so you can change these styles without disconnecting the CMS field every time. Put a Rich text element on that page, add sample headings and paragraphs, and give it the same post-body class. Edit the nested tags there. The Collection template uses that class, so it follows the same styles.

Publish, then open one real post on the live site. Check a paragraph, a heading, a list, and a link in the body. If the live post still shows the old type, confirm the template element has post-body, and confirm you published after the style change.

You can also hide a heading elsewhere on the template when the rich text field is empty. That is a conditional on the field, using is set, not a text style. Use it when some items have no body and the label above the body should disappear with them.