How to style a Hyperlink in Squarespace with CSS // Squarespace Tutorial

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
Ready for more codes? I’ve got you covered! 😎 The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Available now 👉 https://insidethesquare.co/css
—
We all know that underlined text is robot speak for “this is a link – click here” It has been since the dawn of the interwebs. But just because it’s always been that way doesn’t mean it has to be!! This week’s tutorial is all about how to change the style of your hyperlink on your website in any type of text. Before you check out the tutorial video, here is a breakdown of what I’m talking about:

*Not all text types are created equal.* Heading 1, heading 2, heading 3, and normal paragraph text all need to be called out in this code. If you want the same effect to happen to all links in all types, use this: h1 a, h2 a, h3 a, p a {…code goes here…}

*You don’t need to use custom CSS for everything.*  A good general rule is to only use CSS when you want your site to do something it isn’t designed to do. Paragraph text color can be changed in your style editor (design – site style) so change it there, not with code.

*Hover effects are where it’s at.* We have been trained to recognize that underline text means link, so if you decide to remove it, add a hover effect so folks know which part of the text is there for them to click on! Even if your copy literally says “click here” make it obvious for the user. 

All righty, enough with the pro tips – check out the tutorial video and grab the codes you want to work with below.

Remember, all of the codes below can apply to any text style individually, a few of them, or all of them. Use these codes to reference the specific one you want to change:

Heading One: h1 a{ …code goes here…}

Heading Two h2 a{ …code goes here…}

Heading Three: h3 a{ …code goes here…}

Normal/Paragraph Text: p a{ …code goes here…}

All Heading Text: h1 a, h2 a, h3 a{ …code goes here…}

All Text Types: h1 a, h2 a, h3 a, p a{ …code goes here…}

//REMOVE THE UNDERLINE FROM ALL TEXT TYPES//

a {border-bottom-style: none !important; text-decoration: none!important}

//CHANGE THE COLOR FOR LINKS IN HEADER TEXT//

h1 a, h2 a, h3 a{color: #50bdb8}

//REMOVE UNDERLINE & CHANGE THE COLOR FOR LINKS IN HEADER TEXT//

h1 a, h2 a, h3 a{color: #50bdb8!important; border-bottom-style: none !important; text-decoration: none!important}

//CHANGE THE FONT COLOR OF ALL LINKS IN ON HOVER//

a:hover {color: #50bdb8!important;}

▸▸▸ Ready for more codes?
The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at https://InsideTheSquare.co/css
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc.