CSS :first-letter pseudo-element

Complete CSS Reference

Definition

The :first-letter pseudo-element adds a special style to the first letter of a text.

Examples

The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector:

p {font-size: 12pt}
p:first-letter {color:#ff0000;font-size:xx-large}

<p>The first words of an article...</p>

The output could be something like this:

Note: The "first-letter" pseudo-element can only be used with block-level elements.

Note: The following properties apply to the "first-letter" pseudo- element: 

• font properties
• color properties 
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if 'float' is 'none')
• text-transform
• line-height
• float
• clear

Pseudo-elements can also be combined with CSS classes: 

p.article:first-letter {color: #FF0000}

<p class="article">A paragraph in an article</p>

The example above will set the first letter of all paragraphs with class="article" to red.

Try-It-Yourself Demos

Make the first letter special
This example demonstrates how to add a special effect to the first letter of a text.

Make the first letter and first line special
This example demonstrates how to add a special effect to the first letter and the first line of a text.

Complete CSS Reference

The Ektron Intranet lets you do everything you need to do on your corporate intranet and everything you want to do... all with just one application.

What can you do with the Ektron Intranet? Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with enterprise search Communicate with friends and colleagues with forums, message boards and corporate blogging using the new Social Networking Platform Promote collaboration among coworkers in your organization through project workspaces where others can efficiently find information and work together Personalize your company profile by bookmarking and organizing favorite content, uploading assets, posting photos, blogging, and more Interact with features like tagging, flagging, wikis and ratings found in the Web 2.0 Toolbox Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed Content Management

See why there are 20,000+ Ektron integrations worldwide. Request an INSTANT DEMO or download a FREE TRIAL today.

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2008 by Refsnes Data. All Rights Reserved.

W3Schools was converted to XHTML in December 1999