Short Cut to Styling Text in a Webflow Rich Text Field

Sean Gowing
April 12, 2022

So I was asked by one of our fabulous content team to make a section of a blog post that was geared towards QA stand out more. I was asked to subtly change the background color of the section to make it pop.  This lead me into the CMS section in Webflow to start messing with the styles tied to the div I used an HTMl embed to put on the page. 

I tried to surround the QA portion of the content with an opening div at the top and a closing div where the content ended.  That didn't work.  What I got was a single paragraph size line of the box.  Inspecting this page you will see what I tried in the rich text field itself. The closing div is below this line of text.

So like any good front end dev I started writing custom html into the blog post to get the acquired look.  Then I did something, I cut and pasted the HTML I just created back into the HTML embed back into Webflow CMS HTML Embed block.  When I did this I then had 2 instances of the opening div on accident.  This resulted in a double box, but it also encompassed the material I wanted it to cover.

I corrected the mistake but then started trying to figure out how to replicate what I just saw.

That is when I found the answer I was after. By nesting a Div inside the stylized div It created the look I was after

<div class="box"><div>

This will save me time (even though I had already wrote the custom HTML for that section) Just dont forget to close your open Div's. Hope this saves you some time and allows you to get that look you are after as well!

written by

Sean Gowing
April 12, 2022
By:
Sean Gowing
April 12, 2022

So I was asked by one of our fabulous content team to make a section of a blog post that was geared towards QA stand out more. I was asked to subtly change the background color of the section to make it pop.  This lead me into the CMS section in Webflow to start messing with the styles tied to the div I used an HTMl embed to put on the page. 

I tried to surround the QA portion of the content with an opening div at the top and a closing div where the content ended.  That didn't work.  What I got was a single paragraph size line of the box.  Inspecting this page you will see what I tried in the rich text field itself. The closing div is below this line of text.

So like any good front end dev I started writing custom html into the blog post to get the acquired look.  Then I did something, I cut and pasted the HTML I just created back into the HTML embed back into Webflow CMS HTML Embed block.  When I did this I then had 2 instances of the opening div on accident.  This resulted in a double box, but it also encompassed the material I wanted it to cover.

I corrected the mistake but then started trying to figure out how to replicate what I just saw.

That is when I found the answer I was after. By nesting a Div inside the stylized div It created the look I was after

<div class="box"><div>

This will save me time (even though I had already wrote the custom HTML for that section) Just dont forget to close your open Div's. Hope this saves you some time and allows you to get that look you are after as well!