HTML and CSS Reference
In-Depth Information
afected! his is illustrated in Example 3.7 using the self-describing element
trick of Example 3.5.
Example 3.7: Using keyword font property values
<!DOCTYPE html>
<html>
<head>
<title>Example 3.7</title>
<style type="text/css">
body { padding: 24px; }
p:before, span:before { content: attr(style); }
</style>
</head>
<body>
<p style="font: bold x-small sans-serif;"><br/>
<span style="font: caption;"></span><br/>
<span style="font: small-caption;"></span><br/>
<span style="font: icon;"></span><br/>
<span style="font: menu;"></span><br/>
<span style="font: message-box;"></span>
</p>
<p style="font: bold x-large sans-serif;"><br/>
<span style="font: caption;"></span><br/>
<span style="font: small-caption;"></span><br/>
<span style="font: icon;"></span><br/>
<span style="font: menu;"></span><br/>
<span style="font: message-box;"></span>
</p>
</body>
</html>
Figure 3.7 shows how the keyword font properties of Example 3.7 appear in
a browser. Note how the second paragraph has expanded line height but the
displayed font sizes are the same as the irst paragraph.
