Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
I have seen quite a few questions lately about how to style specific sections of text, either with a different colour, font or font weight etc.
There are a number of way to do this, probably the most popular by using the <span> tag, and that solution is fine. However, as Divi uses span extensively, you will find that unless you apply a custom class or inline CSS to the span in question, your styling will also be applied in areas you don’t want it to be.
My preferred method is to use the little known <mark> tag, it isn’t used anywhere in Divi as far as I am aware so no custom classes or inline CSS needed, just style it once and you can use it anywhere. In this quick snack I am going to show you how.
So let’s get cooking!
Ingredients
You don’t even need Divi for this as its just HTML and CSS
Cooking time
Literally 2 minutes!
Preparation
For our prep we are going to set up a simple text module. You can use any module you like and this will work on text in the content area and any fields that support HTML.
So add a new text module and enter your text in the content area.
Now we need to select the words we want to highlight and wrap them in ‘<mark>’ tags. I am going to highlight greatest, succeed and try, so my HTML will look like this:
Our <mark>greatest</mark> weakness lies in giving up. The most certain way to <mark>succeed</mark> is always to <mark>try</mark> just one more time.
Here’s how it looks inside the module, and remember you will need to do this in the text tab not the visual tab.
That’s our prep done.
Method
If you preview your page now your text should look something like this:
You can see our text is highlighted, that is the user agent stylesheet applying the yellow background (your browser).
Whilst this does the job of highlighting the text, its probably not the look you were going for, so let’s add some CSS.
We can use a whole load of CSS properties on the mark tag but for this example we will stick with text styling properties. The one property you must set if you don’t want the bright yellow highlighting is the background property. You can choose a colour or set it to transparent which is what I am going to do.
mark { background: transparent; font-family: 'Oswald', Helvetica, Arial, Lucida, sans-serif; color: #ff9047; text-transform: uppercase; }
So here I have set the background to transparent and changed the font, colour and case for the text. Your marked text will inherit the properties you have applied to your main text so any properties that you do not specify, like font size for example will be the same as your main text.
And here’s how it looks after applying our styling.
Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.
And that’s it, pretty simple eh?
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
Hi Michelle,
I am trying to edit link properties in a text box module. The typical a:hover code is not working. Do you know how I can do this?
I would need to see your code to be able to help
Hi Michelle
I have a strange issue in that when I use the Divi text module, the first para displays in font 16px when the global style is 18px. Inspecting the element reveals that the p is stripped from first para but remains in subsequent paras. Any ideas / fixes. Thanks
Are you using the most current version of Divi?
Yes, that’s the first thing I did – still the same
Sounds like you’ll need to contact Elegant Themes support for assistance
this is great thank you! is there a way to make the “mark” text a different size? My mark text is a font that is naturally smaller and i want to make it larger…
You can add a font-size property to the CSS in the recipe above. For example, if you want a font size of 20px, you would add: font-size:20px; before the closing bracket }
Hi Michelle, I just went to Divi > Theme Options > General > Custom CSS and applied the CSS over again. Somehow it disappeared there. Thanks again.
Hi Michelle. Thanks for the post. I actually followed your directions and everything is working fine. However, I am looking to modify it and now I can’t find the CSS! I have looked in all module and the Divi theme options. Any ideas? Thanks
You would need to copy the CSS from the recipe and paste it into your child theme stylesheet or Divi > Theme Options > General > Custom CSS
What am I missing here? Where am I supposed to edit the CSS? Because in the text Module, I popped it into the “After” CSS box and all I ended up with was a page with a lot of yellow highlighting, ha ha
This is what I used:
mark {
background: transparent;
color: #fb4b4d;
}
You need to place the CSS code in your child theme stylesheet or in Divi > Theme Options > General > Custom CSS
Thanks Michelle it really helped.
Nice little trick Michelle! Thank you. I was having trouble targeting some anchor text with and this worked instead.
Welcome Annemarie
Michelle,
I’m unsure why but anytime I try to use css code in either my child theme style sheet or in custom css fields, NOTHING happens. I currently have highlighted text on the wrapped text but the css doesn’t seem to want to work…
This sounds like a caching issue. Make your change then try to verify it on something like geopeeker.com