| Previous | Table of Contents | Next |
In this chapter, you learn how styles applied to particular HTML elements are passed down to the tags contained within them.
Applying styles to your documents effectively and efficiently requires an understanding of the rules by which styles affect the appearance of a document. One of the primary reasons for using styles is to reduce the amount of coding needed to achieve the desired effect. This can be done primarily because styles that are applied to one element of an HTML document are inherited by the other elements that fall between the tags.
Element In HTML terms, an element is any part of an HTML document that can be distinguished from the whole of the document by reference to a particular HTML tag. For example, a paragraph element is contained between <P> tags. Tags that offset their content from other elements with line breaks (such as paragraphs and headlines) create block level elements. Tags that do not force line breaks (like <STRONG> and <B>) create inline elements.
If style properties were not inherited, it would be necessary for you to define the same properties over and over for many different selectors. You would be writing the same amount of code as if you were using traditional HTML tags for each individual element but storing the code in a different place.
To illustrate this, take your SAMPLE.HTML file from the end of Lesson 2 and add a style definition for the <BODY> tag. This creates a file that appears as follows:
<HTML>
<HEAD>
<TITLE>10-Minute Guide to HTML Style Sheets</TITLE>
<STYLE>
<!--
H1 {font-size: 24pt; color: red; text-align: center}
H2 {font-size: 20pt; font-style: italic; color: blue}
BODY {font-family: Arial; background: yellow}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Lesson 1</H1>
<P> A style is simply a collection of text and layout
attributes that can be selectively applied to all or part
of a document. The idea of grouping them into a style
allows the author to easily apply the same collection of
attributes to many different parts of a document.</P>
<H2>The CSS1 Standard</H2>
<P>The HTML styles in Microsoft's Internet Explorer 3.0
are based on a draft standard being developed by the
World Wide Web Consortium (W3C), an independent body
devoted to the creation and development of open web
standards.</P>
</BODY>
</HTML>
When you reload SAMPLE.HTML in the browser, you should see that the font for the entire document has changed from Times New Roman (the browser default) to Arial, and the background color has changed from the default light blue to yellow, as shown in Figure 3.1.
)
Figure 3.1 Style properties
applied to the <BODY> tag are inherited by all of the other
tags within the body of the document.
TIP: Ordering Selectors Note that according to the CSS1 standard, the selectors within the <STYLE> tags can be listed in any order, as can the properties defined for any selector. In practice, however, Internet Explorer 3.0 sometimes behaves erratically when faced with certain combinations. If certain selectors or properties are not being recognized by the browser (and you are certain that they are coded correctly), try changing the order of the selectors or the properties for a given selector.
The font and the background color of the whole document are changed because the headline and paragraph elements are all contained within the <BODY> tags, and the properties applied to <BODY> are passed down. The <BODY> tag is the parent element and the headline and paragraph elements are the children.
This ancestral metaphor can be extended to encompass all of the elements in your HTML file. Most of the properties that you can include in a style sheet (but not all of them!) are inherited by the child elements of the selectors for which they are defined.
The background property is one that is not inherited. The entire background appears yellow in the above example because each selector in the style sheet is assigned a default background property of transparent that allows the <BODY> tag’s defined yellow background color to show through.
A good tag to use for style properties for most or all of a document is the <BODY> tag. You can still override the inherited <BODY> style for a particular child element by simply including the same properties in that element’s style definition but with different values.
To illustrate this, add a selector for the <P> tag to your SAMPLE.HTML file, leaving you with a <STYLE> section that appears as follows:
){kind=link}
<STYLE>
<!--
H1 {font-size: 24pt;
color: red;
text-align: center}
H2 {font-size: 20pt;
font-style: italic;
color: blue}
BODY {font-family: Arial;
background: yellow}
P {font-family: Times New Roman }
-->
</STYLE>
As a result, the browser display appears as shown in Figure 3.2.
)
Figure 3.2 Property values are
passed down from parent to child elements, except when they are overridden
by the child’s own assigned values.
Because the <P> tag has been explicitly assigned a value of Times New Roman, it no longer inherits the Arial value from the <BODY> tag, as the headlines do. In fact, the <P> sections start off with the browser’s default font value of Times New Roman, change to Arial by the style assigned to the <BODY> tag, and change back to Times New Roman by the style applied to the <P> tag itself.
In some cases, coding your styles so that the same properties are redefined in this way is impractical and inefficient. At other times, it can be quite a time-saving technique. The logic by which you apply styles must be based on the nature of the document.
If the document in the above example had dozens of elements of various types (all using the Arial font except for the paragraphs), it would be easier to assign font-family properties to just the <BODY> and <P> tags than it would be to assign Arial to a dozen different elements.
Your goal should be to define as few properties as possible and keep your HTML code to the minimum needed to achieve the desired effect. The skillful use of selectors and the construction of HTML documents that lend themselves to your design needs are both habits that will develop. You learn skills later in this book that will enhance your capabilities.
Style inheritance can also play an important role in the assignment of values to properties. As you will see in later lessons, many style properties can be assigned relative or absolute values.
Relative Value A relative value is one that is assigned by comparing it to the absolute value of its parent element.
In the examples used thus far, font sizes have been specified with the use of absolute values, measured in points. An absolute value causes a property to appear the same no matter what selector it is applied to or who its parents are.
For the next example, you will modify your SAMPLE.HTML file to use relative values for the font sizes of several elements in the form of percentages. Change the font-size properties for the headline elements and add a font-size property for the <BODY> element so that your <STYLE> section appears as follows:
){kind=link}
<STYLE>
<!--
H1 {color: red;
font-size: 200%;
text-align: center}
H2 {font-size: 150%;
font-style: italic;
color: blue}
BODY {font-family: "Arial";
font-size: 150%;
background: yellow}
P {font-family: Times New Roman}
-->
</STYLE>
When you specify a relative value for a property that can be inherited, such as font size, the value that displays is computed by applying the percentage to the value of that property in its parent element. Thus, when you reload your modified SAMPLE.HTML file into the browser (see Figure 3.3), you see that all of the text is larger because the font size property for the <BODY> tag’s style is defined as 150% of its parent element’s font size.
)
Figure 3.3 Relative values are
based on the values inherited from the parent property.
The parent of the <BODY> element is the browser’s default style so the font size of the body text in the sample is 150% of that shown in the earlier figures. Notice that the <H2> text that also has a 150% font size is larger than the body text. This is because the <H2> element’s parent is the <BODY> element. When the font size for the <H2> text is computed, it is based on 150% of the parent element’s actual size. The <H1> text is even larger because it is based on 200% of the same parent value as <H2>.
This is a crucial part of understanding style inheritance. You will soon be applying styles to more complex HTML documents that have several generations of styles, each with relative values based on their ancestry. When you elect to use relative values, you must be aware of the way in which a small code change affects the appearance of elements several generations down the line.
In this lesson, you learned how styles can be inherited by the elements that are contained within other elements. In the next lesson, you create more complex selectors that you can use to assign styles to your documents with greater precision.
 |
 |
 |
){kind=link}