In Web development JS & CSS files play a vital role, and work as a backbone or skelton of your website. While working on a Magento project you can do this into your Magento layout files.
For adding JS or CSS, you can do this in xml layout files using methods/action:
<action method="addJs"/><action method="addCss"/>
Or You could do that by hard-coding your “head.phtml” file, but then those files will be loaded on all Magento pages. But this is not recommended at all.
All methods reside in Mage_Page_Block_Html_Head class. The first pair is addCss and addJs. You can use or script or file tags, both are allowed.
There is an XML configuration folder located in app/design/frontend/Package/theme/layout. The main one is called page.xml. In this you can add JS resources using below syntax:
There is also a second argument. It allows you to send any additional parameters to be included into script or link tag.
The path of a script added by addJs method is relative to Magento root /js directory. For addCss method it is relative to skin directory of your theme.
Magento does some stuff in the background and auto tries to put you in the /js dir. There is a third way too , Its called addItem:
You can use js,js_css, skin_js, skin_css, link_rel or rss as a type.Generally addItem method accepts one more parameter called param. The params is the same as the one used for addJs and addCss. Then there’s if and condition.
If if is set the added link will be placed into wrapper. That means you will be able to limit its inclusion to some specific browser versions.
skin_css will create a CSS link to relative to skin directory of your theme. This is similar to addCss method described above.
link_rel can be used to create a custom element with custom attributes. Can be used for including CSS files located remotely.