There is a thin dotted line on each example to show spacing for each object. Format this however you would like using .example.

FORMS SETTINGS
.button
The link buttons used in Joomla!
Example
.inputbox
All form input boxes.

.search
Formatting the form which holds search items: inputbox, search button.

NAVIGATION/MENU SETTINGS
a.mainlevel, a.mainlevel:link, a.mainlevel:hover, a.mainlevel:visited
This styling is for the items in the default MAINMENU. Note: it isn't advisable to keep main menu as horizontal or vertical list. Make it a flat list and style it as a unordered list.
Example
#active_menu
Current page id for highlighting on main menu.
Example
ul#mainlevel-nav, ul#mainlevel-nav li, #mainlevel-nav a:link, #mainlevel-nav a:hover, #mainlevel-nav a:visited
Style for the default TOPMENU. Links are an unordered list.
a.sublevel, a.sublevel:link, a.sublevel:visited, a.sublevel:hover
This styling is for menu items that has a parent.
.pagenavbar
Sets the style for the footer navigation ("<< Start < Prev Next > End >>") when they do not appear as hyperlinks (when only a few articles exist).
<< Start < Prev 1 Next> End >>
.pagenavbar:link, .pagenavbar:visited
Style for the footer navigation ("<< Start < Prev Next > End >>") when they become hyper links.
<< Start < Prev 1 2 Next> End >>
.pagenav
As the name implies, this is for formatting texts for those "<< Start < Previous 1 Next > End >>" links.
Example
a.pagenav, a.pagenav:visited, a.pagenav:hover
Links within .pagenav.
Example
.pagenav_prev
Style for the PREV button. Link is in a th in a table.
< Prev
.pagenav_next
Style for the NEXT button. Link is in a th in a table.
Next>
a.readon, a.readon:link, a.readon:hover, a.readon:visited
Style for the "Read More" link that is displayed for large content items
Read more...
.back_button
Style for the "BACK" button.
.latestnews ul, latestnews li
Style for latest news list - by default, latest news is user1 module. Links are an unordered list.
.mostread ul, .mostread li
Style for most popular list - by default, most popular is user2 module. Links are an unordered list.
CONTENT PAGE SETTINGS
a.category:link, a.category:hover, a.category:visited
Styles the category links on LINKS page. The number that follows it is .small. Links are an unordered list.
.blog_more, a.blogsection, a.blogsection:link, a.blogsection:visited, a.blogsection:hover,
Formatting the links in Blog section. .blog_more is the div surrounding the link and .blogsection is the actual link. Links are an unordered list.
.blogsection strong
The "More" text in blog section
More...
.componentheading
Title of the component being used to display the content. There are no h tags with this so it will style differently than the next two. It is sometimes wrapped by a table, so if you are having difficulties styling it, try td.componentheading.
Example
h1.componentheading
Title of category when showing catagory titles in content.

Example

h2.componentheading
Title of component when using directly in content (Example: Using URL menu item directly to component). Still researching every area this is used in.

Example

.contentitem h1
Title on content items.

Example

.contentheading
Title of the content, article, etc. being displayed. There is a rumored h2.contentheading somewhere, but I couldn't find it.
Example
.contentpane
Table that holds all non-article information (components, category lists, contact forms, etc). FAQ in default install is wrapped in this.
Example
.contentpaneopen
Table that holds the actual text for an article.
Example
.contentpagetitle
Title of articles.
Example
a.contentpagetitle:link, a.contentpagetitle:hover, a.contentpagetitle:visited
Title of articles when appeare as links.
.contentdescription
Formating the "DESCRIPTION" of sections, categories (News/Weblinks/Latest news...).
Example
table.contenttoc
Formating the table of the Tables of Contents for multiple pages content or article.
Example
table.contenttoc td
Same as above, used to format the td and table cells.
Example
table.contenttoc th
Same as above, used to format the th of "Tables of Content" ( normally Article Index).
Article Index
table.contenttoc td.toclink, a.toclink:link, a.toclink:visited, a.toclink:hover
Same as above, used to format toc link texts.
Example
JOOMLA! SECTIONS LISTINGS
.sectiontableheader
This is for styling the section table headers on a SECTION's page. Example: table header of "Date", "Item Title", "Author" and "Hits"?
Date
.sectiontableentry1
Example
.sectiontableentry2
Example
JOOMLA! MODULES FORMATTING

