Removing Background and changing colour to specific text

Store Design
,

Topic summary

A Shopify user successfully removed a banner background and changed text to white using CSS, but needs help making one specific word red while keeping the rest white.

Current CSS:

  • .banner__box sets transparent background and 50px font size
  • .banner__text sets 51px font size and white color

Proposed Solutions:

  1. One response suggests changing all text to red using .banner__text {color: red;} - this doesn’t address the selective coloring requirement.

  2. A more targeted solution recommends:

    • Italicizing the specific word that should be red in the banner text editor
    • Adding CSS to target the italicized word: .banner__text em { color: red; font-style: normal; }
    • This works because italicized text gets wrapped in <em> tags, allowing selective styling while maintaining normal (non-italic) appearance

The discussion remains open with no confirmation from the original poster on which solution was implemented.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi,

New to shopify,

I created a banner, in which i wanted to remove the background and change the colour to White, which i’ve done successfully using the following code:

However, i want to change the color of one of the words to red, leave the rest white.

Thanks.

.banner__box {
background: transparent;
font-size: 50px;
}
.banner__text {
font-size: 51px;
color: white;
}

DLuxton_0-1748639494801.png
DLuxton_0-1748639494801.png1177×341 205 KB

2

Hi @DLuxton

Let try to use:

.banner__text {color: red;}
3

Italicize the word that you want to be red. For example if you wanted “UNAPOLOGETIC” to be red:

"UNFILTERED. UNCENSORED.

UNAPOLOGETIC." <= Italicized.

Then add this CSS in the Custom CSS area of that section:

(Note: This works because when you italicize a word it gets wrapped in an em tag like this UNAPOLOGETIC.)

.banner__text em {
    color: red;
    font-style: normal;
}