Setting a Larger First Letter
By Stephen Bucaro
Long ago, when printing was done by hand or Gutenburg’s type setting machine, it
featured many embellishments. The text always had margins, paragraphs where always
indented, and the first letter of the first paragraph was larger than the rest of
the text. Today's textual content has done away with these embellishments.
Although it's a good idea to do away with nonessential embellishments for quick
informal textual content, what if you want to publish fictional content on the
Web? This article shows you how to set a larger first letter for a paragraph,
which can give your story an extra touch of class.
Here, I'm assuming that you already defined the styles for your basic text. Each
of the methods described here involves placing the first letter in an html span
element. The easiest way to set a larger first letter is to define a larger
font-size for the span. The example below shows how to do that using inline style.
<span style="font-size:26px;">T</span>he judicial power of the United States,
shall be vested in one Supreme Court, and in such inferior courts as Congress may from time to time
ordain and establish. The judges, both of the supreme and inferior courts, shall hold their offices
during good behavior, and shall, at stated times, receive for their services, a compensation,
which shall not be diminished during their continuance in office. - Article 3 Section 1
of the Constitution of the United States of America.
The judicial power of the United States,
shall be vested in one Supreme Court, and in such inferior courts as Congress may from time to time
ordain and establish. The judges, both of the supreme and inferior courts, shall hold their offices
during good behavior, and shall, at stated times, receive for their services, a compensation,
which shall not be diminished during their continuance in office. - Article 3 Section 1
of the Constitution of the United States of America.
You can add a little more class to the first letter by defining a style class
for the span, and within the class define several style properties, including a more
decorative font than that used for your basic text. The example below shows a style
class that defines the use of a bold italic courier font for the first letter.
<style type="text/css">
.firstletter
{
padding-right:4px;
font-family:courier;
font-size:30px;
font-style:italic;
font-weight:bold;
}
</style>
<span class="firstletter">T</span>he judicial power of the United States,
shall be vested in one Supreme Court, and in such inferior courts as Congress may from time to time
ordain and establish. The judges, both of the supreme and inferior courts, shall hold their offices
during good behavior, and shall, at stated times, receive for their services, a compensation,
which shall not be diminished during their continuance in office. - Article 3 Section 1
of the Constitution of the United States of America.
The judicial power of the United States,
shall be vested in one Supreme Court, and in such inferior courts as Congress may from time to time
ordain and establish. The judges, both of the supreme and inferior courts, shall hold their offices
during good behavior, and shall, at stated times, receive for their services, a compensation,
which shall not be diminished during their continuance in office. - Article 3 Section 1
of the Constitution of the United States of America.
• Note the padding-right property, which gives you control of the positioning
of the first letter so that it doesn't crowd the adjoining text.
Here, I'm assuming that you already know how to define style classes and how to
apply them to html elements. If not, below is a brief summary.
• You place the style block within the head section of your webpage and then set
the class attribute of the span as shown. Once you define the class, you can
apply it to all other first letter spans as you desire.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
