How do I change Heading (ie H2, H3) Hyperlink Color ?

Hello,

My website is BigInScience.com, and I'd like to make H2 & H3 heading hyperlinks the same in appearance as regular text hyperlinks. Specifically, my links appear blue (#0c08c1) and turn orange (#fc8002) when hovered over and active. I'd like H2 & H3 heading hyperlinks to appears the same. Here are a couple of CSS codes I've tried unsuccessfully:

// Attempt 1
h2 a:link {color:#0c08c1;}    
h2 a:visited {color:#0c08c1;} 
h2 a:hover {color:#fc8002;}   
h2 a:active {color:#fc8002;}

h3 a:link {color:#0c08c1;}    
h3 a:visited {color:#0c08c1;} 
h3 a:hover {color:#fc8002;}   
h3 a:active {color:#fc8002;}

//Attempt 2
#content h2 a:link {color:#0c08c1;}    
#content h2 a:visited {color:#0c08c1;} 
#content h2 a:hover {color:#fc8002;}   
#content h2 a:active {color:#fc8002;}

#content h3 a:link {color:#0c08c1;}    
#content h3 a:visited {color:#0c08c1;} 
#content h3 a:hover {color:#fc8002;}   
#content h3 a:active {color:#fc8002;}

Any help would be much appreciated!

Thank you,

Brian

Hello everybody:

Just solved the answer to my question. Here is the code I used:

body #page-body-wrapper h2 a:link,

body #page-footer-wrapper h2 a:link,

body #page-body-wrapper h2 a:visited,

body #page-footer-wrapper h2 a:visited { color: #0c08c1 ;}

body #page-body-wrapper h2 a:hover,

body #page-footer-wrapper h2 a:hover,

body #page-body-wrapper h2 a:active,

body #page-footer-wrapper h2 a:active { color: #fc8002;}

body #page-body-wrapper h3,

body #page-footer-wrapper h3 { color: #0c08c1;}

body #page-body-wrapper h3 a:link,

body #page-footer-wrapper h3 a:link,

body #page-body-wrapper h3 a:visited,

body #page-footer-wrapper h3 a:visited { color: #fc8002;}

body #page-body-wrapper h3 a:hover,

body #page-footer-wrapper h3 a:hover,

body #page-body-wrapper h3 a:active,

body #page-footer-wrapper h3 a:active { color: #0c08c1;}

To make your code A LOT MORE SIMPLE use this for example:

h2, h3 {
color: #0c08c1;

a { 
   color: #fc8002; 
   &:hover, &:visited, &:active { color: #fc8002; }
}
}

how did you create the normal size font with colour hyperlinks and underline?I would like to have it the same way, but with red text.

I tried both code options above and only replaced the heading references and color codes according to what I want, and nothing happened. I'm a complete CSS novice. Am I missing something here?

I'd like H1 on this page to be blue like my links: Portfolio page.

UPDATE: Searching the CSS code finally gave me the correct format for my template.

Yes, the code should work for every single template. You might have to add !important every once in a while depends. Some templates have a different active link class.

.active-link a { color: #fc8002; } is an example. You can find out if you inspect the element with the browser or firebug.

h1 { font-size: 24px; font-weight: 600; color: #333; }

h2 { font-size: 21px; font-weight: bold; color: #222; }

h3 { font-size: 18px !important; font-weight: normal; color: #333; }

That should work no matter what. If the changes don't show just add an important tag.

Nick Scolas solution worked perfectly for me when edited to

h1, h2, h3{
 a{
   color:#d99a30 !important;
   &:hover{ color:#37404e !important;}
 }
}      

@Nick your solution was definitely up my alley (I understand it and it worked). However, it changed my header title in my banner. How can can I leave out the banner link header?

Remove the "h1," from my code should do it

Thanks, @staus! It worked on the Five template for me!

Hi guys. I'm using the Five template and for some reason this didn't work for me. This is the page I'm having issues with: https://jessica-stuart-z1ha.squarespace.com/ I'm trying to make the linked text in my paragraph of h3 copy a different color than the grey, and I'm also trying to have my link hover color match the hover color I'm using on the site for normal text (which happens to be #cc0000). I've tried to inject the following CSS into the Page Header for that page:

h3{ a{ color:#cc6600 !important; &:hover{ color:#cc0000 !important;} }}...and it doesn't work. Any ideas?

Use this code to make all links have a custom color and hover color:

a { 
    color: #fff; 
    &:hover, &:visited, &:active { color: #696969; }
 }

You can then choose what type of text to target for this by wrapping the code above in another bracket and the heading type you're targeting. These are the options:

• p = body text
  • h3 = heading 3
  • h2 = heading 2
  • h1 = heading 1

So, for example, if you wanted to target just body text links it would look like this:

p {
a { 
        color: #fff; 
        &:hover, &:visited, &:active { color: #696969; }
     }
}

You can target as many of those as you'd like at a time, separated by commas "p, h2".

@iamme123, if it's not been too long since you've discussed this topic... I'm having issues with it. Can I add one of these code snippets to a gallery in an index so it applies the link style to the gallery content link?