*** From the Archives ***
This article is from November 7, 2001, and is no longer current.
Banking on CSS Inheritance
|
If you’re like many Web designers, you’ve probably dabbled a bit with cascading style sheets (CSS). Perhaps you’ve even completely abandoned most old-school HTML formatting such as the font tag in favor of CSS. This powerful addition to your Web design toolbox finally lets you explore many of the formatting possibilities that print designers take for granted: leading, first-line indents, precise margin control, and sophisticated border options, to name a few.
But in order to use CSS to its full potential — and take advantage of many of its labor-saving features — you need to learn the ins-and-outs of this exciting new technology. CSS is an important feature of Web design programs such as Macromedia Dreamweaver and Adobe GoLive. One concept that trips up beginners but saves a lot of formatting time for seasoned pros is the ability of a CSS style to pass on its properties to other tags in a page. Called inheritance, this feature is a powerful and sometime confusing concept to grasp. If you’re at all acquainted with style sheets in QuarkXPress or Adobe InDesign, these principles will be familiar to you. If not, read on for an explanation of what it is and how you can use CSS inheritance to work more efficiently.
All in the Family
Inheritance, in the world of CSS, isn’t all that different from inheritance in the real world. When people have children they can pass on certain physical traits — hair color, height, build, etc. In fact, from generation to generation, children inherit characteristics from their parents, who in turn inherited those traits from their parents.
You can also think of a Web page as a family of sorts, containing parent-child relationships. It’s structured like a family tree. For instance, the <html> tag is like the patriarch (or matriarch) of the family — all other tags are its offspring (see Figure 1). The <head> and <body> tags are its immediate children, and they in turn have their own children — the <title> tag, for example, is a child of the <head> tag.
If all this talk of a family tree doesn’t make sense to you, here’s another way to think about it: If a tag is nested inside of another tag, it’s a descendent of that tag. For example, every <table> tag has at least one <tr> (table row) inside it. That <tr> tag is a child of the <table>. In turn, <tr> tags have their own children — <td> tags which indicate a single table cell.
Figure 1: Here’s the structure of a very basic Web page composed of one headline and two paragraphs: The <head> tag and <body> tag represent two lines of this Web page’s “family tree.” They are both children of the HTML tag, but have distinct family lines. The green boxes represent tags contained in the body of the page, and, therefore, are all children of the <body> tag.
And just as children inherit traits from their parents, HTML tags can inherit properties from their parent tags. For example, say you bolded one word in a paragraph by wrapping it in a <b> tag. That tag is a child of the paragraph tag and has inherited some of its properties: its font face, size, and color, for instance. The only difference is that that one word is also bold — after all, while children inherit some properties from their parents they also have their own distinctive qualities.
This also applies when using Cascading Style Sheets. Say you created a style for the <p> tag. You defined a font face, color, and type size for the style. Since children inherit their parent’s properties, all tags within any <p> tag will inherit its style. This makes good sense; after all it would be a bit weird if you bolded a single word inside a paragraph and that word suddenly lost all of the paragraph’s formatting — reverting to the default font face, color and size!
Keep this CSS feature in mind if you suddenly see elements on a page with formatting you think you didn’t specify. For example, say you applied a class style to a table cell (<td> tag), and that style included an orange font color. Since any tags nested inside that <td> tag are children of that tag, they’ll all display text in orange. Perhaps not what you had intended. And, if you don’t understand inheritance, this can be a real puzzler.
Making the Most of Your Inheritance
You’re probably thinking, “OK, now I understand how this inheritance stuff works, but how can it help me?” Imagine this scenario: You decide that you want most of the type on your page to be set using the font Verdana, at 14 pixels, in red and with a leading of 120% of the line height. One approach you might consider is creating styles for each tag you’ll use on the page: <h1>, <p>, <ul>, <ol> and so on. This certainly works but is tedious and time consuming. What if you decide that the basic font should be Arial, not Verdana? You’ll need to go back and adjust each of those styles.
A better tactic is to employ inheritance to streamline the process. One thing you know about any web page, is that all HTML that appears within the browser window is contained within the <body> tag. Because of that, every tag you use, and all the text you want to display to the world, is a descendent — child, grandchild, and so on — of the <body> tag and inherits any properties defined for the <body>.
So, in our example, you could create a style for the <body> tag that sets the font to red, 14-pixel Verdana with a 120% leading. All text within the page will now use those default settings. In fact, this is a great way to set many default properties for the elements on your page. When you, or your boss, decide that the font color needs to be changed, or the font-size is a wee bit too small, you update the <body> style and all the tags on the page are instantly updated.
You can use this technique for more targeted formatting tasks as well. For example, its common to divide a page into sections — one or more sidebars and a main content region, for instance. This common layout is usually achieved by building a table that houses each of those sections in individual table cells (see Figure 2). Generally each section is treated with a distinct visual approach: the main content area should be prominent and easy to read, while sidebars usually use smaller type, different colors and other techniques to distinguish them from the other parts of the page.
In these cases you can create styles that set the default properties of elements within each part of the page. For example, say you want all text in a sidebar — whether it’s contained in a paragraph, heading or bulleted list — to be 12 pixels, navy blue, Times New Roman. Simple. Create a class style — sidebar, for example — and apply it to the appropriate table cell like this <td class=”sidebar”>. You could do the same for the main content region: create a class, name it “content” then apply it to the content’s <td> tag.
Figure 2: To create columns on a Web page, designers still resort to HTML tables. Each cell in the table is used to control the layout of page elements. In this example, a basic table, placed below the banner, is composed of three table cells. Taking advantage of inheritance, each cell has its own default text font, size and color.
Of course, you may not want all HTML tags to inherit the properties of its parent. In these cases define a style for that element. For example, say you don’t want the <h1> tag to inherit the Verdana font defined in the style for the <body> tag. Create a <h1> style — or a class style that you apply to a specific <h1> tag — that uses a different font. The <h1> tag will still inherit the other properties of the parent style, but since you’ve applied a specific font to the <h1> tag, it will override the default font.
Not all properties are passed along to a tag’s descendents, however. Properties relating to margins, border, padding, and background are not inherited by child tags — with good reason. Imagine that you defined a two-pixel purple border for a style you apply to the <body> tag. If every other tag inherited that property, the page would be filled with little boxes outlined with a two-pixel border. Every paragraph, bolded or italicized word, and bulleted item would have the same purple outline. That’s not very attractive.
Disinherited by Netscape Navigator 4
If you’ve done much work with Cascading Style Sheets, you’re probably aware of the extensive problems Netscape Navigator 4 poses to Web developers. Unfortunately that browser is incapable of displaying many CSS properties correctly, and is filled with many display bugs (to see a list of CSS bugs in Navigator 4 visit Netscape’s known bug page).
One of the most serious bugs is related to inheritance. Navigator does not inherit into a table tag. For example, say you create a style for the page’s <body> tag, and then included a table in the page. While the properties of the parent style should pass on to the table and any tags inside the table, in Navigator 4, they don’t. All content inside the table reverts to the browser’s default values and the styles are lost.
There are a couple of antidotes for this problem. First, create styles for both <body> and <td> tags, which contain the default style properties you wish to use. Then those properties will not only apply to the body’s child tags, but also to the cells of each table in the page. Alternatively, create a class style with the default properties you desire and apply the style to the body and each <td> tag on the page.
Second, ignore Navigator 4. This may seem extreme, but version 4 of this browser is definitely on the way out. According to the latest statistics from thecounter.com, Navigator 4 makes up less than 6 percent of the browser audience. That number will continue to shrink as the months pass. So, instead of spending a lot of time using workarounds to make your pages display correctly you might consider the bold move of simply building for more standards-compliant Web browsers. If you choose this approach, you’re not alone. The Web Standards Project also supports this course of action and even provides a Web page explaining why it’s important to upgrade to newer browsers.
The Meek Shall Not Inherit
Inheritance is a formalized feature of Cascading Style Sheets, so it’s good to know what it is and how it works. But beyond that, using inheritance to pass frequently used properties to children tags means less formatting for you and easier updating of default properties. With these few tips you’ll be on your way to using Style Sheets effectively and efficiently.
 |