Custom css 'Page Class'

Question

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?

Title

Answer 1

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.

Answer 2

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.