Adding and removing javascript / css when and where you need it

Adding and removing javascript and css is handled separately within Magento. CSS is added in the usual fashion, where you have a <link rel=”stylesheet”… />. However, any included javascript (unless linked to “by hand” from a theme’s skin) is pulled via a php files which reads through the “js” folder in the root directory (root/js/index.php is responsible for this).
That is all well and good for Magento. The real question is how we, as developers, add these items when we need them. How you as a developer add css or javascript is, luckily, handled the same.
In this post, we will show how to add and remove javascript and css to a CMS page (and anywhere else) that you may need.
Method 1: Layout xml.
a) For files you want to include on every page
For css or js files you want to add to every page, you edit the page.xml files located in your layout folder (app/design/frontend/default/your_theme/layout/page.xml). Within this file, at the top you will find the <default> area with the <block name=”root” … >. This block has a child named “head” which contains the included css and js elements.