Have you ever wondered how you can apply .css rules to elements on the page depending on the content type or path your site is currently on?

For example how you can make the borders around your node blue if the content type is Article, but transparent if it is Page? This post looks at three different ways you can target .css based on specific conditions, contexts or rules.

1. The default Drupal theme system

By default, Drupal already provides you a hand with applying .css based on certain conditions. If you look carefully at the page source while viewing a node, the body will have some classes assigned to it: not-front, logged-in, page-node-[nid], node-article and others. These can be very useful when you construct .css and can be used to target .css rules only to elements which match the criteria reflected in these classes. For example if you write a css rule like this:

.not-front #page {
background-color:pink;
}

The background color of the #page element will be pink only if the site is on a page other than the front page.

So this is already pretty cool. I do not recommend building your entire CSS architecture based on this, but it is good to know you can target for instance a particular node with a custom one-off .css rule. Also, a severe limitation is that you cannot assign your own classes to the body element. Enter Context module.

2. The Context module

I already wrote some stuff about how great the Context module is and how you can even extend it with other modules. It's one of those powerful tools you just keep finding uses for. So, if you want to go beyond what you learned at point one, you can use Context. One of the reactions of this module is Theme HTML, which essentially means you can specify class names to be added to the body of the page when the context is active.

And then...you can use the wealth of conditions that Context has to offer to make sure you are triggering the .css rule you have in the stylesheet only if your site finds itself in a particular context. So go ahead and explore these conditions and see what fits for you.

3. CSS Injector module

CSS Injector is this pretty neat module that uses the drupal_add_css() function to include a .css file based on a rule you can create and configure as a site administrator.

The workflow is simple. You create a new rule, add a title and a chunk of .css you want triggered based on this rule. Then, you specify the condition, i.e. the page(s) the rule gets triggered on. After you save, the module creates a .css file that gets added to the page based on the conditions you configured. Pretty cool a?

Conclusion

So we have looked at three ways of getting .css triggered based on certain conditions on your site. The first one was simple, using the Drupal default theme system to chain some of the body classes in the .css stylesheet to make some conditional styling.

The second one builds on the same approach but adds a lot of conditions into the mix and also the possibility to declare your own custom class names to be chained in the stylesheet.

The third one is a bit different. You can have custom .css rules that do not have to be chained to other classes (as you declare them right in the admin interface), but you are more limited when it comes to the number of conditions you can base them on.

So, evaluate your needs, and see which one fits best with what you want.

Hope this helps.