This chapter is from the book
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.
Example 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