How to style elements inside a rich text element WITHOUT changing site-wide element styles (Webflow tutorial)

How to style elements inside a rich text element WITHOUT changing site-wide element styles (Webflow tutorial)

Intro

Rich text elements are great. But styling them – and the elements inside of them – can be tricky. (At least it was for me when I first needed to do so…)

By default, elements within a rich text field inherit their styling from their respective HTML tags.

Example: If you have a paragraph element in your rich text field, the paragraph will inherit the global styling of the ‘paragraph’ HTML tag.

But that means: when you change the styling of that HTML tag, the change will apply to all elements on your site with those HTML tags. 

So here’s how to style elements inside a rich text element without changing all elements on your site:

Video tutorial

Here’s the video if you prefer to watch instead of read

Step-by-step

  1. Select the rich text element
    2. image
  2. Give the rich text element a class
    3. image
  3. Select the element in the RTE you wish to style, e.g. a paragraph
    4. image
  4. Click into the Selector field, and select the HTML tag (e.g., All paragraphs) from the menu
    5. image
  5. Click Nest selector inside of “class name”
    6. image
  6. Done Now you can style the element however you like, and it will only affect paragraphs that are nested inside of elements with the class ‘RTE-class’ applied.
🤝
If you need help with Webflow, feel free to reach out to me via LinkedIn. I run a small design and Webflow agency for software startups → DailyDesign.io

← All blog posts

Resources:

https://university.webflow.com/lesson/rich-text?topics=elements