AR System server cascading style sheets and rules

This topic assumes that you are familiar with HTML and CSS. Keep in mind that not all attributes work with every browser. Before using a CSS attribute, verify that it works for your browser.

CSS rule syntax

Each CSS rule consists of a selector, followed by properties and values enclosed in braces:

Each property/value pair is separated by a semicolon. 

A selector can be an HTML tag (such as body, p, or td ), a unique class, such as btn3d, an ID such as #toolbar, or a combination of these and other selector types.

CSS specificity

You can combine selectors to apply styles to an element. For example, the following three selectors are increasingly specific:

• .note
• a.note (more specific)
• a.note.div (more specific)
• a.note[name=bentley] div (most specific)

In AR System, each element's style is controlled by CSS rules, which are defined in one or more CSS files. The system CSS files are located under the Resources directory of the Mid Tier.

CSS order of precedence

The style that you ultimately see for an element is created dynamically by the Mid Tier and the browser, based on a hierarchy of multiple style sheets, plus any inline styles. 

Styles are applied in downward order from the top of the diagram in the figure below. Inline styles always override other CSS rules, and application-specific styles override system styles. The standard style sheet usually contains rules for all elements with properties that work for all browsers. The other style sheets might repeat or add a rule with different or unique properties specific to a browser client, application, locale, or user. 

Order of precedence for applying styles 

Properties that are not redeclared in succeeding style sheets are applied from the previous declarations.

Suppose you have a style rule called input.text that is declared in the first four source files:

• System style sheet:

  input.text {background-color: red; color: black;}

• System, browser-specific style sheet:

  input.text {border: 1px solid green}

• Application, standard style sheet:

  input.text {font-family: Arial, sans-serif; color: blue;}

• Application, browser-specific style sheet:

  input.text {font-size: 8px; border: 2px;}

The resulting rule is:

In this example, the style declarations from the application style sheets take precedence over those from the system style sheets. For instance, the color: blue declaration from the standard application style "wins" over the color: black declaration from the system style sheet. 

The Mid Tier might assign multiple CSS rules to an HTML element, for example:

Style rules take precedence in right-to-left order. Rules to the right take precedence over rules to the left. Properties that are not declared are carried over and reapplied to succeeding style sheets.

Default style sheets provided with AR System server

The following table lists the CSS files available and their directory locations within midTierInstallDir (C:\Program Files\BMC Software\ARSystem\midtier on Windows and /opt/bmc/ARSystem/midtier on UNIX).