Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Setting a Larger First Letter

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268