In web development, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. In the Radicore framework CSS files are used to describe the presentation of all XHTML documents.

CSS is used to help readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

There are three basic methods of specifying style in an HTML document:

Inline:

This is where each element contains its own style definitions, as in:

<p><font face=times size=3>Mary had a little lamb, its fleece was white as snow, ...</font></p>

The disadvantage of this method is that every occurrence of each element contains its own style definitions, which means:

The document is very large, which increases the time taken to download it from the server to the client.

To change the style of an element would require the same change to be made in every occurrence of that element.

Embedded stylesheet:

This is where each document contains style information which is defined once at the start of the document, and which then applies to every occurrence of the named elements within that document, as in:

Although this method does reduce the size of each document, there is still a separate copy of the stylesheet within each document, so to make global changes to a site would require changes to be made to all documents within that site.

External stylesheet:

This is where all style information is contained within an external file, and each HTML document contains a link to that external file, as in:

Each HTML document is as small as it can be, which reduces the time taken to download it.

Each CSS file can be shared by many HTML documents, so each file can be held in the browser's cache after it has been downloaded the first time so that it does not have to be downloaded again for each HTML document which references it.

It is possible to change the style of every page within a site simply by changing a single CSS file. This can either be done by changing the contents of that file, or by switching to a different file.

Note that it is possible to link to more than one stylesheet. This means that the specifications in a later stylesheet will override those in a previous stylesheet so that the final set of rules which are applied are an amalgamation of all the rules within all the stylesheets. This is where the term "cascading" in "cascading style sheets" comes from.

A stylesheet consists of a series of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;). Here are some examples:

These will apply their styles to every HTML document within the framework. They can be found in the /radicore/css/ folder. Each user can choose which one to apply to their sessions by pressing the "Session data" button on their Home Page, which will activate the Update Session Data screen. The dropdown list for the "Theme/Style" field will identify every file that it finds in that folder with the ".css" extension. By switching to another file the user can therefore change the "look" or "skin" of every page that is generated. The choice is stored in a cookie so that it will be used for all subsequent sessions.

The Radicore framework consists of a series of subsystems, each of which can have its own local CSS file with the name style_custom.css. This file will only be used when running a task within that subsystem, and can be used either to override a rule found in the global stylesheet, or to provide a new rule.

If you view the source of any HTML output produced by the Radicore framework you should see something like the following:

If you view the source of any HTML page produced by the Radicore framework you should see that it is broken down into a series of separate div areas, each with its own class name. This allows an element within each div to be separated from the same element within a different div so that it may be given a different style.

In addition the body element of each page is given a class name which represents the script name, but without the trailing '.php' and with all parentheses '(' and ')' replaced with underscores '_'. This allows each individual page to be given its own CSS style rules, as in:

body.timesheet_entry_multi2_a th {
font-size: 90%;
}

This states that the th element (table header) for the script timesheet_entry(multi2)a.php should use a font size which is 90% of the standard size.

Although in theory all CSS styles should be rendered identically in all browsers it is a sad fact of life that some browser vendors (Microsoft, this means YOU!) choose to interpret the specifications in their own perverted way. To get around this problem application developers need a way to define CSS styles which are implemented depending on which browser the client is using at runtime.

Although there are several ways to implement browser-specific CSS the method employed in the Radicore framework is to put the CSS for a specific browser into its own file in the /radicore/css/ folder with the name browser.<X>.css where 'X' identifies both the browser and version number, as in 'ie6', 'ie7', etc.

If you wish to change the look/theme/skin of your Radicore application here are a few simple guidelines:

Do not modify the files found in the /radicore/css/ folder as they may be overwritten in new releases. Instead you may create as many new files as you like so that your users have a wider choice of possible themes.

CSS rules which you wish to be applied to an individual subsystem should be added to that subsystem's style_custom.css file.

CSS rules which you wish to be applied to a particular script should be placed in the style_custom.css file with a selector which identifies that script name.

As well as the standard class names which are built into the various XSL stylesheets it is also possible to specify additional classes for use at runtime:

You may specify class names within the screen structure file. These will apply to the specified fields in all rows.

You may specify class names within the _cm_formatData() method. These will apply to the specified fields in the current row only.

It is possible for a field to have a class attribute specified with the XSL stylesheet, within the screen structure file and within the _cm_formatData() method. Multiple class names can appear in a single class attribute within the HTML document with a space separator, as in the following example:

<td class="class1 class2 class3">.....</td>

If multiple class names are specified they will be applied in the following order: