How To Style Hyperlinks with CSS

Yup, it's Tuesday, and it's already JULY.  This is officially week 27 meaning I have written, recorded, edited, posted, and emailed 27 CSS tutorials so far this year. And yet, somehow, the world isn't out of coffee... Anywho, enough about my caffeine consumption - let's get into this week's free tutorial!

Now 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 below, 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 below and grab the codes to work with underneath it. And most importantly, have fun customizing your Squarespace website! ♥


 
 

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

h1 a, h2 a{border-bottom-style: 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;}

CHANGE THE FONT COLOR OF ALL LINKS IN ON HOVER

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

Ready for more codes?

Then today is your lucky day - because I have an entire PDF of them to share! Download my entire CSS code library, packed full of pro tips and codes to help you make a brag worthy Squarespace site.