Joomla! 3.x : How to create style sheet to be used in different Custom HTML Module

Question

I am creating a website in joomla, and I am using the Custom HTML Module most of the time. I have been styling in each module every time I create a new one but I only need the same style. Sample of a custom html module:

Samples.

<style>
#amateurIcon{margin-top: 100px;}
</style>
<p id = "amateurIcon"><img src="images/Industries_icon/industry_chef.png"alt="" /></p>

Then

<style>
#otherIcon{margin-top: 100px;}
</style>
<p id = "otherIcon"><img src="images/Industries_icon/industry_other.png" alt="" /></p>

It's a waste of time for me doing this over and over again. I just want to create a class where I can call anytime in any of my Custom HTML Module. How can I do it?

Thanks.

Answer 1

This is just one of the reasons you should always use classes for styles, not IDs.

If you are only styling the image then you can target the image directly, not the parent p element, e.g.

In your template.css;

.img-icon {margin-top: 100px;}

In your modules:

<img class="img-icon" src="images/Industries_icon/industry_chef.png"alt="" />
…
<img class="img-icon" src="images/Industries_icon/industry_other.png" alt="" />