3

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

Improve this question
1
  • Don't forget to mark an appropriate answer as "correct".
    – JSK NS
    Commented Oct 16, 2012 at 17:09

3 Answers 3

Reset to default
5

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; 
}
Improve this answer
3
  • 1
    I can't believe spending hours on a space ! Thank you very much, it is working fine.
    – user1750613
    Commented Oct 16, 2012 at 17:03
  • @OP, you are far from the first developer to have done such a thing.
    – JSK NS
    Commented Oct 16, 2012 at 17:04
  • Oops I spent too much time writing the answer.
    – Optimus Prime
    Commented Oct 16, 2012 at 17:06
2

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; 
}
Improve this answer
2
  • Thanks a lot, I don't know when to put space or not to put, I thought we are putting space after ':' like in color...
    – user1750613
    Commented Oct 16, 2012 at 17:13
  • Yes, it looks like redundant, but I have in my original template theme css, hover style and colors for a larger class, so I think it overrides it because when I remove it, the hover color goes back to some other color I did not specify.
    – user1750613
    Commented Oct 16, 2012 at 17:45
1

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; 
}
Improve this answer
7
  • 2
    CSS does not support nesting. Maybe you're using some preprocessor like LESS?
    – xec
    Commented Oct 16, 2012 at 17:17
  • Your entire code sample is a syntax error. As mentioned, CSS does not support nesting at all.
    – BoltClock
    Commented Oct 16, 2012 at 17:22
  • Thanks! Does spacing before each line makes any difference on the code, or I should not be asking this question !
    – user1750613
    Commented Oct 16, 2012 at 17:22
  • BoltClock I'm a bit confused, which code are we talking about with the syntax error?
    – user1750613
    Commented Oct 16, 2012 at 17:25
  • @BoltClock and xec : sorry to misguide.I really got it wrong. Edited it back.
    – Optimus Prime
    Commented Oct 16, 2012 at 17:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.