different font color for two words within a paragraph

Site URL: https://safeharborcoronado.org

I have a text module with a paragraph of text that is blue. I want to style the first two words of the paragraph to be red. Also I'll want this same paragraph styling on multiple pages. Is it possible to apply a custom css class to the text module then style it in the custom css panel? Thanks.

The only CSS selectors I know of would be for first letter or first line.  There is no means to select first-word(2).

The only way to achieve and maintain this for multiple pages would be with an html code block, where you could place the first 2 words inside a span and specify a class.

That class could be changed in one location to update all instances it has been used.

eg:

<p><span class="p-first-two">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Illa tamen simplicia, vestra versuta. Ratio quidem vestra sic cogit. Respondeat totidem verbis. <p>

then in CSS you could set the colour, size etc:

.p-first-two{
    color: gray;
}

Outside of this you would require javascript.  The only one that comes to mind for this purpose is https://github.com/davatron5000/Lettering.js

if I use an html block, will that block inherit all the other style settings or do I have to start from scratch with everything: font size (all screen sizes), font style, margin, padding, etc. Thanks again.

think i got it, just add the p class. thanks!

12 hours ago, georgia-shc said:

if I use an html block, will that block inherit all the other style settings or do I have to start from scratch with everything: font size (all screen sizes), font style, margin, padding, etc. Thanks again.

It will inherit any style given to p.  If you have any other paragraph styles (eg: i you have small paragraph, medium paragraph) you will need to add the class for that in your code as well.