A quick note about Joomla! modules. There are 4 settings for Joomla! modules from within the template:
-1 strips out all wrapper code including the title leaving only your module content.
-2 surrounds the module content with a div and places an h3 tag around the title (standards compliant!)
-3 is the same as -2 except that it wraps it with three additional div tags so that you can style custom module backgrounds and borders.
-4 Makes the entire module a table and places the title within a th tag.

table.moduletable
[-4 style] Formatting the module wrapper. If you are having any issues styling then write it as table.moduletable.
Example
table.moduletable th
[-4 style] Formatting the module header, and the module titles.
Example
table.moduletable td
[-4 style] Formatting the table cells of the module table.
Example
.moduletable div, .moduletable div div, .moduletable div div div
[-3 style] Outer div wrapping for all modules using -3 style.
Example
.moduletable h3
[-2 & -3 styles] Module titles.

Example

.moduletable ul li
Style for lists within modules. Example: Polls.
  • Example
MISCELLANEOUS Dates and Authors
.createdate
For styling the date the content/articles are created under contents title.
Monday, 30 April 2007
.modifydate
Formating "Last updated on" text at the end of articles/contents.
Monday, 30 April 2007
.small
Formating "Written by:...." text.
Example
.smalldark
Found in poll result page, for " Number of Voters".. text.
Example
Pathway
.pathway_text
Div that wraps the pathway.
Home
span.pathway a
Text link within pathway.
span.pathway
Text within pathway.
Home
.pollstableborder
Set the border properties of the polls voting table (not sure why border isn't showing!)
Example
Polls
.poll
Format the poll container.
Example
.pollstableborder
Set the border properties of the polls voting table (not sure why border isn't showing!)
Example
Weblinks
a.category, a.category:link, a.category:hover, a.category:visited
To format the link's titles under the "Weblinks" section on the frontend. There is mention of a a.weblinks class, but I believe it has been retired. This is also used for listing news categories.
Example
Newsfeeds
.newsfeedheading, .newsfeeddate, .fase4rdf
I can't find any place that these are being used.
Search page
.searchintro
This is for formatting the box with "Search Keyword: test returned 4 matches" box that appears after you have entered a search value It appears on the mainbody with the search results. Text within it is wrapped in a b tag.
Search Keyword Joomla
Total 13 results found. Search for [ Joomla ] with Google
span.highlight
Highlighted words that match your search word(s).
Example
JOOMLA! TABBED FRONTEND ADMIN INTERFACE
The CSS below defines how the frontend admin interface when logged in.
Must be logged into the front end to view these styles.
#overDiv
Pop-up box giving details in front-end. This will change depending on your css. My css generally is like this to make it look right: #overDiv {font-size:.5em; margin: -21em 0 0 -27em;}
Example can't be included due to the absolute path needed for the javascript. Mouse over any edit button to see overDiv.
#toolbar
The id of the table which contains the SAVE, ACCEPT, CLOSE icons.
Example
a.toolbar
Styling the SAVE, ACCEPT, CLOSE icon area.
Example
.tab-row
Div that wraps tabs
Example
.dynamic-tab-pane-control, .tab-page, #content-pane
The classes and ID's that make up the bar that holds the tabs for IMAGES, PUBLISHING, and METADATA
Example
.tab
For styling of the "Tab" buttons when editing contents through the frontend as admin. This .ontab is the styling for the tab when it is active or after its "clicked".
Example
.tab .selected
For styling of the "Tab" buttons when editing contents through the frontend as admin. This .ontab is the styling for the tab when it is active or after its "clicked".
Example
.tab page #images-page table.adminform
Styles the tabbed page area under the selected tab.
Example
.ontab, .offtab, .tabpadding, .tabheading, .pagetext
There have all been mentioned before, but I haven't found any instance of them in the current Joomla!