Q14: How to Style Specific Sections of Text

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