Joomla Template Kit Visual CSS Reference 1.0.X

Building on the CSS and the DOM there are many sections to the Joomla CMS.
We give you a foundation from which to start from.
Each section is broken down in as close to top down as possible.
See the sections menus on the left :

1. Free Guide To Joomla Css
2. General settings
3. Layout settings
4. Navigation section
5. Standard module table
6. Content - sections & categories
7. Form section
8. Tabbed editing

Joomla uses standard CSS you can use any styles you like.
Joomla contains core class’s that are used for module and component formatting
You may add to theses styles as you would any style sheet.

What is a Module?
Modules are containers blocks of data that are zoned and are included inside the template. They can hold any type of information. There are modules and module zones and blocks. A module in and of it self can be menu system a visitor poll etc.. a module zone is a place that you put the module like the left side of the page in a template. A Block is say the “top block” which is called a module position in Joomla can have many modules assigned to one block in a stacking order so the menu first and the poll is last so one block/position can store many modules.

Modules have a wrapper or I should say most have a wrapper.
A wrapper is a HTML code that could be a table it could be a DIV element and in one case no wrapper at all.

The wrapper can have special formatting applied to it but in most cases the that formatting is it part of the see “STANDARD MODULE TABLE” section. Also see extension help file for “Module Menu Styles” with shows the HTML code to the wrapper.

An example is the “.moduletable class”. Which in our style sheet is under
“STANDARD MODULE TABLE” this class is used by default in all of your core modules.
In DOM & CSS  you can give an HTML element formatting globally.
Lets say table element “table{Some formatting;}” in Joomla this works the same way.

In our example we use “table.moduletable{ Some formatting;}” this means the any table element in the module class will have
“{ Some formatting;}”. Now as we should all know tables are made up of more then a table tag they also have “<TH>”<TD> and so on. So lets say we what to add formatting to the <TH> tag for a Table Header.

This means that you can override any style in almost any element in Joomla.
But you have to added the code class suffix to the style sheet and applied to the elements pages, sections, modules, categories etc.. if not the stock core styles will be applied by default.

What is Component?
A component is like a small application onto itself it displayed in Joomla.
There are core components and third party components. Core components share style sheets class’s for the most part. Which can be found in the CONTENT - SECTIONS & CATEGORIES section of our sheet. As with any CSS style class you can build on any element level so could override a global style by applying a local style to the class element.

For example you may have UL - Unordered list that is a general rule for all UL’s
on your page. Which would apply to a components styles by default. But this UL can be overridden by using “.blog UL{}” this would take over the style of the UL’s for this component class only all other would have the global UL formatting.

Third party components some use the cores styles some don’t you have to look at the documentation for the third party component.

We cover the core component class’s in the CONTENT - SECTIONS & CATEGORIES of the style sheet.

What we give you is a stander CSS style sheet the gives you a foundation for
to build on as you can see we can’t add every element because we don’t know what your designing.
So we give some samples to build on yourself.

Reference and Examples.
Any Standard Joomla Class can have:
| Optional HTML Element | CMS-CORE-CLASS | Optional HTML Element | .suffix or -suffix

All legal

.blog{}
table.blog{}
.blog th{}

Module Class Suffix
.moduletable.blueheader th{link to image;}

Component with Suffix
.blog.greytable{}
. componentheading-movingGif{}

Now a good question would be what are the core class?
It hard not give you a very long list.

“.moduletable” your going to use more the any core class see
STANDARD MODULE TABLE section.

Also under the CONTENT - SECTIONS & CATEGORIES look for the top class in order
.blog that would Identify a core class.

Another is “.mainlevel” this controls the formatting for the menu system. It also has a “.sublevel” for sublevel menus of the “.mainmenu” when you like to add new menu to Joomla and give that menu formatting other then “.mainlevel” use a class suffix. “.mainlevel.topnav{}” works just like the module example.
I would like to cover more of the menu but it’s a chapter itself on working the menu not the formatting more the menu system this should be enough to cover it as CSS goes. See NAVIGATION SECTION

Here is the base template_css.css file that comes with the extension.
We show you an image cutout of which part of Joomla is affected by what code sections.

Source: http://www.m65.net/articles-joomla!-knowledgebase-free-guide-to-joomla-css-51.html