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:
<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:
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
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.
<HEAD> <TITLE>CSS Example</TITLE> <link rel="stylesheet" type="text/css" href="HTTP://domain/file1.css"/> <link rel="stylesheet" type="text/css" href="HTTP://domain/file2.css"/> </HEAD>
Among the advantages of this method are:
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:
selector { property: value }
selector { property1: value1; property2: value2 }
selector1 selector2 { property1: value1; property2: value2 }
Each property deals with a specific characteristic of presentation, such as font, colour, text alignment, size, borders, spacing, layout, et cetera.
A simple selector is an HTML element (tag) such as BODY, H1-H6, P or EM.
A class selector is a method of allowing different styles for different occurrences of the same HTML element, as in:
code.html { color: #191970 }
code.css { color: #4b0082 }
This can be referenced with:
<code class="html">this is HTML code... </code> <code class="css">this is CSS code... </code>
It is also possible to declare a class without an associated element, as in:
.note { font-size: small }
In this case, the note class may be used with any element.
An id selector is similar to a class selector, but uses the indicator '#' to precede a name instead of '.', as in:
#foobar { text-indent: 3em }
Note that an id selector can only be referenced once within an HTML document, whereas a class selector can be referenced multiple times.
<p id="foobar">Mary had a little lamb, ...</p>
Multiple selectors can be used to specify a particular hierarchy of elements, such as:
table.foo td {...}
table.bar td {...}
This allows a <td> element in a table of class foo to be treated differently from a <td> element in a table of class bar.
To take maximum advantage of the benefits of CSS the Radicore framework has the following implementation:
/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.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:
<link rel="stylesheet" type="text/css" href="HTTP://www.radicore.org/demo/css/default.css"/> <link rel="stylesheet" type="text/css" href="HTTP://www.radicore.org/demo/subsystem/style_custom.css"/>
This tells the browser to use any styles it finds in demo/css/default.css, but to override them with any styles it finds in demo/subsystem/style_custom.css.
It is possible to replace the local CSS file style_custom.css with a different file for individual tasks with the following custom code within an object used by that task:
$this->css_files[] = 'alternate.css';
This will allow all tasks which use that object to have their own CSS file.
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 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.
The browser version is obtained using one of the following methods:
If you wish to change the look/theme/skin of your Radicore application here are a few simple guidelines:
/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.style_custom.css file.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:
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:
| 01 Jun 2011 | Added Browser-specific Stylesheets to allow different CSS styles to be defined to get around bugs in various (Microsoft) browsers. |
| 01 Dec 2010 | Modified Guidelines to include notes regarding the use of custom CSS class names for use at runtime. |