Jump to content

Giving specific text inside of paragraph different styling than rest of the text

Go to solution Solved by Ziggy,

Recommended Posts

How can I apply css styling only to a specific piece of text within a paragraph? How could I “call” it with css so that it doesn’t apply the css styling to the entire text box?

I don’t know if will make a difference but I’ll be adding a gradient color to the text.

Thanks,
Julie

Link to comment
  • Replies 5
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You would be best off doing this in a code block, and containing certain parts of the text in a <span> with styling. If you provide some specifics I can get you going in the right direction.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
45 minutes ago, Ziggy said:

You would be best off doing this in a code block, and containing certain parts of the text in a <span> with styling. If you provide some specifics I can get you going in the right direction.

@Ziggy 

In specific the text is "Sweet Strawberry Smoothie” It can be found on the bottom of this page

I don’t really know what other info you’ll need. That’s all I could think of right now  (If you need more info just ask).

 

Thanks,
Julie

Screenshot2024-05-09at4_15_32PM.thumb.png.4ab8adb8729832396d074992deecc4f9.png

Link to comment
  • Solution

If you replace the text with this code block:

<p>As the days warm up, nothing quite matches the refreshing joy of a <span class="gradient-text">Sweet Strawberry Smoothie.</span></p>

And use this in Custom CSS and add the color gradient you want:

.gradient-text {
  color:#AA4A44;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
9 minutes ago, BYWJ said:

Thanks so much! This code worked perfectly!

Happy to help!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.