Setting a Default Font Size for the p 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. You can create that using the technique you learned in Part 1 when you created the h1 rule. Remember that you want to set only a font-size property with a value of 80%. There is no need for anything else in your p rule at this time. Once completed, your p rule should look like Figure 2.

Figure 2. 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 3.

   

   

   Figure 3. The h1 and the p rules

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 have 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 – where you have also specifically set a default font size, any text you add to your page outside of a p element will be shown at 100.01%.

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 set on the body element. It is the same laws of specificity that 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 4). 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 4. The word default with the p em rule applied to it