The page’s <head> section is of vital importance to store information about a website as well as about the scripting language(s) and CSS styles used for the site.
Joomla generates key elements of the <head> section, such as the <title> tag and <meta> tags. We often need to add scripts or CSS styles to this section. To do this, we apply our changes to a file which generates its content between <head> tags. In the case of the GavickPro files based upon the T3 framework, the file to edit is layouts/blocks/head.php.
Scripts and CSS styles may be added in two ways – as external files or embedded directly into the <head> section. There are addStyleSheet and addScript functions used for adding scripts and files as external files. These are examples of these functions:
$this->addStyleSheet('path_to_the_CSS_file.css');
$this->addScript('path_to_the_JS_file.js');
Equivalents of functions which add CSS/JavaScript directly into the <head> section are addStyleDeclaration and addScriptDeclaration:
$this->addStyleDeclaration('body { color:#000; }');
$this->addScriptDeclaration('if(x > 0) alert("x is bigger than zero!");');
Additionally, in the case of functions which add external files to a website, two functions from the T3 framework are helpful: baseurl and templateurl. The first one returns a URL to our homepage and the second one generates a URL to the catalog of the current template. To associate a CSS file to our template located in css/catalog, we would use:
$this->addStyleSheet($this->templateurl() . '/css/style.css');
The addStyleSheet function is also useful for another bit of template functionality – CSS styles compression. We do not recommend adding CSS styles using other methods (such as with <link> tag).