InsideTheSquare.co

View Original

How to customize your hyperlink text style in Squarespace

See this content in the original post

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

If you're looking to add a personal touch to your website and make your hyperlinks stand out, you've come to the right place.

In this tutorial, you’ll learn how to use simple CSS tricks to make your hyperlinks look uniquely yours, hover effects and all.

The codes from this tutorial are below, but there are some specifics you’ll need know first, like what to target and how to adjust properties and selectors so this matches your own Squarespace website.

See this content in the original post
See this content in the original post

#page .sqs-block-html a {

background:yellow;

text-decoration:none;

font-weight:bold

}

Here is the hover effect part of the code:

#page .sqs-block-html a:hover{

color:#FFF;

background:#000

}

The main selector from this video is #page .sqs-block-html a which isolates links inside a block of text on a page, not your site title, your footer, or any buttons.

See this content in the original post

🔗 How to install CSS in one page on your Squarespace site

🔗 How to target one thing on your Squarespace site with CSS

📚 Learn more about creating colors with code

Free Training: Squarespace CSS Basics