How to Properly Include Custom CSS and JS files in Magento

The first question to answer is “where do you want the custom CSS to appear?” You have several choices:

On all pages
On all CMS pages
On certain CMS pages
On all category pages
On certain category pages
On all product pages
On certain product pages

If you haven’t already created a file “local.xml” in your custom theme’s layout folder, please do so, and start the file with these contents:
<?xml version="1.0"?>
<layout>
</layout>

Adding custom CSS / JavaScript to All Pages
1. Open up local.xml
2. Add this XML as a child directly inside <layout>, then save

a. CSS file in the skin CSS folder:
<default>
<reference name="head">
<action method="addCss"><stylesheet>css/myCss.css</stylesheet></action>
</reference>
</default>

b. JavaScript file in the skin JS folder:
<default>
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/myJs.js</name>
<params/>
</action>
</reference>
</default>

c. JavaScript file in the /js folder:
<default>
<reference name="head">
<action method="addJs"><script>myJs.js</script></action>
</reference>
</default>

Adding custom CSS / JavaScript to All CMS Pages
See “Adding custom CSS / Javascript to all pages”, but instead of the tag <default>, use:
<cms_page >

Adding custom CSS / JavaScript to All Category Pages
See “Adding custom CSS / Javascript to all pages”, but instead of the tag <default>, use:
<catalog_category_default> and/or <catalog_category_layered>,

Adding custom CSS / JavaScript to All Product Pages
See “Adding custom CSS / Javascript to all pages”, but instead of the tag <default>, use:
<catalog_product_view>

Adding custom CSS / JavaScript to Certain CMS Pages
1. In the Admin Panel, navigate to CMS > Pages > Manage Content.
2. Click on the page you wish to apply custom CSS or JavaScript to.
3. Click on the “Design” tab
4. In the textarea labeled “Layout Update XML”, add:

a. For CSS file in the skin CSS folder:
<reference name="head">
<action method="addCss"><stylesheet>css/myCss.css</stylesheet></action>
</reference>

b. For JavaScript file in the skin JS folder:
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/myJs.js</name>
<params/>
</action>
</reference>

c. JavaScript file in the /js folder:
<reference name="head">
<action method="addJs"><script>myJs.js</script></action>
</reference>

Adding custom CSS / JavaScript to Certain Category Pages
1. In the Admin Panel, navigate to Catalog > Categories > Manage Categories
2. Click on the category you wish to add custom CSS or JavaScript to.
3. Click on the “Custom Design” tab
4. In the textarea labeled “Custom Layout Update”, add:

a. For CSS file in the skin CSS folder:
<reference name="head">
<action method="addCss"><stylesheet>css/myCss.css</stylesheet></action>
</reference>

b. For JavaScript file in the skin JS folder:
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/myJs.js</name>
<params/>
</action>
</reference>

c. JavaScript file in the /js folder:
<reference name="head">
<action method="addJs"><script>myJs.js</script></action>
</reference>

Adding custom CSS / JavaScript to Certain Product Pages
1. In the Admin Panel, navigate to Catalog > Products > Manage Products
2. Click on the product you wish to add custom CSS or JavaScript to.
3. Click on the “Design” tab
4. In the textarea labeled “Custom Layout Update”, add:

a. For CSS file in the skin CSS folder:
<reference name="head">
<action method="addCss"><stylesheet>css/myCss.css</stylesheet></action>
</reference>

b. For JavaScript file in the skin JS folder:
<reference name="head">
<action method="addItem">
<type>skin_js</type>
<name>js/myJs.js</name>
<params/>
</action>
</reference>

c. JavaScript file in the /js folder:
<reference name="head">
<action method="addJs"><script>myJs.js</script></action>
</reference>

Reference:
http://store.redstage.com/blog/2012/07/24/how-to-properly-include-custom-css-and-js-files-in-magento/