By default, you link one stylesheet to your design. But in real life templates you often need more than one. Its pretty easy to fetch them:

<link rel="stylesheet" type="text/css" href="{directory}nestedside.css" />
<link rel="stylesheet" type="text/css" href="{directory}menu.css" />
<script type="text/javascript" src="{directory}nestedside.js"></script>

The {directory} returns the path to your communities web directory.

If you created your template using a extension, you might be using a subfolder. Make sure to append it in this case:

<link rel="stylesheet" type="text/css" href="{directory}mytheme/nestedside.css" />
<link rel="stylesheet" type="text/css" href="{directory}mytheme/menu.css" />
<script type="text/javascript" src="{directory}mytheme/nestedside.js"></script>

Smarty uses the {} brackets as identifier for template tags. You will notice that using inline CSS or Javascript like …

<style type="text/css">
* {margin:0px; padding:0px;}
body { background-color: #eeeeee; }
</style>
<script type="text/javascript">
function sayHello(name) {
   alert("Hello "+name);
}
sayHello("World");
</script>

… will result in something like …

<style type="text/css">
* body </style>
<script type="text/javascript">
function sayHello(name) sayHello("World");
</script>

… which is definitely not what you wanted. Smarty tries to interpret everything between an open { and a closing } bracket as tag, strips it out and dumps an error in the bigace log if couldn't handle it.

Now the solution is to tell the template engine that it shouldn't parse parts of the template by using the {literal} tag:

{literal}
<style type="text/css">
* {margin:0px; padding:0px;}
body { background-color: #eeeeee; }
</style>
<script type="text/javascript">
function sayHello(name) {
   alert("Hello "+name);
}
sayHello("World");
{/literal}
</script>

Now Smarty nows, that it should leave everything between {literal} and {/literal} untouched.

Please read the Smarty documentation about delimiter and the literal tag.