Tony Marston's Blog About software development, PHP and OOP

The use of Cascading Style Sheets within Radicore

Posted on 21st April 2008 by Tony Marston

Amended on 1st June 2011

Introduction
CSS syntax
CSS within Radicore
- Global Stylesheets
- Local Stylesheets
- Script Stylesheets
- Browser-specific Stylesheets
Guidelines
References
Amendment History
Comments

Introduction

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:

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:
<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.

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:
<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.

CSS syntax

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.

CSS within Radicore

To take maximum advantage of the benefits of CSS the Radicore framework has the following implementation:

Global stylesheets
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.
Local stylesheets
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:

<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.

Script Stylesheets
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.

Browser-specific Stylesheets
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.

The browser version is obtained using one of the following methods:

Guidelines

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

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:

  1. XSL stylesheet.
  2. Screen structure file.
  3. _cm_formatData() method.

References


Amendment history:

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.

counter