I have a Menu Item that links to an Article.

I attach " example" css to the Page Class under the Display Options

It links to my css

.example{ font-family: myFirstFont; font-size: 32px; line-height: 40px; }

And works, but the entire heading, body & also the details are being dominated by the custom css. How would I for example just get the heading of the article to be effected?


2 Answers 2


You need to use the .example class before any other classes or elements you want to style in this particular page.

So for example, for a heading 1, you are going to need something like:

.example h1 {}

Or to give a custom style to a div element with class "myclass" :

.example div.myclass {}

As if you will be able to adjust the css rules for the body, it depends on where your template adds the extra custom class. In order to be able to use it for the body, the extra class needs to be added at the body, otherwise it will have no influence.


Change your css to

.example h1, .example h2{ font-family: myFirstFont; font-size: 32px; line-height: 40px; }

This is because you are applying the example class to entire block of the article. You need to specifically mention which elements you need to apply this css.

In the above example example class applies to h1 element and h2 elements, you could choose whichever the element your article title is rendered with. usually Joomla article title rendered with h2 tag unless you have some template override.

  • that is actually not correct, as it refers to a h2 heading with the class example.
    – FFrewin
    May 29, 2015 at 16:55
  • whats wrong with it
    – Nagarjun
    May 29, 2015 at 16:56
  • ok - i see you changed it
    – FFrewin
    May 29, 2015 at 16:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.