| Previous | Table of Contents | Next |
In this lesson, you learn how to assign styles to HTML tags based on the location of the tags within the hierarchy of your document.
In some cases, particularly when you are applying styles to existing HTML documents, you may want to apply styles with greater precision than that afforded by simple selectors and without having to add CLASS attributes through the body of the document. This can be done by using a particular HTML element as a selector and specifying that the style only be applied when that element is contained within another specific HTML element.
For example, you may want to change the color of the emphasized text in a document, but only within paragraphs, not in headlines. You can create a selector to assign a style rule to your document’s <EM> tags, but only when they are enclosed within <P> tags. In the same way, you can have paragraph text that is smaller within table cells than it is outside a table, by assigning the smaller font size to <P> tags that fall within <TABLE> tags.
These are called contextual selectors because the style is applied to a tag based on its context within the document’s HTML hierarchy.
A good way to illustrate this principle is with the use of the HTML codes that allow you to create lists. Create two lists, one ordered and one unordered, and add them to the beginning of the <BODY> block in your SAMPLE.HTML file, as follows:
<BODY> <OL> <LI>What is a style?</LI> <LI>Modifying HTML Tag Styles</LI> <LI>Understanding Style Inheritance</LI> <LI>Using Class Selectors</LI> <LI>Using Contextual Selectors</LI> </OL> <UL> <LI>Greater author control over appearance of text and its placement on the page <LI>Reduced clutter of multiple opening and closing tags on individual text elements <LI>Simplified modification of page design through style editing <LI>Elimination of the need for clumsy HTML workarounds to achieve basic layout effects <LI>Great improvement of the design potential for HTML pages without introducing a large number of new, proprietary tags </UL>
When loaded into the browser, SAMPLE.HTML now appears as shown in Figure 5.1.
)
Figure 5.1 The ordered list
code causes <LI> elements to be numbered; unordered lists,
bulleted.
Now, assume that you want to apply different styles to the elements in each type of list. You could use class selectors to distinguish the <LI> tags in the ordered list from those of the unordered list, but you would have to add CLASS attributes to each tag. You might recall the rules of style inheritance and insert the CLASS attributes into the <OL> and <UL> tags instead, knowing that they would be carried down to the <LI> elements. This could be inconvenient if you want to apply your styles to a document with many lists or many documents with lists.
You can, instead, create styles with contextual selectors that identify the specific element to be stylized by citing its tag and its ancestry. A contextual selector is notated by specifying the tag for an HTML element, followed by the tag for another element contained inside the first, and separated by a space. Properties and values are then added in the usual manner. This forms a search stack. The entire search stack must be satisfied before the style is applied.
Modify the <STYLE> block of your SAMPLE.HTML file to add the OL LI and UL LI selectors, as shown:
){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}
.left {margin-right: 50%}
.right {margin-left: 50%}
.center {margin-left: 25%; margin-right: 25%}
OL LI {font-size: 125%;
font-style: italic}
UL LI {font-size: 75%;
font-weight: bold}
-->
</STYLE>
When you save your changes and reload SAMPLE.HTML in the browser, you see that the ordered list’s font is enlarged and italicized because its <LI> tags are contained within the <OL> tags (see Figure 5.2). The <LI> tags of the unordered list had a different style applied to them because their parent element is the <UL> tag.
)
Figure 5.2 The same tags with
different parent elements can be assigned different styles using selectors
that specify the tag’s context.
Selectors of even greater complexity are used in cases where several generations of HTML elements are present. In the next exercise, by combining the two lists created earlier into a single one, you achieve a multi-level outline effect in which the elements at the various levels are more easily distinguishable because of the different styles applied to each.
Modify SAMPLE.HTML to include the following ordered list in the <BODY> block:
<BODY> <OL type=I> <LI>What is a style?</LI> <OL type=1> <LI>Greater author control over appearance of text and its placement on the page</LI> </OL> <LI>Modifying HTML Tag Styles</LI> <OL type=1> <LI>Elimination of the need for clumsy HTML workarounds to achieve basic layout effects</LI> <LI>Reduced clutter of multiple opening and closing tags on individual text elements</li> <OL type=i> <LI>Simplified modification of page design through style editing <LI>Great improvement of the design potential for HTML pages without introducing a large number of new, proprietary tags </OL> <LI>Understanding Style Inheritance</LI> </OL> <LI>Using Class Selectors</LI> <OL type=1> <LI>Using Contextual Selectors</LI> </OL> </OL>
When you reload the file into the browser, the list appears as shown in Figure 5.3. All of the <LI> elements have the same style applied to them because the properties for the contextual selector OL LI are being applied to the elements at each level of the outline. This is because each <LI> tag has at least one <OL> tag as its ancestor.
)
Figure 5.3 A single contextual
selector can affect the appearance of an entire multi-level outline.
TIP: Notice that the numbering of the elements at each level of the outline is varied by the use of the TYPE attribute in the <OL> tags. This not only improves the readability of the outline in the browser, but also helps the author to keep track of the often confusing layers of <OL> and <LI> tags in the HTML code.
Be aware, however, that the ancestor specified in a contextual selector does not need to be an immediate parent. In the last example, an <LI> tag that is contained anywhere within <OL> tags satisfies the search and causes the style properties to be applied to it.
You are not limited to specifying only two generations in a contextual selector. If you modify the selector of the OL LI style from the last example to read OL OL LI, that style is applied to the second level <LI> elements in the outline (because they have two <OL> tags in their ancestry). However, the third level <LI> elements in the outline (and any deeper levels, if they existed) displays the same style properties because they share the same ancestry specified in the selector. To apply a different style to the third level elements, you must create a selector that identifies these elements uniquely, such as OL OL OL LI.
Modify the <STYLE> block of your SAMPLE.HTML files to appear as follows:
){kind=link}
){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}
.left {margin-right: 50%}
.right {margin-left: 50%}
.center {margin-left: 25%;
margin-right: 25%}
OL LI {font-size: 110%;
font-weight: bold}
OL OL LI {font-size: 100%;
font-weight: medium}
OL OL OL LI {font-style: italic;
font-size: 90%;
font-weight: medium}
-->
</STYLE>
Because the three contextual selectors at the end of the style block uniquely identify each of the outline’s three levels, different style properties are applied to each, as shown in Figure 5.4.
)
Figure 5.4 Contextual selectors
can be used to identify specific elements deep inside a document’s HTML
hierarchy.
Contextual selectors can also be constructed using the class selectors described in Lesson 4. In the case of our SAMPLE.HTML file, a selector of OL LI.left would be perfectly valid and cause that style to be applied to any <LI CLASS=left> element contained within an <OL> element.
You can also use generic class selectors in a contextual format. A selector of OL.left would be equally valid and would stylize all elements contained within <OL> tags that have a left CLASS attribute.
In this lesson, you learned to apply styles to HTML elements based on their specific position within an HTML document. In the next lesson, you refine these skills by using new HTML tags to create discrete compartments within your documents in which to apply styles.
 |
 |
 |
){kind=link}