Small Capitals
One of the most interesting styles accessible in CSS is the capability to specify a font-variant that has every letter capitalized, with the letters that were already capitalized slightly larger than the lowercase letters capitalized by the variant. Here’s a typical usage:
<style type=”text/css”>
.smallcap { font-variant: small-caps; }
</style>
</head><body>
<h1>This is a Level One Header</h1>
<h1 class=”smallcap”>This is also a Level One Header</h1>The CSS specification defines a number of possible font variants, but so far Web browser developers seem to have implemented only small-caps. The other possible value, to shut off small-caps, is normal.
Stretching or squishing letter spacing
Another interesting variation in font layout is the letter-spacing style, which enables you to expand or compress type by a specified per-letter value—even if it causes letters to overlap! Adjusting this space between letters is known as kerning in typographical circles. Here’s an example:
<h1 style=”letter-spacing: -2px;”>And Another Level One Header</h1>
Stretching or squishing words
If you don’t want to have the spacing between letters adjusted, but you still want some control over the overall width of a text passage, word-spacing might be just what you need. Consider the following example:
.wide { word-spacing: 15px; font-weight: bold; }
.narrow { word-spacing: -3px; font-weight: bold; }
Be careful with these values, especially if you’re trying to compress the text! A little change can quickly produce unreadable text, and just a bit more can cause words to overlap.
Changing line height
The height between the lines of text in a paragraph is known as leading. You probably remember having to write double-spaced papers in school. Double-spaced, in CSS terms, is line-height: 2. Unusual in a CSS style, line-height doesn’t need a unit (unless you want to refer to percentages, inches, pixels, points, and so on) and accepts fractional values, too. So to get a line-height half way between single-spaced and double-spaced, use line-height: 1.5, as shown:
.doublespaced { line-height: 1.5; }
Putting it all together, here’s an example of line-height and word-spacing:
<style type=”text/css”>
.wide { word-spacing: 15px; font-weight: bold; }
.narrow { word-spacing: -3px; font-weight: bold; }
.doublespaced { line-height: 1.5; }
</style>
</head><body>
<div class=”doublespaced”>
This is a paragraph of text that’s double-spaced. This means that the <i>leading</i>, or interline spacing, is different from standard text layout on a Web page. Within this paragraph, I can also have <span class=”wide”>some words that are widely spaced due to the word-spacing value</span> and, of course, <span class=”narrow”>some words that are narrowly spaced,</span> too.
</div>
<p>
By comparison, this paragraph doesn’t have any special line-height specified, so it’s “single spaced.” Notice the difference in the
space between lines of text.
</p>
The effects of both word and line spacing are shown in the figure below :
Not all possible settings are good, of course. A line height that’s too small results in the lines of text becoming illegible as they’re overlapped. The single addition of line-height: 1.25, however, can significantly improve the appearance of a page, and you can increase line height for the entire document by changing the style of the body tag. Adding the following code to the top <style> block changes all the text on the page:
body { line-height: 1.25 }
Cool, eh? I tweak the body container again and again as I proceed. It’s very useful!
Text alignment
HTML includes some attributes for the <p> tag that let you specify if you want the text to be left, center, or right aligned, or justified, where both the left and right margins are aligned. These attributes are replaced in CSS with the text-align style, which has the following possible values:
• left
• right
• center
• justify
Vertical text alignment
Here’s one feature that you don’t see in HTML except in the exceptionally awkward form of <sup> and <sub> for superscripts and subscripts, respectively. Instead, use vertical-align and pick one of the values shown in the following table.
| Value | Explanation |
| top | Specifies that top of element aligns with top of highest element in line |
| middle | Specifies that middle of element aligns with middle of line |
| bottom | Specifies that bottom of element aligns with bottom of lowest element in line |
| text-top | Specifies that top of element aligns with top of highest text element in line |
| text-bottom | Specifies that bottom of element aligns with bottom of lowest text element in line |
| super | Indicates superscript |
| sub | Indicates subscript |
A nice demonstration of this capability is a technique for having trademark ™ character sequences displayed attractively on a page:
.tm { vertical-align: top; font-size: 33%; font-weight: bold; }
In use, this might appear as
Though just about lost to common parlance, it remains the case that Xerox <span class=”tm”>tm</span> is a trademark of Xerox Corporation.
Text decorations
One HTML text decoration that, surprisingly, made it to CSS is underlining. Underlining text on a Web page is somewhat problematic because it can become quite difficult to differentiate links from underlined text. But the CSS text-decoration style
enables more than just underlining. It provides the following four values:
• underline
• overline
• line-through
• blink(IE)
With the exception of overline, these all have HTML equivalents: <u> for underline, <strike> for line-through, and <blink> for blink.
In CSS, however, it’s much easier to apply a number of them simultaneously, like this:
h1 { text-decoration: overline underline; }
By using the underlining styles, you can rather dramatically change the appearance of headers throughout a document.
Changing text case
The final style to learn in this chapter, text-transform, deals with the capitalization of text and has the values specified in the table below.
| Value | Meaning |
| capitalize | Displays the first letter of each word as caps and all others as lowercase |
| uppercase | Displays all letters as uppercase |
| lowercase | Displays all letters as lowercase |
| none | Displays characters as specified |
To have a paragraph of text transformed into all uppercase, for example, use text-transform: uppercase;, and to instantly ensure that all header level ones are in proper case, use:
h1 { text-transform: capitalize; }
Putting it all together
Putting everything into one example:
<style type=”text/css”>
body { font-family: Arial,Helvetica,sans-serif; font-size:90%;
line-height: 1.25; }
h1 { text-transform: capitalize; text-decoration: overline
underline; color: blue; letter-spacing: 0.05em; text-align: center; }
{ font-variant: small-caps; font-weight: bold; }
.email { color: #909; font-family: monospace; font-size: 90% }
.tm { vertical-align: top; font-size: 40%; font-weight: bold; }
</style>
</head><body>
<h1>Travels with Tintin</h1>
<p>
Of the various reporters with whom I’ve travelled around the world, including writers for <i>UPI</i>,
<i>AP</i>, and <i>Reuters</i>, the most fascinating has clearly been <b>Tintin</b>, boy reporter from
Belgium ( <span class=”email”>tintin@technopedia.info</span>).</p>
<div style=”text-align:right”>
Probably the most enjoyable aspect of our travels was his dog <b>Snowy</b>, though I don’t know that our
hosts would always agree!
</div>
<h1>The First Trip: Nepal</h1>
<p>
After winning the Pulitzer for <i>Red Rackham’s Treasure</i> <span class=”tm”>tm</span>, Tintin told me
he wanted a vacation. Remembering some of his earlier adventures, he decided to visit Nepal. Early one
Sunday, I was sipping my tea and reading the <i>Times</i> when he rang me up, asking whether I’d be
able to take a break and come along...
</p>This is the output:
Submitted by : Arthur Stanley
Loading ...
April 12th, 2006 at 2:20 am
One thing that should be kept in mind with increasing and decreasing widths with text. Different resolutions, and people’s readability. Yeah that green on red looks good, but it may drive people away.