Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

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