In its simplest terms a Joomla template controls the layout (modules)  and style (CSS Styles) of your content.

Your content which is the text, images, and menu items, is stored in the database - it is not stored in the template.

 

Joomla takes the content from the database, and using the parameters in the template it outputs the web page in HTML using PHP.

 

 

Modules can be thought of windows or areas within a website page.

Your Joomla template specifies where the modules are located on the page, and your modules can be turned on or off, giving you the option of different layouts on different pages.

 

Modules are limited by size to the capacity of the div (the controlling area) they are in. For example you may have more than 1 module in a right column but it cant expand into the central content area, however it can increase in height, or you may have the option of two horizontal content modules in the centre of your webpage and if you were to turn one of them off, the remaining one would be double the width.

 

You can see the modules positions in a Joomla template by going to Control Panel --> Extensions --> Template Manager. Select the template you want to use (usually the default). Select Edit --> Preview. This shows you all the module areas in your website.

 

 

CSS Style refers to the uniform elements of your content. Specifically it is how the text, images, and menu items, fonts, font sizes, tables and backgrounds and colours are displayed. The style is (usually) stored in one file of your template so it can be easily altered with the minimum of fuss.

 

If for example you had to use the font family, font size, and text formatting buttons like bold, italics, etc etc on your editor to repeat a similar style of  text (or any other element) time and time again, you could make a style shortcut in the template.

 

Every single use of formatting individual text creates extra unnessesary code, which you can imagine would build up in your website.

 

Also if you decided that you didn't like how it looked some time down the road you would need to find each instance of the formatting to change, whereas if it has be created in the template you only have to alter 1 piece of code and it would automatically change all instances.