Custom CSS Styling for specific paragraph text. "Tick. Tock. Tick. Tock"

[Lee_Graham]

Looking for some suggestions on how various text Paragraphs can have specific styling. For example I have the following text "Tick. Tock. Tick. Tock" where I would like the first TICK and the second TOCK to be in gold, and the other text in white. How can this be done through CSS only? Having spent the last 2 hours on ChatGPT and having no success.

[WalkYourStyle]

Can you please share your store's URL?

[Lee_Graham]

Certainly, however this is still under construction and therefore behind a password...best way to get around this without making it live?

[WalkYourStyle]

If you don't want anyone to see the website url, you can send me a private message with the store's url. If you don't want to send me a private message either, i would have to guide you through it.

Firstly is the paragraph with the text a shopify section like rich text or a product title or custom liquid ?

[Lee_Graham]

I have removed the password for this purpose. The url is: https://moreishcandles.com/pages/ethical. In this example the words " Tick. Tock. Tick. Tock. are what I am looking to style. The first TICK will be gold, the second TOCK will be gold, but the rest of the text is white. I have been making these edits through the custom CSS in the right hand pain, as my coding skills are 20 years old and not up to scratch. Any questions please let me know. Cheers!

[WalkYourStyle]

Instructions

1. Go to 'Online Store' -> Themes -> Customize

2. In the multicolumn section, click on the column with the TICK. TOCK. TICK. TOCK. heading

3. Then in the heading you will have to surround the text you want to be gold with the span element so then in the css you can target it easily. It should look like this: 

<span>: Starting the gold text

</span>: Ending the gold text

4. Then go to 'Online Store' -> Theme -> Edit Code

5. In the assets folder, locate the file 'base.css'

6. At the end of the file paste this code

#Slide-template--20214383280464__multicolumn_cQ7ANN-2 h3 span{
    color: gold; /* Adjust the color according to your preference */
}

[Lee_Graham]

That's outstanding. Thank you very much.

Wish I had come here much MUCH Sooner. 

[Lee_Graham]

If I want to target the column above this, should I have to target this also? As surrounding the text the the "tunneling" heading with the <span> tags has no effect?

[WalkYourStyle]

You want to target the word 'tunneling' and change it's color ?

[Lee_Graham]

Apologies, its actually the word "Goodbye" and "tunelling" I was trying to abbreviate. I have attempted the take your solution and adapt, therefore I had source the target for the first column and wrote the following code into the base file, but appears to not work.

#Slide-template--20214383280464__multicolumn_cQ7ANN-2 h3 span{
color: gold; /* Adjust the color according to your preference */

#Slide-template--20214383280464__multicolumn_cQ7ANN-1 h3 span{
color: gold; /* Adjust the color according to your preference */

[WalkYourStyle]

This is the code you added:

  #Slide-template--20214383280464__multicolumn_cQ7ANN-2 h3 span{
    color: gold; /* Adjust the color according to your preference */

    #Slide-template--20214383280464__multicolumn_cQ7ANN-1 h3 span{
    color: gold; /* Adjust the color according to your preference */

    
}
}

You nested the code for the 1st multicolumn by accident.

Replace the above code with this one:

#Slide-template--20214383280464__multicolumn_cQ7ANN-2 h3 span,
#Slide-template--20214383280464__multicolumn_cQ7ANN-1 h3 span{
   color: gold; /* Adjust the color according to your preference */
}

[Lee_Graham]

Ah, I can see that the targets were separated by a comma, then the actual style change is housed in the curly brackets. Excellent, thanks again. 

[WalkYourStyle]

Yes, if you want to apply the same styling to multiple elements, you can write the code once and separate the elements with a comma.

[Lee_Graham]

Excellent thank you. Just viewing this in chrome on a mac, and all seems to work well, however when viewing in chrome on an android mobile, it hasn't taken effect. Is this dependant across browsers / operators?

[WalkYourStyle · Accepted solution]

I found the problem. You have to move the code at the top of the 'base.css'. Somehow it gets overridden or ignored when in mobile perspective. Or another way is instead of adding the code in the base.css, you can add it in the theme.liquid file before the </head> tag in this format:

<style>
  #Slide-template--20214383280464__multicolumn_cQ7ANN-2 h3 span,
  #Slide-template--20214383280464__multicolumn_cQ7ANN-1 h3 span{
     color: gold; /* Adjust the color according to your preference */
  }
</style>

[Lee_Graham]

Apologies for the delayed response, this was perfect. Thank you!