This article is about creating of CSS file draft which is for you Joomla template. Instead of creating CSS template based on ready design we will create an empty CSS file for Joomla first. This is to anybody was able to use the CSS file modifying it on him own.

Let’s start from the basis empty template without any page – just font stylization. It will not be the final CSS file and there is no need to complete all styles there.

Such empty CSS file possesses the following features:

CSS shortness

A reduced form of styles recording at the beginning of every definition is used. As soon as you look into the styles, remove full version replacing them with the reduced ones. Their syntax is:

font: font-size |font-style | font-variant | font-weight | line-height | font-family

For example:

font-size:100%; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; line-height:130%em;

will be replaced with

font: 100%/130% Arial,Helvetica,sans-serif italic bold;

Global CSS reset

There are some parameters defining features of the rest of the styles at the beginning of Joomla CSS file. We should pass them over. The first parameter of global style is:

* { margin: 0; padding: 0; } body {…….. font-size: 76.1%;……..

Now all style elements are assigned with null shift and padding and then font size is set to 76,1%. Font size is selected as to the most browsers consider them concentrated.

Headers tags and Joomla CSS headers

Sometimes it is necessary to disable Joomla headers and use h1/h2 tags in the content. It is required for SEO. You can get the analogous result saving Joomla headers visible but hiding them through CSS and removing links to them. For example:

display: none;

height:0;

text-indent: -3000px;

We’ll use hX tags for sorting and standardization of headers (regardless of are they visible or no). For example:

h1,.componentheading {…

Round corners of Joomla

There is a code for rounding of corners at the end of CSS file. The analogous technology is used in joomla.org, it requires module suffix would equal -3 in index.php file.

Done! Now we have the empty Joomla template.