Add CSS & JS to Magento XML Field

catalog.xml

<!-- To add a CSS file residing in the skin CSS folder -->

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

<default>
   <reference name="head">
      <action method="addItem">
         <type>skin_js</type>
         <name>js/custom.js</name>
         <params/>
      </action>
   </reference>
</default>

<!-- To add a Javascript file residing in the {magentoroot}/js folder -->

<default>
   <reference name="head">
      <action method="addJs">
         <script>custom.js</script>
      </action>
   </reference>
</default>

<!--

Adding CSS or Javascript files to all CMS pages 
See ‘Adding CSS or Javascript files to all pages’, but change the

<default>
tag to:
<cms_page>


Adding CSS or Javascript files to all Category pages
See ‘Adding CSS or Javascript files to all pages’, but change the

<default>
tag to:
<catalog_category_view>

Adding CSS or Javascript files to all Product pages
See ‘Adding CSS or Javascript files to all pages’, but change the
<default>
tag to:
<catalog_product_view>

-->

<!--

Adding CSS or Javascript files to specific CMS pages
In Magento admin, navigate to CMS > Pages and select your desired CMS page to add CSS or Javascript to. Select the design tab on the left.

In the area labelled ‘Layout Update XML’, add the following:

To add a CSS file residing in the skin CSS folder

-->

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

<!-- To add a Javascript file residing in the skin JS folder -->

<reference name="head">
   <action method="addItem">
      <type>skin_js</type>
      <name>js/custom.js</name>
      <params/>
   </action>
</reference>

<!-- To add a Javascript file residing in the {magentoroot}/js folder -->

<reference name="head">
   <action method="addJs">
      <script>custom.js</script>
   </action>
</reference>

<!--

Adding CSS or Javascript files to specific Category pages
In Magento admin, navigate to Catalog > Manage Categories and select your desired category to add CSS or Javascript to.

Click the ‘Custom Design’ tab on the left, and in the area labelled ‘Custom Layout Update’, add the following:

To add a CSS file residing in the skin CSS folder

-->

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

<!-- To add a Javascript file residing in the skin JS folder -->

<reference name="head">
   <action method="addItem">
      <type>skin_js</type>
      <name>js/custom.js</name>
      <params/>
   </action>
</reference>

<!-- To add a Javascript file residing in the {magentoroot}/js folder -->

<reference name="head">
   <action method="addJs">
      <script>custom.js</script>
   </action>
</reference>

<!--

Adding CSS or Javascript files to specific Product pages
In Magento admin, navigate to Catalog > Manage Products and select your desired product to add CSS or Javascript to.

Click the ‘Design’ tab on the left and in the area labelled ‘Custom Layout Update’, add the following:

To add a CSS file residing in the skin CSS folder

-->

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

<!-- To add a Javascript file residing in the skin JS folder -->

<reference name="head">
   <action method="addItem">
      <type>skin_js</type>
      <name>js/custom.js</name>
      <params/>
   </action>
</reference>

<!-- To add a Javascript file residing in the {magentoroot}/js folder -->

<reference name="head">
   <action method="addJs">
      <script>custom.js</script>
   </action>
</reference>