Designing with CSS – Part 2: Setting a Default Font Size for the p Element
Setting a Default Font Size for the
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.
p rules successfully completed, following these steps to put them to use:
- Type This is an h1 title scaled to 130% at the top of the external.html page.
- Apply your
h1rule to the text by selecting the text and selecting Heading 1 from the Format pop-up menu in the Property inspector.
Type This is default paragraph text scaled to 80% below it. It should look like Figure 3.
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%.
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
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.