Injecting CSS and JS in Joomla templates

Creating your own CSS and JS files to customize a ready template is very useful, because guarantee a uncoupling between template's original code, and your customizations. But, in front of a so complex files and folders structere, many begginers atops in the following question: how do I add declarations to the <head> tag, in a "correct" way?

Edit the index.php file from your template, and below the defined('_JEXEC') command,use these commands according to yout needings, to inject Javascript and CSS definitions inside <head>...</head> tags.

Take the object that corresponds to the rendered document (nedded in all cases)

$doc =& JFactory::getDocument();

Inject CSS file

$doc->addStyleSheet( 'http://www.example.com/css/mystylesheet.css' );

Inject CSS Code

$style = 'body { background: #00FF00; color: #FF0000; }'; 
$doc->addStyleDeclaration( $style );

Inject JS file

$doc->addScript( 'http://www.example.com/js/myscript.js' );

Inject JS code

$script = 'function hello() { alert ("hello world"); }'; 
$doc->addScriptDeclaration( $script );

For more information, see Joomla documentation: classe JDocumentaddStyleSheet | addStyleDeclaration | addScript | addScriptDeclaration