Where to add CSS and Javascript directives so they are inserted into the header? I am attempting to make use of a jQuery script that will enable a "slider" or "slideshow" on my Drupal 7 front page. The instructions for the jQuery plugin (called FlexSlider) say to insert the following items into the header of the page where I want to use the plugin.

&lt;!-- Place somewhere in the &lt;head&gt; of your document --&gt;
&lt;link rel="stylesheet" href="flexslider.css" type="text/css"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;`&lt;/script&gt;
&lt;script src="jquery.flexslider.js"&gt;&lt;/script&gt;


The problem is I don't know where in my template file I place these directives. I am using a custom front page for Drupal so I have a template file named page--front.tpl.php. Do the directives go in there or some other location?
The best way to do this is to add the files inside your theme's info file. However you shouldn't need the jquery file, this is included in Drupal core.

scripts[] = scripts.js
stylesheets[all][] = style.css


Morea bout info files here: http://drupal.org/node/171205