When editing a Joomla! template one of the biggest challenges can be finding the css style rules that apply to a particular element. It really helps if you understand the basics of css selectors, and how they are applied to css style rules.

Simple Style Rules

A style rule consists of two parts, a selector, and a series of style declarations, for example

p.example{color:green; font-size:12px}

The selector is p.example, the style declaration is {color:green; font-size:12px}.

There are three types of selectors: elements, classes, and ids, for example

p{color:green; font-size:12px} /*element selector*/

#content{background-color: #ccccff; margin:2px} /*id selector*/

.featureditem{border:2px red solid} /*class selector*/

These can be combined:-

div#content p.featureditem{ color:green; font-size:12px;background-color: #ccccff; margin:2px;border:2px red solid; }

This style rule applies to all <p> elements with a class of featureditem, which lie inside a <div> element with the id content, eg the html would look like

<div id="content">

<p class="featureditem">This is some example text</p>

</div>

Multiple Style Rules

An important point to realise is that multiple style rules can apply to a particular element. In a Joomla template there may be dozens or even hundreds of style rules, and any given element may be affected by several of these at the same time. Sometimes these rules may conflict, for example one rule may specify a text color of blue, while another specifies a text colour of red. Which one is is actually applied will depend on the order of precedence of the css selectors

When editing a template, a common requirement is to change an attribute such as the font-color or size for a selected group of elements. A common problem occurs when a change is made to the style rule, and nothing happens! This is the result of applying the style rule to the wrong group of selectors.

When deciding how to display a particular element, a web browser will weigh up these style rules, and implement all that apply to the element. In the case where there are conflicts it will apply those rules that are most specific to the element.

For example the html element

<p class="featureditem" id="featured">This is some example text</p>

Suppose the stylesheet contains the following rules

p{color:green; font-size:12px} /*element selector*/

#featured{color: red; margin:2px} /*id selector*/

.featureditem{color:blue; border:2px red solid} /*class selector*/

It may not be immediately obvious in which color the text will appear: in fact it will be red. This is because id selectors are always weighed as being the most specific, followed by class selectors, then element selectors, which are the most general.

Similarly when you have the html

<div id="featured">

        <p class="featureditem">This is some example text</p>

        <p>This is some more example text</p>
  </div>

And the style rules

#featured p{color: red; } /*id selector*/

p.featureditem{color:blue;} /*class selector*/

You might expect that the text will be blue for the first paragraph, and red for the second, in fact it will be red for both paragraphs, because the #featured css selector is more specific, and hence overrides the other style rules.

If you want to turn the first paragraph blue, you will need to use the style rules

#featured p{color: red; } /*id selector*/

#featured p.featureditem{color:blue;} /*class selector*/

Applying This to Joomla Templates

This issue arises quite commonly with Joomla templates, because it is common for designers to label parts of the web page with id attributes, and apply style rules to these parts. For example, a common (simplified) structure for a template is to have a left and right column, a main content area, plus a header and footer area. These areas may have the ids (for example): leftcol, rightcol, content, header and footer.

Suppose you want to change the color of h3 headings in your main content to blue, when these have the class 'featureditem'. You might try adding the following style rule to your template css:

h3.featureditem{color:blue;}

However you find to your frustration and annoyance that this does not work. The likely explanation is that the template designer has set up a style rule such as

#content h3{color:black}

and this is overriding your new style rule. The solution is to amend your rule to

#content h3.featureditem{color:blue;}

In practice it can be quite difficult to track down the exact style rule that is applied to an individual elements, hence it may be quite difficult to find a new rule that will have the effect that you want. If all else fails, then you can use the !important construct. For example,

h3.featureditem{color:blue !important;}

This will override other rules. Note that the !important is applied to the individual declaration, such as color:blue. However I would not recommend using this too widely - it disrupts the normal calculation of css properties, and if used a lot can create more problems than it solves.