ICT Home's

Specified, computed, and actual values

Author: Abd Rauf // Category: Tutorial

Assigning property values, Cascading, and InheritanceOnce a user agent has parsed a document and constructed a document tree, it must assign, for every element in the tree, a value to every property that applies to the target media type.

The final value of a property is the result of a three-step calculation: the value is determined through specification (the "specified value"), then resolved into an absolute value if necessary (the "computed value"), and finally transformed according to the limitations of the local environment (the "actual value").

6.1.1 Specified values

User agents must first assign a specified value to a property based on the following mechanisms (in order of precedence):

If the cascade results in a value, use it.
Otherwise, if the property is inherited, use the value of the parent element, generally the computed value.
Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

Since it has no parent, the root of the document tree cannot use values from the parent element; in this case, the initial value is used if necessary.

6.1.2 Computed values

Specified values may be absolute (i.e., they are not specified relative to another value, as in 'red' or '2mm') or relative (i.e., they are specified relative to another value, as in 'auto', '2em', and '12%'). For absolute values, no computation is needed to find the computed value.

Relative values, on the other hand, must be transformed into computed values: percentages must be multiplied by a reference value (each property defines which value that is), values with relative units (em, ex, px) must be made absolute by multiplying with the appropriate font or pixel size, 'auto' values must be computed by the formulas given with each property, certain keywords ('smaller', 'bolder', 'inherit') must be replaced according to their definitions.

In most cases, elements inherit computed values. However, there are some properties whose specified value may be inherited (e.g., the number value for the 'line-height' property). In the cases where child elements do not inherit the computed value, this is described in the property definition.

6.1.3 Actual values

A computed value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the computed width. The actual value is the computed value after any approximations have been applied.

6.2 Inheritance

Some values are inherited by the children of an element in the document tree. Each property defines whether it is inherited or not.

Suppose there is an H1 element with an emphasizing element (EM) inside:

The headline is important!

If no color has been assigned to the EM element, the emphasized "is" will inherit the color of the parent element, so if H1 has the color blue, the EM element will likewise be in blue.

To set a "default" style property for a document, authors may set the property on the root of the document tree. In HTML, for example, the HTML or BODY elements can serve this function. Note that this will work even if the author omits the BODY tag in the HTML source since the HTML parser will infer the missing tag.

For example, since the 'color' property is inherited, all descendants of the BODY element will inherit the color 'black':

BODY { color: black; }

Specified percentage values are not inherited; computed values are.

For example, given the following style sheet:

BODY { font-size: 10pt } H1 { font-size: 120% }

and this document fragment:

   A large heading

the 'font-size' property for the H1 element will have the computed value '12pt' (120% times 10pt, the parent's value). Since the computed value of 'font-size' is inherited, the EM element will have the computed value '12pt' as well. If the user agent does not have the 12pt font available, the actual value of 'font-size' for both H1 and EM might be, for example, '11pt'.

6.2.1 The 'inherit' value

Each property may also have a specified value of 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent. The inherited value, which is normally only used as a fallback value, can be strengthened by setting 'inherit' explicitly.

In the example below, the 'color' and 'background' properties are set on the BODY element. On all other elements, the 'color' value will be inherited and the background will be transparent. If these rules are part of the user's style sheet, black text on a white background will be enforced throughout the document.

BODY {    color: black !important;    background: white !important; }  * {    color: inherit !important;    background: transparent;

Comments (0 )

A brief CSS2 tutorial for XML

Author: Abd Rauf // Category: Tutorial

CSS can be used with any structured document format, for example with applications of the eXtensible Markup Language [XML10]. In fact, XML depends more on style sheets than HTML, since authors can make up their own elements that user agents don't know how to display.

Here is a simple XML fragment:


 Fredrick the Great meets Bach
 Johann Nikolaus Forkel
 
   One evening, just as he was getting his
   flute ready and his
   musicians were assembled, an officer brought him a list of
   the strangers who had arrived.

To display this fragment in a document-like fashion, we must first declare which elements are inline-level (i.e., do not cause line breaks) and which are block-level (i.e., cause line breaks).

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

The first rule declares INSTRUMENT to be inline and the second rule, with its comma-separated list of selectors, declares all the other elements to be block-level.

One proposal for linking a style sheet to an XML document is to use a processing instruction:



 Fredrick the Great meets Bach
 Johann Nikolaus Forkel
 
   One evening, just as he was getting his
   flute ready and his
   musicians were assembled, an officer brought him a list of
   the strangers who had arrived.

A visual user agent could format the above example as:

[D]

Notice that the word "flute" remains within the paragraph since it is the content of the inline element INSTRUMENT.

Still, the text isn't formatted the way you would expect. For example, the headline font size should be larger than then rest of the text, and you may want to display the author's name in italic:

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Adding more rules to the style sheet will allow you to further improve the presentation of the document.

Comments (1 )

Introduction to CSS2; A brief CSS2 tutorial for HTML

Author: Abd Rauf // Category: Tutorial

In this tutorial, we show how easy it can be to design simple style sheets.  For this tutorial, you will need to know a little HTML (see [HTML40]) and some basic desktop publishing  terminology.  

We begin with a small HTML document:

Bach's home page