The main style sheet of a theme that Simple:Press is where the CSS classes and IDs are defined for the theme.
Simple:Press loads the Style sheet into the webpage on every page view. The Style sheet used also ‘looks’ for which overlay file that you have set, uses that information and then includes a reset.css file. The reset.css file clears out some of the previous CSS to avoid CSS leakage.
The template files in a Simple:Press theme are what actually create the main layout. These files are found in a theme’s /template folder. When a template file is loaded on a page it uses the same predetermined CSS classes and ids that are contained in the main style sheet CSS.
If you were to look at a source file on a Simple:Press forum page you will see something like this.
<link rel="stylesheet" type="text/css" href="http://yoursite.com/wp-content/sp-resources/forum-themes/default/styles/default.php?color=gray" />
This would be the style sheet in use for the forum display area.
The style sheet is composed of a reset.css file included in every theme we supply and the CSS taken from either the php file and it’s corresponding overlay file or in the case of the CSS-Only theme the CSS in the css-only.css file.
Simple:Press then builds the stylesheet and includes it on the webpage. In the example above you would see that it used a default theme’s file and a corresponding ‘gray’ overlay file.
A CSS file by itself does nothing. What is does is create rules that something else can use for layout and display. As mentioned above the template files of a theme actually add the rule to the HTML output. Then when showing the output your web browser checks the CSS file to see if there is a rule that says how it should be displayed.