/* hareket ÖĞelerİ ve menÜ seÇeneklerİ */
 
a.mainlevel{} /* menüdeki ana öğeleri biçimlendirmek için kullanacağımız bölüm */
a.mainlevel:link {}
a.mainlevel:visited {}
a.mainlevel:hover {}
 
#active_menu {} /* bu bölüm ise herhangi bir öğenin aktif olduğu andaki stilidir.sub öğeler ve ana öğeler için geçerlidir*/
 
ul#mainlevel-nav {}
ul#mainlevel-nav li{}
#mainlevel-nav a:link {}
#mainlevel-nav a:visited{}
#mainlevel-nav a:hover {}
 
a.sublevel{} /* bu bölümde alt öğe dediğimiz sub öğelerin stil seçicileri mevcuttur */
a.sublevel:link {}
a.sublevel:visited {}
a.sublevel:hover {}
 
.pagenavbar {} /*içerik sayfamızın sonundaki hareket öğelerinin stil seçicisi (“< < başlangıç <önceki sonraki > enson>>”)
gibi görünen bu hareket öğelerini bir linkten öteye taşıyabilirsiniz..*/
.pagenavbar:link {} /*sayfa sonundaki hareket öğeleri link haline geldiğindeki stilleri…(“< < başlangıç <önceki sonraki > enson>>”) */
.pagenavbar:visited {}
 
.pagenav {} /* isimdende anlayabileceğimiz gibi bu öğeler için metin ayarlamasını buradan yapabiliriz.
“< <  başlangıç <önceki sonraki > enson >>”  */
a.pagenav:visited {}
a.pagenav:hover {}
 
a.readon:link {} /*geniş içerik öğeleri için kullanılan “devamını oku” linkinin ayaralaması bu bölümden yapılabilir.*/
a.readon:hover {}
a.readon:visited {}
 
.back_button {} /*sayfaların sonunda beliren gerİ butonunu stil seçicileri*/
.pagenav_prev {} /*”Öncekİ” butonu için bu seçici altına özellikler atamanız gerekecektir.*/
.pagenav_next {} /*”sonrakİ” butonu için bu seçici altına özellikler atamanız gerekecektir.*/
 
.latestnews ul {} /*son haberler modülünün stil seçicisidir.standartta user1 pozisyonunda beliren bu modülü buradan ayarlayabilirsiniz.*/
.latestnews li {}
 
.mostread ul{} /*en popüler içerik öğelerinin gösterildiği modülün stil seçicisi.*/
.mostread li{}
 
/* İÇerİk sayfasi seÇİcİlerİ */
a.category:link {}
a.category:hover {}
a.category:visited {}
 
.blogsection {} /* section bloğundaki linklerin ayarlaması */
.blog_more {} /*section blogundaki devamını oku linkinin stili*/
a.blogsection:link {} /* link formatını ayarlayın… */
a.blogsection:visited {} /* bir öncekiyle aynı fakat ziyaret edilmiş linklerin diğerlerinden farklı gözükmesini istiyorsanız bu ayarlamayı yapmalısınız. */
a.blogsection:hover {} /* bir öncekiyle aynıdır aslında.fakat fare imleci bir linkin üzerine geldiğinde o linkin sekil veya renk değiştirmesini istiyorsanız bu ayarlamayı yapmalısınız. */
 
.componentheading {}/*bir componentin içerik başlığının ayarlamasını yapabilirsiniz.component başlıkları bu şekilde gözükecektir..*/
.contentheading {} /* direkt metin içeriği yayınlanırken joomla! nızın kullanacağı başlık ayarları. örneğin bir makale veya haber gibi..*/
.contentpane {} /* makale hariç tüm içeriği barındıran table in ayarları (componentler,
kategori listeleri, iletişim formları ve bunun gibi…).*/
.contentpaneopen {} /* yalnızca metin içeriğini tutan table in stil seçicisi.*/
.contentpagetitle {} /*tüm makale ve haberlerin başlıkları…*/
 
a.contentpagetitle:hover {} /*eğer haber başlıklarınızı link olarak ayarladıysanız onlara birde link ayarı vermelisiniz….*/
a.contentpagetitle:link {}
a.contentpagetitle:visited {}
 
