how do i make a heading a hyper link without changing it's style in css

Question

I tried attaching a link to my heading but i ended up having the style of the text formatted. What did i do wrong

h2 {
  color: green;
  text-align: right;
  border: 2px solid purple;
  text-decoration: none;
}

<h2><a href="#">Sign in</a></h2>

Answer 1

Here is one of the possible solutions :

h2{
    color:green;
    text-align: right;
    border: 2px solid purple;
    text-decoration: none;

}
a{
 color:green;
 text-decoration: none;
}

   <h2> <a href="#">Sign IN</a></h2>

Answer 2

I think you can use inherit here to save setting the same color etc twice.

Links have default colors depending on their states which have to be overridden.

h2 {
  color: green;
  text-align: right;
  border: 2px solid purple;
  text-decoration: none;
}

h2 a {
  color: inherit;
  text-decoration: inherit;
}

<h2><a href="#">Sign in</a></h2>

or even...currentColor..

h2 {
  color: green;
  text-align: right;
  border: 2px solid purple;
  text-decoration: none;
}

h2 a {
  color: currentColor;
  text-decoration: inherit;
}

<h2><a href="#">Sign in</a></h2>