a:link {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
}
a:active {
font-weight: bold;
}

How do i get the active link to remain bold and not only become bold when I click on it?
What happens now is when I click the link it become bold and when it refreshes the link goes back to being regular (unbold).

You want it to stay bold even after you refresh the browser? Then put it on visited instead of active.

You want it to stay bold even after you refresh the browser? Then put it on visited instead of active.

sorry, I was wrong to say refresh, I should have said loaded the clicked link.

If i click "shop" the shop link should be bold when i am on shop.html
If i click "buy" the buy link should be bold when i am on buy.html
and only the link I am on should be bold the other links should stay normal


I think i may just have to set "shop" to be bold on shop.html and "buy" on buy.html

In that case, you need to put a class or id on it.

CSS:

a.active {
font-weight: bold;
}

HTML:

<a href="shop.html" class="active">Shop</a>

In that case, you need to put a class or id on it.

CSS:

a.active {
font-weight: bold;
}

HTML:

<a href="shop.html" class="active">Shop</a>

thank you

quick question why the "a.active" and not ".active"? Because the "a" makes it a link?

thank you

quick question why the "a.active" and not ".active"? Because the "a" makes it a link?

Putting the tag before the class or id will refine it to only affect that tag. It's possible to do it just ".active" but then it will affect everything with an "active" class. "a.active" means it will affect <a class="active"> but not <div class="active">