Inheritance and Specificity

In the previous section, you provided a set of default values—values that will be used wherever you do not set a specific value to override them. All the text on your page will have the #666666 color applied to it and all fonts on your page will be Verdana. If a user’s computer doesn’t have the Verdana font installed, the browser will look for the most similar font in the list—in this case Arial. If that font doesn’t exist on the computer, it will look for Helvetica. Should that font not be available, a sans-serif font that is available will be used instead.

Setting the font size to 100% means that all text will be shown at that size, whether it’s an h1 element or a p element. Clearly you will need to override this setting in some instances. The 100% value is a relative font size rather than an absolute font size using pixels. Using a relative font size allows your users to adjust the text easily to a size that is comfortable for them to read. A font size of 100% may be too big for your needs but this isn’t a problem. You can use 100% as a value from which to scale. For example, you could set the font size in your p element to 80% and set your font size for h1 to 130%. You will see how this is implemented later when I cover specificity.

For now, you have set defaults by setting these values of the body element—the most common settings used for the text within your document. By setting these properties and values on the body element, you are allowing them to be inherited throughout your document.

Now repeat what you did earlier when setting the font properties and values in the body rule. This time, however, work on the h1 rule:

1. Open your external.html file, if it isn’t open already.
2. Select the h1 rule in the CSS Styles panel.
3. Expand the font list in the Tag Inspector panel.
4. Select the font-family property that begins with “Georgia…”.
5. Click the color selector and select #003366 as the value.
6. Set the font-size property to 130%.

Your font list for the h1 rule should look like Figure 6.

Figure 6. CSS Properties panel showing the properties for the h1 element

Your next task is to set a default font size for the p element. You haven’t created a rule for the p element as of yet.

Once completed, your p rule should look like Figure 7.

Figure 7. The finished p rule

With your h1 and p rules successfully completed, following these steps to put them to use:

1. Type This is an h1 title scaled to 130% at the top of the external.html page.
2. Apply your h1 rule to the text by selecting the text and selecting Heading 1 from the Format pop-up menu in the Property inspector.

3. Type This is default paragraph text scaled to 80% below it. It should look like Figure 8.

   

   Figure 8. Page title with the the h1 rule applied to it

Let me recap what you have done here and explain the workings behind it all. You have set a default font size, color, and font-family on the body rule. You can see that your p element has inherited two of these settings—the color and the font family. The size is different. You specifically set the size of the p element to 80%. Because the size is set against the p element, it carries a greater specificity than the font size that you set on the body rule. With the exception of your h1 element, any text you add to your page outside of a p element will be shown at 100%.

Your p and h1 elements have specific font-size settings. The font-size values on those two rules are said to be more specific than the font size set on the body element. Because the p and h1 elements have a font size of their own, those values carry a greater specificity and win out against the body rule. In effect, you have overridden the font size on the body element. It is the same laws of specificity allowed you to change the color of the h1 element. The p element is still the default #666666 color. You have not set a color within the p rule, so the color set against the body rule is inherited and displayed.

In Part 1 you set up a p em descendant selector and set a color value against it. In the Design view, select the word default in the paragraph text and press Control+I to wrap your selection in tags (see Figure 9). You will see the selected text take on the color you set for that rule in your CSS file. This is another example of specificity winning the day.

Figure 9. The word default with the p em rule applied to it

Grouping Selectors

Now that you have an understanding of how inheritance and specificity work within your style sheet, you can take this one step further and learn about grouping selectors. Selectors are grouped by using a comma to separate them, as shown below. This rule is applied to each of the elements in the selector as if you had written them all out individually:

h1, h2, h3, h4, h5, h6{
 color: #003366;
 background-color: transparent; 
  /*transparent is the default background color so no real need to declare it*/ 
   } 
  

The code above sets the default settings for all your h elements. I’ve included a default font size so you don’t have to declare the font size for the h1 element in a separate rule. You can override the font size setting in separate rules for all the other headings. For instance, rule below allows all default settings from your multi-selector rule to be used and overrides the font size for the h2 element:

h2{
 
 }
 

Why is this? This rule does not seem any more specific than the one above it. The h2 font size will be implemented in this case because it is closer to the element being styled—it is further down in the style sheet. If you moved the rule above your multi-element rule, the font size would be rendered at 130%. Because the two rules are basically the same in terms of specificity, more weight is given to the rule that is closer to the element being styled. The rule that is lower in the style sheet therefore wins out.

Imagine if you had an embedded h2 rule in the head of your page and you placed it below the link to your external style sheet. In this instance, the h2 rule that is embedded in the head of your page would override the h2 rules in your external style sheet. By the same token, an inline rule like the one shown below would override the h2 rule in the head and the h2 rules in the external style sheet:

This is all well and good. However, you really do not want to use embedded or inline styles in your XHTML documents. Although it is not incorrect to use CSS in this manner, it does prevent you from having global access to your CSS rules. There is little point in using CSS and then having to open goodness knows how many XHTML pages to change embedded or inline rules. Keep your CSS rules where they give you the most benefit—in an external CSS file.