Nivuahc.com

Let me first start out by telling you that I am not an expert by a long shot. I've only been hacking away at templates for about a month at the time of this writing. I'm sure that there are some ideas that I have in my head that don't quite jibe with the entire community of web developers and code slingers. That being said, everything I'm going to explain here has been tested and found to work perfectly by me and a few others. I most likely have some of the terminology wrong, I probably even have a skewed view of exactly what is going on behind the scenes. I'm writing this for other people like me who are just into the learning process, however, and I'm doing it because it helps me to understand it all much better. If you are a web developer/expert code slinger/l33t haxor and you have issues with anything you read here, by all means let me know. I'd like to present the information as correct as possible. We all got that? Good... let's continue then.

Templates for Joomla! usually consist of 3 basic things.

Your index (index.php)
Your Cascading Style Sheet (template_css.css)
Your images (located in the template_name/images/ folder)

The index is the first thing that your visitors web browser loads and it contains all of the information needed to display your sites graphics and text. Among other things, it tells the browser where to find your Cascading Style Sheet (CSS) and it tells the browser which modules to load. It can also define the layout and positioning of your various site module with tables, but for this example, we'll be focusing on a template who's layout is defined in the CSS.

Your CSS tells your browser how to display the different elements of your site such as font style, color, weight, etc... with classes. In other words, if we have a class defined in our CSS called address such as

.address {
  color: #000;
  font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
}

We can apply that format to an item in our template by assigning the class "address" to it. Anything assigned to that class will be shown as a black font, 10px in height and using one of the listed fonts.