Introduction

The styles of your Joomla website are determined by:

• default styles of the visitors browser,
• "Inline" styles from the Joomla source documents,
• Joomla style (CSS)-documents.

Default styles of the browser

Every browser has its own default styles. You have to take that style in account. To reset the default styles of a browser you can use the "Reset- and default font styles" from this site. However you will never succeed in having exactly the same layout in all different browsers. That's why it is very important to test your website in different browsers. You can find information on this website about testing your website.

Inline styles

There are many inline styles in the Joomla source documents (PHP). In Joomla 1.6/1.7 these inline styles are strongly reduced, so you have more freedom to apply your own styles. The inline styles are mentioned on the pages and content involved. You better not change the source documents of Joomla, because when Joomla is updated, your changes will be lost. You better try to overwrite inline styles in your template CSS document.

Joomla style (CSS)-documents

The default Joomla system uses the following CSS documents:

• templates/system/css/system.css
• templates/system/css/general.css
• templates/your_template_directory/css/template.css (the document that is used bij the active template).

The styles from the system CSS documents will be applied first by the visitors browser. The template CSS information will be applied last. If you want to change styles from the CSS system documents you need to overwrite them in your template CSS document, and change them in the system source documents.

Style plan

If you design a new template or changing an existing one, it is recommended to follow the menu on the left site as a style plan. The menu-items have a specific order like a structured plan. The subjects of the style plan are.

Define the following styles sequentially:

1. Reset- and default font styles;
2. General content styles;
3. Template styles;
4. Joomla content styles;
5. Joomla component/module styles.

For all the subjects you can find detailed information and examples for applying styles voor Joomla 1.5 or Joomla 1.6/1.7. For this website we will follow the style plan to create an example template and style it completely.