This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Small Caps
Small caps (sometimes referred to as "mini-caps") are useful for emphasizing titles. With small caps, lowercase letters are converted to uppercase, but in a slightly smaller size than regular uppercase letters (Figure 3.11).
)
Figure 3.11 All the letters are capitals, but the first letter is larger than the rest.
In this example (Code 3.5 and Figure 3.12), the <h2> tag is used to create a distinctive book title in small caps.
Code 3.5. The level 2 header tag is set to be displayed in small caps.
<html>
<head>
<style type="text/css"><!--
body {
font-size: 24px;
font-family: 'times new roman',
→ times, serif;}
h2 {
font-variant: small-caps;
}
--></style>
</head>
<body>
<h2>Chapter III<br>
A Caucus-Race and a Long Tale</h2>
<p>They were indeed a queer-looking party
→ that assembled on the bank...</p>
</body>
</html>
)
Figure 3.12 Using small caps for the title is an elegant way to set it off from the rest of the text.
To make a rule for small caps:
-
font-variant:
Type the property name font-variant, followed by a colon (:).
small-caps;
Type the value of the font-variant property, using one of these options (Table 3.8):
Table 3.8. font-variant Values
Value
Compatibility
normal
IE4, N6, S1, O3.5, CSS1
small-caps
IE4, N6, S1, O3.5, CSS1
- small-caps, which sets lowercase letters as smaller versions of true uppercase letters
- normal, which overrides other font-variant values that might be inherited