		Site Navigation
	Home
	Products
	Tags
	Levels
	Dates
	Authors

		5 MOST RECENT
	Click to view Braintrove article: Locate the Design Checker Task Pane in InfoPath 2010 Written by Gregory Scot Collins Monday, 23 August 2010, 7:36 AM Products: InfoPath and Office InfoPath 2010 moved the location to access the Design Checker task pane. Learn how to access it in its new home. Locate the Design Checker Task Pane in InfoPath 2010
	Click to view Braintrove article: Locate Conditional Formatting and Custom Validation in InfoPath 2010 Written by Gregory Scot Collins Wednesday, 30 June 2010, 4:03 PM Products: InfoPath and Office InfoPath 2010 moved and changed accessibility for a number of features. Some of the most common of these are conditional formatting and custom data validation. Learn how to access them in their new home. Locate Conditional Formatting and Custom Validation in InfoPath 2010
	Click to view Braintrove article: Conditionally Display Different Values In a Single Expression Box Written by Gregory Scot Collins Saturday, 20 March 2010, 8:24 PM Products: InfoPath and Office Using a special little-known XPath expression you can display multiple values in a single expression box rather than in multiple expression boxes with conditional formatting. Conditionally Display Different Values In a Single Expression Box
	Click to view Braintrove article: Create a Button With a Blank Label Written by Gregory Scot Collins Saturday, 20 March 2010, 7:04 PM Products: InfoPath and Office InfoPath 2007 no longer allows you to have a blank label for buttons?useful for creating picture buttons. Discover this easy way to work around this issue. Create a Button With a Blank Label
	Click to view Braintrove article: Create Shared Rules Written by Gregory Scot Collins Monday, 15 March 2010, 12:41 PM Products: InfoPath and Office Avoid the maintenance nightmare of having multiple controls with the same set of rules with this simple trick that allows you to share rules between controls. Create Shared Rules

		5 MOST POPULAR
	Click to view Braintrove article: Access a Method in a Master Page with Code-Behind Written by Gregory Scot Collins Friday, 16 June 2006, 7:09 AM Product: ASP.NET Write code for pages with code-behind to access a method in an immediate or parent master page from a content page. Access a Method in a Master Page with Code-Behind
	Click to view Braintrove article: Pass Query String Parameters to an ASP.NET Xml Control Written by Gregory Scot Collins Friday, 19 May 2006, 5:19 PM Product: ASP.NET Use the Page_Load method of your ASPX page to attach a list of parameters to your asp:Xml control that will be passed through to your XSL transform. Pass Query String Parameters to an ASP.NET Xml Control
	Click to view Braintrove article: Prevent Namespace Prefixes from Being Copied to the Output Written by Gregory Scot Collins Monday, 1 May 2006, 7:18 AM Products: HTML, JavaScript, XML, XPath and XSLT The extra namespace prefixes required to transform XML are not always desirable on the output. This article describes a technique for excluding specific namespace prefixes from the output. Prevent Namespace Prefixes from Being Copied to the Output
	Click to view Braintrove article: Create Groups in a Drop-Down List Box Written by Gregory Scot Collins Saturday, 17 June 2006, 5:57 AM Products: CSS, FireFox, HTML and Internet Explorer Create grouped option-sets in your drop-down list boxes, each with its own non-selectable header. Create Groups in a Drop-Down List Box
	Click to view Braintrove article: Configure IIS 7 for Custom Error Pages Written by Gregory Scot Collins Tuesday, 31 July 2007, 9:32 PM Product: Internet Information Services Viewing custom error pages on your local computer requires configuring IIS to know about your error page. In IIS 7 you must also configure it to return custom error pages locally. Configure IIS 7 for Custom Error Pages

		5 MOST FORGOTTEN
	Click to view Braintrove article: Install Windows 7 Beta onto a Virtual Machine Written by Gregory Scot Collins Wednesday, 25 February 2009, 9:52 AM Products: Virtual Server and Windows Walk through the simple process of installing Microsoft Windows 7 Beta onto a virtual machine with screenshots for every step in the process. Install Windows 7 Beta onto a Virtual Machine
	Click to view Braintrove article: Configure Lab Color Mode Defaults for Braintrove Articles Written by Gregory Scot Collins Wednesday, 30 April 2008, 10:36 PM Product: Photoshop Make the appropriate changes in a couple of dialog boxes in order to complete the tasks of Braintrove articles involving the Photohshop Lab Color mode. Configure Lab Color Mode Defaults for Braintrove Articles
	Click to view Braintrove article: Create a Monochromatic Dream Text Effect Using Styles Written by Gregory Scot Collins Saturday, 11 March 2006, 1:45 PM Product: Photoshop Create a monochromatic dream text effect using styles. Create a Monochromatic Dream Text Effect Using Styles
	Click to view Braintrove article: Combine Multiple Sums Into a Single Function Written by Gregory Scot Collins Tuesday, 22 January 2008, 5:07 AM Products: Excel and Office Write shorter, more concise and readable function statements by harnessing the power of ranges and multiple arguments. Combine Multiple Sums Into a Single Function
	Click to view Braintrove article: Configure Windows to Show Clocks for Multiple Time Zones Written by Gregory Scot Collins Wednesday, 31 October 2007, 8:30 PM Product: Windows Windows Vista can help you keep your time zones straight by showing additional clocks. This is extremely useful when engaged in international business, dealing with scattered family members, or investing in the stock market. Configure Windows to Show Clocks for Multiple Time Zones

		Books
	New Perspectives on HTML and XHTML, Comprehensive
	Oracle HTML DB Handbook
	HTML & XHTML: The Complete Reference
	Teach Yourself Visually HTML
	Embedding Perl in HTML With Mason

		Magazines
	Visual Basic & Net Journal
	Soa Web Services Journal
	Inside Web Design
	.net
	Web Site Management And Internet Advertising Trends

		Microsoft MVP

