Follow us

How to style specific sections of text - Tutorial for Divi | Divi Soup

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.

How to style specific sections of text

 

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.

How to style specific sections of text

That’s our prep done.

 

Method

 

If you preview your page now your text should look something like this:

How to style specific sections of text

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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!