How to implement conditional style in CSS for Joomla articles

Question

I own a website called www.elitemaths.com.au. The issue I am having is the with the template.CSS file which seems to make all images to stretch because it has the following syntax

.article-intro img,.article-content img,.article-image-full img {
width: 100%;
}

While I need to have this style apply on the main pages, I do not want it to work on all the articles I created under a certain category. The reason for this is because in these articles, I insert a lot of small images that I want to have in their actual size. These articles are found in the following link http://www.elitemaths.com.au/vce-study-materials/10-methods34/93-methods-3-4-version-2

The following is what I want to implement. Can you think of the simplest way to implement conditional style based on article type?

/* I want to implement to the main menu page articles of the website */
/* including HOME, STUDY MATERIALS (only main page), SERVICES, ABOUT US and LOGIN*/
.article-intro img,.article-content img,.article-image-full img {
width: 100%;
}

/* I only want to apply to the articles that sit under the STUDY MATERIALS main menu*/
.article-intro img,.article-content img,.article-image-full img {
 initial;
}

Answer 1

If you're using modules to place the articles on the pages, then you should set a CSS class with the Module Class Suffix under the advanced tab. Then you can target the articles within the module like so:

.YOUR_MODULE_CLASS SUFFIX .article-intro img, .YOUR_MODULE_CLASS SUFFIX .article-content img

Alternatively, you'll have to alter the html output for your articles in a template override like so:

<div class="category-<?php echo $this->category->id; ?>">
....
</div>

That will give you a way to target CSS per category. You can find the files to override in the HTML folder in your template in com_content => articles.

Check this link for reference. And more on CSS selectors

From just eyeballing your site, it looks like you use modules on the front page and not on the article pages, so you could set your defaults to the css you want and just apply the width 100% to just the stuff in the front page modules. You could also hard code the CSS directly into the article images themselves, but depending on how you want to do it, methods one and two are more fool proof.