Designing with CSS – Part 2: Setting a Default Font Size for the p Element
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:
- Type This is an h1 title scaled to 130% at the top of the external.html page.
- 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. -
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
Comments