This article has been viewed 650 times.

Create a Drop Cap Using CSS

Page 1 of 2

Written by Gregory Scot Collins

Tuesday, 29 August 2006, 5:31 PM

This article has been tested to work with the following products and versions. No guarantee of compatibility, with or without modification, is offered for products or versions other than those listed.

Internet Explorer 7.0 and 6.0 (Microsoft)
FireFox 2.0 and 1.5 (Mozilla)
Opera 9.0 (Opera Software)
CSS 2.0 and 1.0 (W3C)
HTML 4.01 (W3C)

IN THIS ARTICLE:

Drop caps, popular in books, magazines and elsewhere, are easy to create in HTML using style sheets. With the right design and content they make a pleasant impression to the users viewing your pages. Let's look at some simple HTML that creates a drop cap using CSS. We will examine how to accomplish this with default line-height as well as approximately double line-height.

Create a drop cap in a paragraph with default line-height

Our first example uses default line-height and the Copperplate font. If this font is not installed on your operating system you may substitute it with another font of your choice. When you use a different font, you might need to adjust the font-size and line-height properties in the dropCap class selector to achieve accurate positioning of the initial. Copy the contents of Listing 1 into a text editor, and then save the file as DropCap-Default.html.

<html>
    <head>
        <style>
            body {
                font-size:10.5pt;
                font-family:Copperplate;
            }
            .textBlock {
                width:400px;
            }
            .dropCap {
                float:left;
                font-size:450%;
                line-height:70%;
            }
        </style>
    </head>
    <body>
 
        <div class="textBlock">
            <span class="dropCap">W</span>e the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain and establish this Constitution for the United States of America.
        </div>
 
    </body>
</html>

Listing 1. The DropCap-Default.html file.

The key to the drop cap is in the style sheet. By setting the float property to left, the span containing the drop cap initial stays to the left and pushes lines of the paragraph to the right. The font-size property specifies how big the initial appears and the line-height property is useful to control the number of paragraph lines that are pushed to the right.

Try it

Launch the HTML file you just created in your favorite browser to see the results. The Internet Explorer, FireFox and Opera browsers render the HTML in Listing 1 as shown in Screenshot 1:

Screenshot 1. Drop cap rendered in paragraph with default line-height.

CONTINUED: Create a drop cap in a paragraph with double line-height

1 | 2 | Next >

		Bookmark this Article
	Stumble It!
	Digg It!
	del.icio.us

		List of Figures
	Listing 1 - The DropCap-Default.html file.
	Screenshot 1 - Drop cap rendered in paragraph with default line-height.
	Listing 2 - The DropCap-Double.html file.
	Screenshot 2 - Drop cap rendered in paragraph with double line-height.

		Article Tags
	CSS Drop Caps FireFox float Fonts font-size HTML Internet Explorer line-height Opera Style Sheets

		Great Deals
	TigerDirect Exclusive Deals, Limited Time Offers, Act Now And Save!
	Find all current special offers on Adobe products.

Copyright © 2006-2010 Braintrove. All rights reserved. Braintrove, braintrove.com, and the Braintrove logo are trademarks of Gregory Scot Collins in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. Any rights not expressly granted herein are reserved.