Using CSS syntax in the style sheet
Explains the origins and syntax of CSS and how to apply CSS to Java™ objects.
Explains the conformity and divergences between the style sheet syntax and the CSS2 specification.
Explains the history of cascading style sheets.
Explains the CSS syntax briefly.
Overview
The
style sheet syntax conforms to the
CSS2 specification (Cascading Style Sheets level 2) with a few divergences.
The general format of a
style rule in a style sheet is therefore:
selector {
declaration1;
declaration2;
...
}
For visualization purposes, the
selector applies to objects in the data model and is used for pattern-matching; the
declarations apply to the corresponding graphic objects and are used for rendering.
Declarations have the form:
propertyName : value;
An example of a style rule is:
activity[completion > '0.25']{
background : red;
foreground : black;
}
This rule makes all activities that are more than 25% complete red with black text.
This section introduces and describes CSS briefly and then explains in more detail the version of CSS used in JViews Gantt. It also shows you the typical uses of CSS for customizing activities, constraints, and resource data series.
The origins of CSS
Cascading style sheets (CSS) are a powerful mechanism for customizing HTML rendering inside a Web browser. The CSS2 specification comes from the World Wide Web Consortium (W3C), and has now reached the status of a W3C recommendation.
The CSS syntax is a great improvement over the .Xdefault resource mechanism of the X Window System. The basic idea remains the same: matching a pattern and setting resource values. CSS is devoted to HTML rendering, matching HTML tags, and setting style values. XML is another CSS target, especially as used within the SVG (Scalable Vector Graphics) recommendation from the W3C.
The CSS syntax
This section gives a shortened presentation of CSS syntax. For a full description of CSS syntax, see
http://www.w3.org/TR/REC-CSS2/.
Style rule
A CSS document (a
style sheet) consists of a set of
style rules. Each rule starts with a
selector and is followed by a
declaration block enclosed by braces ({}). The selector defines a pattern, and the declarations are applied to the objects that match the pattern.
The basic example below shows how to apply the color red to all emphasis elements.
em { color : red; }
where emis the selector, and color : red; is a declaration.
It is possible to group several rules with the same declarations. Use a comma (,) to separate the selectors. For example:
em, b { color : red; }
Selector
The W3C states that “A selector represents a structure. This structure can be understood for instance as a condition that determines which elements in the document tree are matched by this selector, or as a flat description of the HTML or XML fragment corresponding to that structure.”
A selector is composed of one or more minimal building blocks. When two or more minimal building blocks are aggregated into a selector, they may be separated by
combinators.
A combinator is a single character the semantics of which are described in the following table. Extra spaces are ignored.
Transition | Meaning |
E F | Matches an F element that is a descendant of an E element. |
E > F | Matches an F element that is a child of an E element. |
E + F | Matches an F element immediately preceded by an E element. |
The following table shows the minimal building blocks of a selector. For an explanation of the Specificity column, see
Priority.
Pattern | Matching rule | Specificity |
e | Matches any element of type e. | 0-0-1 |
#myid | Matches any element with ID equal to myid. | 1-0-0 |
.myclass | Matches any element with class myclass. | 0-1-0 |
:myclass | Matches any element with pseudo-class myclass. | 0-1-0 |
[myattr] | Matches any element with the myattr attribute that exists and <> null. | 0-1-0 |
[myattr=”warning”] | Matches any element whose myattr attribute value is exactly equal to warning. | 0-1-0 |
[myattr~=”warning”] | Matches any element whose myattr attribute value is a list of space-separated values, one of which is exactly equal to warning. | 0-1-0 |
* | Matches any element. | 0-0-0 |
For example, the following line:
P.pastoral.marine { color : green; size : 10pt; }
matches <P class="pastoral marine old">, sets the color of the paragraph to green, and sets the font size to 10.
All rules start and end with an implicit "*" pattern. This means that a selector can match anywhere inside the hierarchy.
Declaration
Declarations are key-value couples. The separator is a colon (:). Each declaration is terminated by a semicolon (;). The key should represent a predefined graphic attribute ( foreground, size, font, and so forth) and the value is a literal whose type depends on the key (such as red, 10pt, or serif ). All key-value pairs are String. Enter values in single or double quotation marks, but use single quotation marks when the values contain non alphanumeric characters.
Inside quoted declaration values, you can use Unicode characters in two ways:
If the CSS file starts with a line '@charset "UTF-8";' and the Unicode characters are printable, you can write or paste Unicode characters with UTF-8 encoding directly in the quoted strings.
You can include them using backslash escape syntax with hexadecimal digits.
For example, \20AC is a Unicode escape sequence denoting the Euro sign. However, if the next character after the last digit in the escape sequence is an unrelated hexadecimal digit, you must insert a space before the next character, as a separator. So if you wanted to write €1000, you would enter \20AC 1000.
Priority
The priority of the rules depends on their relative specificity. Specificity is computed as three numbers, a - b - c (in a number system with a large base).
These numbers represent:
a is the number of ID building blocks in the selector
b is the number of classes, pseudo-classes, and attributes
c is the number of element types
The following table shows the information used in priority order, with the most specific first.
Selector | Specificity |
#title > #author.full | “2-1-0” |
#title | “1-0-0” |
P.intro P.citation | “0-2-2” |
UL OL LI.red | “0-1-3” |
When two rules give the same specificity number, the order of appearance gives the priority: the last seen overrides previous rules.
Priority is used as follows:
1. The declarations of all rules that match the same objects are merged.
2. The priority is applied only if there is a conflict (same key value) within the merged declaration block.
Cascading
Cascading consists of supplying several sources for the style. In HTML environments there are three sources: the browser, the user, and the document. Cascading fixes another weight according to the source of the style. Document style takes precedence over user style, which takes precedence over browser style when the specificity number is the same.
There are two more tokens, !important and inherit. They are used to alter the cascading priority inside declarations.
A style sheet can also import other sheets (internal cascading). The syntax is:
@import "[url]";
Import statements must precede the first rule in a style sheet. Priorities of the imported rules are computed as if the rules replace the import statements. The following example shows the import.
@import "common.css";
Inheritance
The main principle of CSS is the inheritance of declarations. Once the rules are checked against the source document, the matched declarations are sorted according to the priority order of the rules. The declarations are merged, with higher priority settings overriding lower ones in case of conflict.
The resulting set of key-value pairs represents all the declarations that the style sheet applies to a particular document.
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.
