Question

I tried many css from other places and stackoverflow, but somehow I can not make it done.

I’m very new to css, and using Joomla and a template. I’m using custom.css folder for certain customizations on style. Here is I want to do:

I want to style h5 when it is a link.

For example, I’m creating a custom html module, have a list in the content. And in the content I’m giving each, h5 style, and a link to it to a certain page in the site.

What I want to achieve is to have this list with color blue. And when mouse over-hover to have underline and still the same color. And when clicked back to the original position with no underline and no color change. (the same color in every situation, just underline when you are over it.)

I tried these h5, h5 a, h5 a: hover, h5 .contentheading a, and so on…

In one instance, it was working with :

h5 {
  font-family: arial, sans-serif;
  font-size: 1.3em;
  font-weight: bold;
}

h5 a {
  color: #0088CC;
}

h5 a: hover {
  color: #0088CC;
  text-decoration: underline; 
}

As I read I should use ‘a’ when the heading is a link.

But now something is overriding it, I’m completely lost now.

I see a:hover style in the inspection.

I want to use this h5 in several content (in custom modules) when I want to style a content as a list to links. And I thought it will be practical to have one heading with a certain style so that I can use it with flexibility.

Thanks a lot, any help will be great : )

Answer 1

It looks like you have a space betwen a: and hover. Try:

h5 {
  font-family: arial, sans-serif;
  font-size: 1.3em;
  font-weight: bold;
}

h5 a {
  color: #0088CC;
}

h5 a:hover {
  color: #0088CC;
  text-decoration: underline; 
}