How to implement inline styling for href

Question

I am trying to perform inline styling for anchor tags. I know you can do a style in the head but that is not what I am trying to do. I looked online and saw that you can do a simple <a href="#link" style="color: #ff600">Link 1 </a>. However I cannot seem to find an answer to do inline styling for when it is visited.

I am trying to convert these below to inline style.

<style>
    a:link {
     color: red;
    }
    
    a:visited {
      color: blue;
      text-decoration: purple; 
    }
</style>

I have tried the following, but it does not work.

<a style="a:link color: red; a:visited color: blue text-decoration: purple;" href="https://www.google.com">search here</a>

Here is a sample code if it helps to visualize it.

<!DOCTYPE html>
<html>
<head>
<!--  <style>
    a:link {
     color: red;
    }
    
    a:visited {
      color: blue;
      text-decoration: purple; 
    }
  </style>   -->
</head>
<body>

<h1>Hello World!</h1>

<a style="a:link color: red; a:visited color: blue text-decoration: purple;" href="https://www.google.com">search here</a>

</body>
</html>

How can I do this translation into inline styling?

Does this answer your question? [How can I write 'a:hover' in inline CSS?](https://stackoverflow.com/questions/1033156/how-can-i-write-ahover-in-inline-css) — 0stone0, Jun 08 '23 at 14:55
A nice quote from the marked duplicate: **Short answer**: *you can't*. **Long answer**: *you shouldn't*. — 0stone0, Jun 08 '23 at 14:56
_"I know you can do a style in the head but that is not what I am trying to do"_ Why not? — j08691, Jun 08 '23 at 14:56

score 3 · Answer 1 · answered Jun 08 '23 at 15:10

3

Unfortunately, the :link and :visited pseudo-classes cannot be directly applied using inline styles. Pseudo-classes like :link and :visited are part of CSS selectors and cannot be represented in inline styles.

answered Jun 08 '23 at 15:10

betrice mpalanzi

1,436
12
16

How to implement inline styling for href

1 Answers1