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

Style the First Letter

Use the :first-letter pseudo-element to define a special style for the first letter in a container element such as a paragraph. Pseudo-elements are used to refer to html elements that are not available in the document tree. For example, there is no first-letter element in an html document.

Now is the time for all good men to come to the aid of their country.

The basic code for this is shown below.

<style type="text/css">
p:first-letter
{
color: blue;
font-size:2em;
font-weight:bold;
}
</style>

However, this code would apply the first-letter style to every paragraph on the webpage. Instead define a class to apply to only the paragraphs where you want the special style, as shown below.

<style type="text/css">
p.first:first-letter
{
color: blue;
font-size:2em;
font-weight:bold;
}
</style>

<p class="first" style="text-indent:2em;">Now is the time
for all good men to come to the aid of their country.</p>

Now is the time for all good men to come to the aid of their country.

- Note that I also added an inline style rule to indent the text.

- Note the units that I used is em (representing the width of a capital M). Using this unit allows the user to change their default font size without distoring the relative size of the first letter to the other letters in the paragraph.

Use an Image for the First Letter

You can use an image for the first letter as shown below.

ow is the time for all good men to come to the aid of their country.

<p style="text-indent:20px; padding-top:4px; font-size:16px;
background-image:url('images/N.gif'); background-repeat:no-repeat;">
ow is the time for all good men to come to the aid of their country.</p>

The first letter image is applied as the background-image and background-repeat is set to no-repeat. The text-indent property is set to the width of the image, the padding-top property is set to the height of image.

ow is the time for all good men to come to the aid of their country.

In the example shown above, the paragraph is indented by using an image that includes white space on its left side.

ow is the time for all good men to come to the aid of their country.

In the example shown above, the entire paragraph is indented by using a <blockquote> element instead of a <p> element as a container for the text.

Now is the time for all good men to come to the aid of their country.

<p><span style="font-size:2em;font-weight:bold;">N</span>
ow is the time for all good men to come to the aid of
their country.</p>

In the example shown above, a special style is set for the first letter by placing it in a <span> element within the <p> element.

This article provides examples of many methods to create a special first letter. The easiest method is to use the :first-letter pseudo-element, but be aware that the is :first-letter pseudo-element not compatible with old (IE 5.0) browsers.

More CSS Quick Reference:
• Vertical Align an Element
• Define CSS Rollover Effects
• Set the Border Color
• Set the border-collapse
• Set the Font Variant
• Specifying Color
• Set the Font Style
• Set the Text Decoration
• Set the Line Spacing
• Set a Background Image's Position

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