How to customize the hyperlinks in your Squarespace text blocks

content block

Mar 18

When you see underlined text on a website, your brain immediately recognizes it as a hyperlink. This universal design convention has been around since the early days of the internet — but who says we can't get more creative with our hyperlinks in 2025?

If you've ever looked at the standard blue underlined links in your Squarespace site and thought, "These just don't match my brand," you're in the right place. In this tutorial, I'll show you my favorite CSS tricks to transform those basic hyperlinks into eye-catching, brand-aligned design elements that enhance your user experience.

Standard hyperlinks serve their purpose — they indicate clickable text. But they come with limitations:

Limited color customization options in the Squarespace editor
Standard underlines that may clash with your design aesthetic
Lack of hover effects to encourage interaction
No way to make them stand out beyond basic underlining

The good news? With just a few lines of custom CSS, you can transform those boring default links into design elements that elevate your entire website.

The tutorial video below will teach you how to customize these links with your own CSS. Check below the video for more info & the copy & paste codes you’ll want to work with.

Understanding Which Links We're Styling

Let's be super clear about what we're customizing here. We're talking about links inside your text blocks — not buttons or navigation menus. When you add a hyperlink to your paragraph text or headings, that's what we're styling.

To target these hyperlinks specifically, we use simple CSS that looks like this:

p a means "links inside paragraph text"
h3 a means "links inside heading 3 text"

If we just used a by itself, we'd change every link on the site (including buttons and navigation), which isn't what we want!

Copy & Paste Code Examples

Here are three of my favorite hyperlink styles that you can add to your Squarespace site. Just copy the code you like and follow the simple steps at the end to add it to your site.

Style 1: Custom Colored Underline

This style keeps the traditional underline look but makes it match your brand colors. When someone hovers over the link, the text changes color too!

Feel free to replace that red color (#FF0000) with any color that matches your brand.

p a, h3 a {
    text-decoration-color: #FF0000 !important; /* Bright red underline */
}

p a:hover, h3 a:hover {
    color: #FF0000 !important; /* Text changes to red on hover */
}

Style 2: Background Highlight Effect

This style is more dramatic — it adds a colored background behind your link text. When someone hovers over it, the colors flip to create an eye-catching effect.

The padding: 0 3px part adds a little breathing room on either side of the text, so the background doesn't hug the letters too tightly.

p a, h3 a {
    background: #333333 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 0 3px !important;
}

p a:hover, h3 a:hover {
    background: #FFFF00 !important;
    color: #000000 !important;
    text-decoration: underline !important;
}

Style 3: Wavy Underline

This playful style uses a wavy underline instead of a straight one. On hover, the line gets thicker and adds a light background color. This style is great for creative brands or sites with a more casual feel.

p a, h3 a {
    text-decoration-style: wavy !important;
    text-decoration-color: #FF6600 !important;
}

p a:hover, h3 a:hover {
    text-decoration-thickness: 2px !important;
    background: #FFFFCC !important;
}

How to Add These Styles to Your Site

Adding your chosen hyperlink style is super simple:

In your Squarespace dashboard, click on Pages in the left menu
Scroll down to Website Tools
Click on Custom CSS
Paste your chosen code
Click Save

That's it! Your hyperlinks will immediately update across your site.

Pro Tips for Better Hyperlinks

Here are some quick tips to get the best results:

Match your brand - Use colors from your brand palette for a cohesive look
Keep them recognizable - Even with custom styling, links should still look clickable
Test on mobile - Make sure your styled links look good on phones too
Be consistent - Use the same link style across your entire site
Get creative - Try different color combinations or mix elements from these examples

Need More Help?

If your hyperlink styles aren't showing up correctly, try:

Adding !important to any style that isn't applying (as shown in the examples)
Checking if you've targeted the right text types (p for paragraphs, h1 - h4 for headings)
Viewing your site in an incognito browser window to rule out caching issues

What's Next?

Small design details like custom hyperlinks might seem minor, but they add up to create a polished, professional website that’s uniquely yours.Have fun experimenting with these styles, and check out my other code resources below!