You are here: Features > Styles and Style Sheets > More About Editing Styles > Creating Drop Caps Effects

Creating Drop Caps Effects

If you want to create a drop caps effect in a paragraph, causing the initial letter to look different and drop below the first line, you can use Flare's first-letter pseudo class.

How to create a drop caps effect

Open the topic style sheet that you want to modify.
Make sure the appropriate medium is selected. If you are not using style sheet mediums for your different outputs or if you want all mediums to have the same settings, just leave the medium set to "default" and continue.

Mediums can be used if you want to use one group of settings for online output types (DotNet Help, HTML Help, WebHelp, WebHelp Plus, WebHelp AIR, WebHelp Mobile) and another group of settings for print-based output types (Adobe PDF, XHTML, Microsoft XPS, Microsoft Word, Adobe FrameMaker). For example, you might use the "default" medium for your online outputs and you might use the "print" medium for your print outputs. See About Style Sheet Mediums.
In the local toolbar, make sure the first button displays (which means that the Advanced view is currently shown in the editor). If the button displays instead, then click it.
In the upper-left corner of the editor, click in the Show Styles field and select Show Paragraph Styles.
Select the paragraph style for which you want to create the drop caps effect.
In the local toolbar, click . The New Pseudo Class dialog opens.
Select First Letter.
Click OK.

The new class is added under a "(Pseudo Classes)" heading and is automatically selected.
From the Show Properties drop-down list on the upper-right side of the editor, select Show: Property Groups.
Modify the necessary properties to give the first letter a different look than the rest of the paragraph. Following are some of the more common changes for an effect such as this.
Font color:
1. In the Properties section, click the plus button next to Font to expand the group.
2. To the right of color, click the down arrow and select a color from the popup. For advanced color options, select More Colors and use the fields in the Color Picker dialog.
Font family:
1. In the Properties section, click the plus button next to Font to expand the group.
2. Click to the right of font-family. The Font Family Picker dialog opens. Use this dialog to select a font family.
Font size:
1. In the Properties section, click the plus button next to Font to expand the group.
2. To the right of font-size, click the down arrow and set the font size in the popup. When you are finished, click OK.
Font weight:
1. In the Properties section, click the plus button next to Font to expand the group.
2. To the right of font-weight, click the down arrow and select a weight (e.g., bold).
Space after:
1. In the Properties section, click the plus button next to Block to expand the group.
2. To the right of letter-spacing, click the down arrow and select the amount of space after the initial letter, before the rest of the paragraph text. When you are finished, click OK.
Modify the necessary properties to produce the effect of the initial letter dropping below the first line. Usually this involves floating the letter to the left and adjusting the margins above and/or below it, as well as to the right.
Float:
1. In the Properties section, click the plus button next to Box to expand the group.
2. Click to the right of float, and select left.
Margins above/below/right:
1. In the Properties section, click the plus button next to Box to expand the group.
2. To the right of margin-bottom, margin-right, and/or margin-top, click the down arrow and select the amount of space around the initial letter. You can even enter negative numbers if necessary. When you are finished, click OK.
Press CTRL+S or click to save your work.

Note: In order to use this feature, you must ensure that the first letter of the paragraph is not preceded by any other content (such as an image).

Note: You can also use the first-child pseudo class, which lets you apply style settings to the first child of another element (e.g., the first <p> tag that occurs within a <div> tag).