If you want to customize a template ( logo.gif, color, font or background) and don´t know the css class, please use Firefox with the Firebug extension. Now you can analyze every CSS style for customizing the template CSS. Firebug Tutorial
Web Developer Tools
Whenever you try customizing our templates we highly recommend using Web Developer Tools like the famous Firebug plugin for Firefox. Other browsers like Chrome, Opera or Safari include very similar functionalities. Using these tools you have the possibility of easily trying out CSS styles right in your browser and inspecting existing styles to find their location in the theme's CSS files.
Editing CSS styles directly in your browser
Bring up Firebug by right-clicking on an interesting element and choosing "Inspect Element". On the left side you see the html-structure of your document (make sure you have the HTML-Tab enabled). Here you have the possibility to add and edit attributes and their values. Just double-click parts of the code to edit them.
Even more interesting is the right side of the plugin, here you see all css-styles for the selected element. If you want to edit something just double click on it, enter your new value and press enter when you are done. You will notice that Firebug opens a new empty line so you can not only edit existing styles but also add new ones. Firebug even shows you the computed style-values for the selected element, make sure you have activated the style-tab for our example.
Finding the right CSS file in your theme
As you might already have noticed, next to each css-selector (in our case .toolbar-outer) a filename and a line number are being displayed. Just hover over it and you will see the full path to the file. To learn more about your template's directory structure have a look at this tutorial.
Video, how to customize a Template
How to customize a Joomla theme with using the developer tools from Google Chrome or Firefox. Each modern Browser have a developer tool - Press "F12" - and inspect the "div" and styles.