How to remove the default link color of the html hyperlink 'a' tag?

Question

The default link color is blue. How to remove the default link color of the html hyperlink tag ?

Answer 1

I had this challenge when I was working on a Rails 6 application using Bootstrap 4.

My challenge was that I didn't want this styling to override the default link styling in the application.

So I created a CSS file called custom.css or custom.scss.

And then defined a new CSS rule with the following properties:

.remove_link_colour {
  a, a:hover, a:focus, a:active {
      color: inherit;
      text-decoration: none;
  }
}

Then I called this rule wherever I needed to override the default link styling.

  <%= link_to 'Edit', edit_product_path(product) %>
  <%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %>

This solves the issue of overriding the default link styling and removes the default colour, hover, focus, and active styling in the buttons only in places where I call the CSS rule.

That's all.

I hope this helps