Link style not updating in gallery description and photo details

Marmaduke3000

First up, apologies for such a basic question - I've tried following previous answers on this forums, but not sure what i'm doing wrong because the link style won't update for me.
........
Can someone please tell me what CSS I need to use - and where I need to put it - in order to change the style for the "SmugMug" link that i've placed in the following two content areas? The style is to be used site-wide/all galleries.

I'd like the link style to be bold text and underlined -- in the same colour as the surrounding text, and no change of state on hover.

Gallery Description:
https://www.newzealandscape.com/NZ-Art-Prints-Travel-Posters

Photo Details area:
https://www.newzealandscape.com/NZ-Art-Prints-Travel-Posters/i-g8RQxzh/A

(Note: The SmugMug link is just a placeholder link for now, while I'm testing the problem)

Hikin' Mike

I personally put all of my custom CSS to my Theme's Custom Section.

For your question, you have a few problems. Based on the link you created, <a href="https://www.smugmug.com">SmugMug</a> and the CSS you used:

.a span {
  color: #000;
  font-weight:500
}
   .a span:hover {
  color: #444;
}

a:hover {
  color: #000!important;
}

It won't work because:
1. There is no <span> called out in your <a> tag. If you want a <span> with your link, you need this: <a href="https://www.smugmug.com"><span>SmugMug</span></a>
2. In your CSS, you created a class .a and you shouldn't have done that, unless you create a class. As an example using your SmugMug link <a href="https://www.smugmug.com" class="a">SmugMug</a> or this <div class="a"><a href="https://www.smugmug.com">SmugMug</a></div>

See the class="a"?

Anyway, remove this:

.a span {
  color: #000;
  font-weight:500
}
   .a span:hover {
  color: #444;
}

a:hover {
  color: #000!important;
}

And use this instead:

.sm-user-ui a span {
  color: #000;
  font-weight: bold;
  text-decoration: underline;
}
  .sm-user-ui a span:hover {color: #444;}

.sm-user-ui a:hover {color: #000;}

Marmaduke3000

Thanks Mike, that's so helpful the way you broke down the problem down and explained it like that. The only issue is that the new link style has also affected several links in the content management UI --- for example, the bottom two links under the 'Customise' drop-down, and the 'Organise' link to the left of that drop-down (ie those links are now invisible against the dark backdrop). Do you have any suggestions?
Cheers

Hikin' Mike

So if you want some of the gallery links to be a different color then the default colors, you'll need to define a custom class. As an example:

HTML
<a href="https://www.smugmug.com"><span class="gallery-link">SmugMug</span></a>

CSS:

.gallery-link {
  color: #000;
  font-weight: bold;
  text-decoration: underline;
}
  .gallery-link:hover {color: #444;}

Marmaduke3000

Brilliant, that did the trick. Thank you!

Hikin' Mike

You bet.

I also noticed in your example that you are added a few "blank paragraphs" (<br>) to a space between the gallery description and your link. You can use margins instead:

.gallery-link {
  color: #000;
  font-weight: bold;
  text-decoration: underline;
  margin: 10px auto;
}

That will give your link 10px above and below and "auto" left/right.