How to achieve MULTIPLE hyperlink styles within a single div?

March 29, 2024

I’m trying to create a div that has two simultaneous styles of hyperlink in. A primary one for the more important link, and a secondary one that are relevant to describe the primary one. The point is to have the primary link standout, whereas the secondary ones are un-obtrusive. Now unfortunately it’s not applying, and all links appear as the default blue and purple etc.

Apologies if anything is unclear, this is my first time posting here.

Here’s my HTML:

<div class="mainContent">
    <a href="https://primary.org" id="primaryLink">The Primary site</a> is a project by the <a href="https://secondary.org" id="secondaryLink">Secondary site/a> that aims to xyz.
</div>

Here’s my CSS:

#primaryLink a:link{font-size:20;color:#93186F}
#primaryLink a:visited{font-size:20;color:#77023F}

#secondaryLink a:link{text-decoration:none;color:white;}
#secondaryLink a:visited{text-decoration:none;color:white;}

The desired output is something like this:
The Primary Site is a project by the Secondary site that aims to xyz.

>Solution :

You have numerous errors in your html and css. Try the following:

#primaryLink {
  font-size: 20;
  color: #93186F;
}

#primaryLink: visited {
  font-size: 20;
  color: #77023F;
}

#secondaryLink {
  text-decoration: none;
  color: white;
}

#secondaryLink: visited {
  text-decoration: none;
  color: white;
}


/*add background color to see the format you want */

body {
  background-color: gray;
}

<div class="mainContent">
  <a href="https://primary.org" id="primaryLink">The Primary site</a> is a project by the <a href="https://secondary.org" id="secondaryLink">Secondary site</a> that aims to xyz.
</div>