Adding custom JS and CSS in magento is very simple. You can do it using layout XML files Just need to add <action> tag inside block tag in page.xml file which we can found in app/design/frontend/custom_package/custom_theme/layout/page.xml

before adding we should copy page.xml file from base package to custom_package.

Then adding these two line do the rest:

To add CSS:

<action method="addCss">
     <stylesheet>path/to/your/cssfile.css</stylesheet>
</action> 

To add JavaScript:

<action method="addItem">
    <type>skin_js</type>
    <name>path/to/your/jsfile.js</name>
</action>

These two tags should be inside

<block type="page/html_head" name="head" as="head">.........</block>

While adding these file, these custom js and css must be place at the bottom of other js and css adding tag respectively, otherwise our custom js and css file might not show the difference.

The proper way to add custom css, js using local.xml. It is found in

app/design/frontend/[yourpackage]/[yourtheme]/layout/local.xml. 

If not found create one. The format of local.xml looks like.

<layout>
    <default>
        <reference name="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>path/to/your/jsfile.js</name>
            </action>
            <action method="addCss">
                <stylesheet>path/to/your/cssfile.css</stylesheet>
            </action>
        </reference>
    </default>
</layout>

In case if you want new JavaScript or CSS file in particular pages only. You have to add handle. For example, to add CSS or JavaScript file in catalog pages, but not in other.

<layout>
    <catalog_category_default>
        <reference name="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>path/to/your/jsfile.js</name>
            </action>
            <action method="addCss">
                <stylesheet>path/to/your/cssfile.css</stylesheet>
            </action>
        </reference>
    </catalog_category_default>
</layout>

The above will add jsfile.js and cssfile.css in catalog pages only. Those fill will not in other pages. Notice that we have replaced <default> tag with <catalog_category_default>. That's becuse the scope of <default> is global and scope of </catalog_category_default> applies for catalog only.