Creating styles
Consider the following scenario:
- you realized a Contao website, with ZAD Style Switcher extension installed;
- all site styles are collected in the "main" stylesheet;
- you want to add a style switcher for choosing between seven different font sizes.
Then, you have to make seven stylesheets with different font size settings.
You could make seven copy of "main" stylesheet and alter only the font size settings. In this way you would get seven alternative styles, each one containing all that is needed for the site, thus making useless the "main" stylesheet. Using this strategy only makes sense if you want to perform a quick job and you have a very simple site, with a few styles. Otherwise you have to expect troubles: if you later want to change the color of a background, you will not have to change a single stylesheet, but seven ones!
The best solution is to take advantage of the opportunity to redefine styles: the "main" stylesheet will be executed first, while the style choosen by the user will be loaded later on, overriding only the font size settings and inheriting all the rest.
In our scenario, you can improve even more this technique: first of all you make sure that all font size settings in the "main" stylesheet are specified using relative units (%, em, ex). Then, you create a new stylesheet, named "font_100", with an initial value for the font size as follows:
body {
font-size: 100%;
}Now you can continue creating the remaining stylesheets:
- "font_70", with 70% as initial value;
- "font_80", with 80% as initial value;
- "font_90", with 90% as initial value;
- "font_110", with 110% as initial value;
- "font_120", with 120% as initial value;
- "font_130", with 130% as initial value.