General content styles

The general content styles are not specificly related to Joomla. They are general htlm elements like body, a, h1, p, ol, ul, input, button, etc.

body

The body element is already defined in the reset- and default font styles. Here you can overwrite the style you want to apply for your website, For our example website we change the default font Arial to Verdana and use another font size, line height and font color. This style we will also apply to the paragraph (p) and list elements (ul, ol). In cases where there are no <p>, <ol> or <ul> elements present in rhe code, the body style will apply the style.

For the example website we have defined the following styles.

body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 16px;
   color: #660000;
}

Heading, paragraph and list styles
Joomla uses specific classes and id's for elements, next to the general elements like headings (h1, h2 etc.). These classes are for example component heading and content heading (for Joomla 1.5). You can find these styles in de Joomla 1.5 styles in the menu on the left side of the page.

For the example website we apply the following styles.

h1 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 22px;
   font-weight: bold;
   color: #660000;
   line-height: 22px;
   margin: 0 0 10px 0;
}

h2 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   font-weight: bold;
   color: #660000;
   line-height: 20px;
   margin: 0 0 3px 0;
}

h3 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
   font-weight: bold;
   color: #660000;
   line-height: 18px;
   margin: 0 0 3px 0;
}

h4 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #660000;
   line-height: 16px;
   margin: 0 0 3px 0;
}

h5 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #660000;
   line-height: 14px;
   margin: 0 0 3px 0;
}

h6 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #660000;
   line-height: 12px;
   margin: 0 0 3px 0;
}

p, ol, ul {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 16px;
   color: #660000;
   margin-bottom: 15px;
}

/* Ongenummerde en genummerde lijsten */
ul {
   padding: 0 0 0 15px;
   list-style: disc;
}

ul li ul {
   list-style: circle;
}

ol {
   padding: 0 0 0 20px;
   list-style: decimal;
}

ol li ol {
   list-style: lower-alpha;
}

Link styles

For the example website we apply the following styles.

a {
   outline: 0 none;
   text-decoration:
   underline; color: #660000;
}

a:hover {
   outline: 0 none;
   text-decoration: none;
   color: #ff0000;
}

Input, select and button styles
Don't use general styles for elements like "input", "button" or "select". Always use them with a class or ID from Joomla. Most of these elements can be styled specifically. You can find these classes and ID's that Joomla uses for these elements on this site.

Note
Input, select and button elements are styled very different in browsers. If you want to know a bit more about the styling for these elements you can visit the following website: http://www.456bereastreet.com/lab/styling-form-controls-revisited.

The general classes for these elements in Joomla are:

input (input.inputbox)
select (select.inputbox)
button (input.button & button.button)

The reset styles have reset these elements (padding 0 en margin 0). We want to correct the reset styles on buttons, because there is hardly any space left to click on with the mouse. To correct this we apply some padding for the Joomla buttons. These styles will overwrite the reset styles.

input.inputbox {}
select.inputbox {}

button, input.button, button.button {
   padding: 1px 7px 1px 7px;
}