Magento – add CSS / JS per category or CMS page

Here’s a very simple solution to adding custom CSS or JS to a specific category or CMS page . The example below shows how to add a reference to a custom CSS file, let’s name it custom.css and assume that we’ve copied it in /skin/frontend/default/your_theme/css.

The CSS file inside would look something like (just an example):

.category-description {
height: 475px;
margin: 0 0 10px;
}

Next go to Manage Category- Your Category – Custom Design and under Custom Layout update textarea add this reference:

<reference name="head">
<action method="addCss"><stylesheet>css/custom.css</stylesheet></action>
</reference>

You can do the same for CMS pages – you will find a section called Custom Design in CMS page backend. For JS reference use “addJs” instead.