| Previous | Table of Contents | Next |
In this lesson, you learn several ways of applying styles with greater specificity using ID selectors and the <DIV> and <SPAN> tags.
As you learn about the use of class selectors and contextual selectors, it becomes clear that using HTML styles is primarily a matter of isolating specific text elements in your documents so that you can apply formatting properties to them. Styles provide an extensive array of properties that allow web page designers to control the appearance of text and manage the white space on the browser screen, but good designs come from juxtaposing elements on the canvas that have been formatted in different, but complementary ways.
The different types of selectors covered in the previous lessons are very helpful in providing ways to isolate selected areas of a document, but sometimes they are still not precise enough. The ultimate in granularity of an HTML document is a case in which every element has its own individual style assigned to it through the use of a specialized selector that identifies it.
The CSS1 standard provides the means for just such a technique. The HTML 3 language specification includes an ID= attribute which is assigned a character string and inserted into a tag to uniquely identify it. Intended for use as a target by anchor references (as NAME= is currently used), it serves as a selector that identifies one specific tag in a document.
Attribute In HTML terms, an attribute is a parameter that can be added to a tag to alter or enhance its purpose. For example, the WIDTH= attribute can be added to the <HR> to specify the length of a horizontal rule, in the form <HR WIDTH=50%>.
To create a style for an ID selector, a unique character string is preceded by a number sign (#) and followed by a style declaration containing properties and values enclosed in curly braces in the usual manner. Thus, a typical ID selector would appear within an embedded <STYLE> block as follows:
#123abc {font-size: 24pt; color: red}
The HTML element (to which the style is to be applied) is modified by the addition of the ID= attribute and the same character string. The properties last shown would be applied to an element appearing as follows:
<H1 ID=123abc>This is a Headline!</H1>
Any valid tag replaces the H1 and allows an ID selector to address any type of element, anywhere in a document.
While it has its uses in certain cases, the liberal application of ID selectors tends to defeat the overall purpose of HTML styles. The goal is to achieve the desired effect by creating the smallest possible number of style definitions and applying them to as many diverse elements as possible. Skillful use of the inheritance rules and careful definition of selectors saves keystrokes, eliminates code clutter, and helps you build a library of styles that can apply to all of the documents on your web site.
You may, at times, want to isolate a particular part of a document in order to apply styles within it. For example, you would like to modify the margins of some of the text blocks within <P> tags, while leaving other margins alone.
Adding class attributes or applying ID selectors is impractical on a large scale. The CSS1 standard, however, defines two new HTML elements that are used to isolate a portion of a document so that the application of styles is limited to only that portion.
<DIV> is one of the few new HTML tags introduced by the CSS1 standard. It is a means to create an artificial division in a document because the existing HTML architecture does not provide one. By enclosing elements within <DIV> and </DIV> tags, you can apply a default style to all of the enclosed elements or use DIV as part of contextual selectors to identify tags within the enclosure.
One of the biggest advantages of the <DIV> tag is that it has absolutely no effect on the appearance of a document except if it is used to assign styles. Browsers that do not support style sheets ignore the tag. It is preferable to use <DIV> rather than other HTML tags that might accomplish the same purpose (such as <TABLE>), because some may impose additional formatting attributes on the contents which may not be desired.
Modify your SAMPLE.HTML file by enclosing the last two paragraphs and headlines in the <BODY> block within <DIV> tags, as follows:
<HR> <H1 CLASS=left>Lesson 1</H1> <P CLASS=left> 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> <DIV> <H2 CLASS =right>The Default Browser Style</H2> <P CLASS=right>HTML style sheets are innovative primarily in that they allow various different styles to be applied to web pages by the author. Indeed, it could be said that all web browsers already use a style to display text.</p> <H2 CLASS=center>The CSS1 Standard</H2> <P CLASS=center>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).</P> </DIV> </BODY>
If you reload the file in the browser at this time, you see that the <DIV> tags do not change the appearance of the paragraphs. By modifying the styles as shown, however, the application of the class selectors is limited to the last two paragraphs of the document by placing them in the DIV context (see Figure 6.1).
)
Figure 6.1 The
<DIV> tags can be used to restrict the application of
styles to a specific part of a document.
){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}
DIV .left {margin-right: 50%}
DIV .right {margin-left: 50%}
DIV .center {margin-left: 25%; margin-right: 25%}
-->
</STYLE>
To further distinguish the contents of the <DIV> block, add the following style definition, using DIV itself as the selector:
DIV {font-family: "Times New Roman"; color: green}
You could, of course, achieve the same effect shown in Figure 6.2 by adding the font-family and color properties to the three styles containing the .left, .right, and .center class selectors, but why type the same properties three times when you only need to do it once?
)
Figure 6.2 Styles can be
applied to the <DIV> tag just like any other HTML element.
Inheritance in Practice Note that in the code used to create Figure 6.2, the color property has been used to make the paragraph text within the <DIV> tags green. However, the text of the headlines remains blue because whatever the order of the entries in the <STYLE> block, it is the ancestry of the HTML elements that controls inheritance. The <H2> tags are wholly contained within the <DIV> tags, making the blue of the H2 style the dominant color.
The <SPAN> tag is designed to perform the same function as the <DIV> tag, but without inserting the obligatory line break of a block element. Much as <EM> or <B> tags can be used to enclose a word, several words or even a single letter in order to alter its appearance, <SPAN> can be used within a block of text to apply styles to words or letters without having any effect in a browser that doesn’t support styles.
If you add a style for the SPAN selector to SAMPLE.HTML as shown below, and then enclose selected letters or words in your <BODY> text with <SPAN> tags, you can create effects such as those shown in Figure 6.3.
){kind=link}
SPAN {font-size: 18pt}
)
Figure 6.3 The
<SPAN> tag is used to apply styles to small text selections
without offsetting them from the rest of the element.
In this lesson, you learned to apply styles with extreme precision using ID selectors and the new HTML tags introduced in the CSS1 standard. In the next chapter, and those following, you learn the full capability of the formatting properties that you can include in your style definitions.
 |
 |
 |
){kind=link}