Is there a way to replace my website's link colors using classes?

Question

Struggling to change the default link colors on my site. Despite researching similar issues, I can't seem to make it work.

This is how I've set the base link colors:

a:link, a:visited, a:hover { color: #0279aa }

Below is my style override for a specific element.

a:link.slideshow-navigate {
  background : #37ab4f;
  color : #fff;
}

The link I have defined looks like this:

<a href="#" class="slideshow-navigate">Link name</a>

Even so, the link color remains #0279aa instead of #fff. I prefer not to use "!important" if possible.

Any assistance would be greatly appreciated! Thank you in advance.

Answer 1

Answer №1

Here is an example of how it should look:

.image-gallery-controls{
    background-color : #37ab4f;
    color : #ffffff;
}

Answer 2

Here is an example of how it should look:

.image-gallery-controls{
    background-color : #37ab4f;
    color : #ffffff;
}

Answer 3

follow these steps:

a.nav-slideshow
    {
        background-color:#333;
    }

Answer 4

follow these steps:

a.nav-slideshow
    {
        background-color:#333;
    }

Answer 5

To achieve this effect, utilize the following CSS code:

a:link:not[href^="http"]{

background : #37ab4f;
  color : #fff;
}

There is no need to assign a class to each individual link.

This will apply styles to all internal links and exclude external links that begin with http.

Answer 6

To achieve this effect, utilize the following CSS code:

a:link:not[href^="http"]{

background : #37ab4f;
  color : #fff;
}

There is no need to assign a class to each individual link.

This will apply styles to all internal links and exclude external links that begin with http.