Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Binding to HTML Elements
Binding means that the Web browser associates a CSS style with one or more HTML elements in the document. Whenever the browser displays the element, it applies the formatting specified in the bound style.
Styles can be bound to HTML elements in three basic ways. If the selector is an HTML tag, then all elements in the document delimited by that tag are bound to the style. If the selector is a class name, then all elements assigned to that class in the document are bound to the style. Finally, if the select is an ID, then the individual element with that ID is bound to the style.
By Tag: Most General
Binding a style to all HTML elements of a given type provides a way to specify the broadest, most general styles. For example, you can bind a style to the <td> tag so that all table cells have that style as their default.
To bind a style to all elements of a given type, use the tag (without the brackets) as the style selector. For example, Listing 2 shows a style defined on the <td> tag. After including this style in an HTML document, all table cells will have this style, unless it is overridden by a later definition or by a definition applied at a lower, more specific level.
Listing 2: Binding a Style to the <td> Tag
TD {
font-family : Verdana;
font-size : 22pt;
font-weight : Bold;
text-align : Center;
color : DarkKhaki;
background-color : FireBrick;
}
By Class: General
The Web developer can assign an optional class attribute to HTML elements (see Listing 3). Then a style can be defined in such a way that it is automatically bound to all elements that share that class. The CSS syntax to define such a style is to proceed the selector with a period.
Listing 3: Binding Styles to Classes
<html>
<head>
<title>Sample HTML Document</title>
<style>
.Title {
font-family : Arial;
font-weight : Bold;
font-size : 16pt;
}
.Description {
font-family : Arial;
font-size : 10pt;
font-style : Italic;
position : relative;
left : +0.25in;
top : -15px;
width : 300px;
}
.Label {
font-family : Arial;
font-weight : Bold;
}
.Data {
font-family : Arial;
}
</style>
</head>
<body>
<p Class="Title">The Grapes of Wrath</p>
<p Class="Description">
The dustbowl-era collapse of family farming in the midwest
uproots an entire generation.</p>
<a Class="Label">Author: </a><a Class="Data">John Steinbeck</a><br>
<a Class="Label">Year: </a><a Class="Data">1939</a><br>
<a Class="Label">ISBN: </a><a Class="Data">0140186409</a><br>
<a Class="Label">Pages: </a><a Class="Data">619</a>
</body>
</html>
Text elements in the HTML document that are assigned to one of the classes now automatically have the associated style applied (see Figure 1). This enables the developer to easily change the characteristics of a certain type of element. For example, if it is decided later that labels should be underlined, then the developer needs to update only a single line of code, not every label in the page.
){kind=link}
Figure 1 The page from Listing 3, as viewed in Internet Explorer.
By ID: Specific
CSS styles can also be assigned to explicit ID attribute values (an example was shown in the previous article). These are normally unique in a given page, so a style bound to a given ID is, in essence, associated with a single element. Such a style could simply be defined inline, but using a style sheet allows the aggregation of styles in a single location rather than scattering them throughout the document, making the style easier to find for maintenance. To bind a style to given ID value, the developer should use the desired ID value as the selector in the style definition.
Conclusion
This article introduced the central elements of CSS: style sheets, attribute-value pairs, and binding. The next article in this series will conclude our exploration of CSS with a set of recommended guidelines to enhance the maintainability and reusability of style sheets.