When you're starting a page or a site, it's cool to put your style and javascript in the head. You can do that like this :
for CSS :
<style type="text/css">
rules go here
</style>
for javascript :
<script type="text/javascript">
script goes here
</script>
When you're ready however - especially when you have more than one page - you should put your style and script in external files. Save the CSS code (without the tags) in a file with a .css extension and save the javascript code (also without the tags) in a file with a .js extension and link to them like this :
for CSS :
<link rel="stylesheet" type="text/css" href="style.css">
for javascript :
<script type="text/javascript" src="script.js"></script>
In this way, you can change the style of your whole site very easily and you can build a javascript library, if necessary, which will be available for use on any page.
Of course, your files need to actually be called 'style.css' and 'script.js' for this to work - I actually think it's better if you give them a more descriptive name, but that's just me. For example, instead of calling my stylesheet for this site 'style.css', I called it 'lager.css' to reflect the fact that you get to see a big glass of beer.
How to make it external also so you have not to edit all the pages that share that piece of code when you want to change it?
With PHP
What about pieces of html code you repeat over some pages in your site? How to make it external also so you have not to edit all the pages that share that piece of code when you want to change it?