CODEWITHSUNDEEP
csscss-selectors
user1750613
user1750613

Reputation: 33

CSS / Style Heading Tags

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 : )

Upvotes: 3

Views: 3070

Answers (3)

Optimus Prime
Optimus Prime

Reputation: 6907

There is an error in your syntax. Space between a:hover, this should be written as one.

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; 
}

Upvotes: 1

marco-fiset
marco-fiset

Reputation: 1933

As it was already pointed out by JSK NS, there should be no space between a: and hover. And if you want the link to be underlined only on mouse hover, you should add

text-decoration: none

in the h5 a section. You can also remove the repeating color in h5 a:hover as it is redundant. Final CSS would be like so : 

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

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

h5 a:hover {
  text-decoration: underline; 
}

Upvotes: 2

JSK NS
JSK NS

Reputation: 3446

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; 
}

Upvotes: 5

Related Questions