You can add CSS styles or JavaScript code to the head of the HTML output, by using Joomla's built-in document functions.

Sourcerer already creates the $document (or $doc) object for you when it is needed. So you do not have to initialize this yourself.

CSS Styles or Files

To place a piece of CSS code, use:

{source}<?php 
   $mycss = "
      body {
         background-color: red;
      }
   "; 
   $doc->addStyleDeclaration( $mycss ); 
?>{/source}

To add a CSS File to the head, you can use:

{source}<?php
   $doc->addStyleSheet( JURI::root( true ).'/path/to/your/file.css' ); 
?>{/source}

Quick syntax PRO

With the Pro version of Sourcerer, you can add CSS files to the head of the document with an easier, shorter syntax. Simply use the css attribute (or style can also be used), and enter the path of the file:

{source css="path/to/your/file.css"}{/source}

You can even enter multiple files at once, separating them with a comma:

{source css="path/to/your/file1.css,path/to/your/file2.css,path/to/your/file3.css"}{/source}

JavaScript Scripts or Files

To place a piece of JavaScript code, use:

{source}<?php 
   $myscript = "
    alert('This is JavaScript');
   ";
   $doc->addScriptDeclaration( $myscript );
?>{/source}

To add a JS File to the head, you can use:

{source}<?php
   $doc->addScript( JURI::root( true ).'/path/to/your/file.js' ); 
?>{/source}

Quick syntax PRO

With the Pro version of Sourcerer, you can add JS files to the head of the document with an easier, shorter syntax. Simply use the js attribute (or script can also be used), and enter the path of the file:

{source js="path/to/your/file.js"}{/source}

You can even enter multiple files at once, separating them with a comma:

{source js="path/to/your/file1.js,path/to/your/file2.js,path/to/your/file3.js"}{/source}

With the Pro version, you can also use the Sourcerer editor button to help you enter your files and code.

Note: When you use the $document or $doc inside modules (Custom HTML modules), remember to switch on the "Prepare Content" option.