.contentdescription {} /* kategori ve section(bölüm) lerin açıklamalarının sahip olduğu stil seçicisi*/
table.contenttoc {} /* birden fazla içerik öğesinin içinde bulunduran bir table sınıfı */
table.contenttoc td {} /* bir önceki tablonun td öğelerini ayarlamak için kullanılır. */
table.contenttoc th {} /* İçerik tablolarına tablo başlığı ayarlamak için kullanılan stil seçicisi*/
table.contenttoc td.toclink {} /* bir öncekiyle aynıdır fakat kçük tablodaki linklerin ayarlanması için kullanılır.*/
a.toclink:link {} /* içerik arasındaki navigasyonu sağlayan küçük linkerin özellikleri*/
a.toclink:visited {}
a.toclink:hover {}
 
 
/* joomla section(bÖlÜm)  lİstelemesİ*/
.sectiontableheader {} /* bölüm tablolarının başlıklarının ayarlanmasıdır.Örneğin anket bir bölüm tablosudur ve anket başlığını ayarlamak için bu seçiciyi kullanmanız gerekir.*/
.sectiontableentry1 {} /*ard arda beliren öğelerde işimize yarayacak kullanışlı bir özelliktir.Örneğin listelenen weblink lerde veya listelenen anket seçeneklerinde öğelerin birbirinden farklı görünmesini istiyorsak bu seçicilere değerler atamalıyız.*/
.sectiontableentry2 {}
 
 
/* joomla modÜl bİÇİmlendİrmesİ*/
table.moduletable {} /* klasik modül tablosunu ayarlamak için kullanılır */
table.moduletable th {} /* modül başlığını ayarlamak için kullanılan stil seçicisidir. */
table.moduletable td {} /* modülün içeriğinin stilidir. */
 
 
/* ve dİĞerlerİ */
 
/*tarih ve yazarlar*/
.createdate {} /* tüm içerik öğelerindeki oluşturma tarihinin stil seçicisidir. */
.modifydate {} /* değişikliğe uğrayan içerik öğelerinde belirir nezaman modifiye edildiğini gösteren ibarenin stil seçicisidir. */
.small {} /* “yazan… ” metninin stili buradan belirlenir. */
.smalldark {}/*anket sonuç sayfasında oyverenlerin sayısını belirten metne stil veren seçicidir. */
 
/* anketler */
.poll {} /* anket tablosunun içeriğini yani td öğesini ayarlayın. */
.pollstableborder {} /* anket tablosunun bordürlerini ayarlayın… */
 
 
/* weblinkler */
.weblinks{} /* weblinkleri bölümündeki link başlıkları ayarlamak için kullanılır. */
a.weblinks:hover {} /* hover i daha önce görmüştük mouse linkin üzerine gelinceeee….. hover oluyor :p */
 
/* feedler*/
.newsfeedheading {}

.newsfeeddate {}
.fase4rdf {}
 
/* arama sayfası */
table.searchintro {} /* bu stil seçicisi arama sonrası gelen raporda “sinanata için 5 sonuç” metninin bulunduğu tabloyu ayarlamak içindir.*/
 
 
/* joomla ÖnyÜz yÖnetİm panelİ ayarlari */
/* bir yönetici joomla! nızın önyüzünde giriş yaptığında bu stillerle belirlenmiş bir yönetime sahip olacak.metin düzenleyiciler ve aynı sayfadaki tab menüler için geçerlidir */
 
.ontab {}/* tab menu aktif olduğunda veya mouse imleci menu öğesinin üzerinde olduğundaki stilidir. */
.offtab {} /* tab menü öğesi deaktif olduğundaki stilidir. */
.tabpadding {} /* tab menu öğelerinin kenar boşluklarını ayarlamak için kulanılır */
.tabheading {}
.pagetext {} /*önyüzde içerik öğelerini editlerkenki metin şeklini buradan değiştirebilirsiniz

Gelelim template dosyasındaki css olayının düzenlenmesine :

Önce bir firefox browser indirip kurun : http://www.mozilla.com/firefox/

Sonrada web developer extension kurun : https://addons.mozilla.org/extensions/moreinfo.php?id=60&application=firefox

EditCss : https://addons.mozilla.org/firefox/179/

IE Tab : https://addons.mozilla.org/firefox/1419/

Converts selected ASCII to Unicode with right-click : https://addons.mozilla.org/firefox/1313/

colorzilla yı buradan https://addons.mozilla.org/extensions/moreinfo.php?id=271&application=firefox

Linkte güzel bir flash var css bilgilerini gösteriyor. Sari yuvarlaklara basinca yukarıda ilgili css bilgilerini veriyor : http://www.templatki.com/index.php?option=com_css_flash_overview&Itemid=88
 

Joomla css tutorials : http://www.joomlart.com/blogsection/tutorials.html

http://www.joomlaos.de/Joomla_CSS_Guide.html (Joomla ile beraber gelen yeni template içindeki css leri gösteriyor)