The Style Sheet's Bequest - An Inquiry Into Values - HTML with Style

An Inquiry Into Values

The Style Sheet's Bequest

In the property summaries I introduced in the previous tutorial, there where two entries that I left undiscussed: "Initial Value" and "Inherited."

The initial value is simple: The initial value of properties is a value it is recommended the user agent style sheet have. For most properties, it can be assumed that the user agent has these values in its style sheet. Before we go into inheritance, I have to make a clarification concerning types of values.

Specified, Computed and Actual values

The value of a property that is given by a style sheet declaration is the specified value of the property. This is not always useful for the user-agent. For instance, if the specified value of font-size is larger, it doesn't tell the user agent which font size to use, only that it should be larger than the default value for the element. The user agent will take the default font size of the element, scale it by an appropriate factor, and this will be the computed value of the property. However, this may not be a value that can be displayed in the medium provided. For instance, the user agent may have to round the font size to the nearest point, or round the border width to the nearest pixel. This will be the actual value of the property. Here is an example: Let's say the default font size for SPAN elements is 13 points. Now imagine we have the following in a document:

<SPAN STYLE="font-size: larger;">a span of text</SPAN>

The font-size property for this element has the following values: The specified value is larger, because that is what has been given. The computed value, assuming a font scaling factor of 1.5, is 19.5pt. However, the user agent probably cannot display a font of size 19.5 points, so the actual value will probably be something like 20pt.

Inheritance

We have already seen the concept of parent and child elements in HTML, so you should be familiar with them. The HEAD and BODY elements are children of the HTML element, the TITLE element is a child of the HEAD element, etc. Note that this would be true even if, say, the HEAD element start and end-tags where ommitted. This would not make the TITLE element a child of the HTML element. As I have noted before, omitting element tags is just a convenience for the author; the elements are still there.

In the following example, the two SPAN elements are children of the P element, because they are immediately contained in it. The EM element, however, is not a child of the P element. It is a child of the first SPAN element.

<P>This is <SPAN>a <EM>useless</EM> sentence</SPAN> split into
<SPAN>various parts</SPAN>.</P>

Now let's suppose we set the value of the font-size property on a DIV parent element to a generous 16pt, and at 12pt for the EM element, like this:

<DIV STYLE="font-size: 16pt;">
 <P>
  This is
  <SPAN>
   a
   <EM STYLE="font-size: 12pt;">
    useless
   </EM>
   sentence
  </SPAN>
  split into
  <SPAN>
   various parts
  </SPAN>
  .
 </P>
</DIV>

Since font-size is an inherited property, the children of the DIV element (in this case the P element) will inherit their value from their parent if it is not specified. The SPAN elements will also inherit this value from their parent P. The EM element, however, will not inherit the value, because it has its own value specified in the STYLE attribute.

Thus, if a property is inherited, the value of the parent becomes the default value for the child. Note, however that the inherited value is the computed value of the parent. To illustrate this, take the following example:

<DIV STYLE="font-size: 12pt">
<P STYLE="font-size: larger">A paragraph including <SPAN>a span of
text</SPAN> somewhere inside it.</P>
</DIV>

P inherits the font size 12pt from its parent. Now the relative size larger (the specified value) is applied to this, giving a computed value of, say, 18pt. The SPAN element inherits this computed value; if it inherited the specified value, it would have an even larger font, which is probably not what we want.

There are a few exceptions to this rule, such as the line-height property, which is discussed below.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial8/
Created: Oct 30, 1998
Revised: Nov 4, 1998