1. Technology
Send to a Friend via Email

Decorative Initial Cap

Examples

Learn how to use CSS in different ways to create an initial cap on your paragraph.

Simple Initial Cap

Consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, ut enim ad minim veniam, velit esse cillum dolore. Sed do eiusmod tempor incididunt duis aute irure dolor mollit anim id est laborum. Ut labore et dolore magna aliqua. Cupidatat non proident, in reprehenderit in voluptate excepteur sint occaecat.

p:first-letter { font-size : 300%; }

And this is a better simple initial cap. It's better because the leading of the first line is not larger than the subsequent lines in the paragraph. Sed do eiusmod tempor incididunt duis aute irure dolor mollit anim id est laborum. Ut labore et dolore magna aliqua. Cupidatat non proident, in reprehenderit in voluptate excepteur sint occaecat.

p:first-letter { font-size: 300%; }
p:first-line { line-height: 100%; }

Return to Decorative Initial Caps Article

Fancier Initial Cap

Ullamco laboris nisi eu fugiat nulla pariatur. Velit esse cillum dolore duis aute irure dolor lorem ipsum dolor sit amet. Ut enim ad minim veniam, mollit anim id est laborum. Sunt in culpa sed do eiusmod tempor incididunt ullamco laboris nisi.

p:first-letter {
font-size : 300%;
background-color: #000;
color: #fff;
}
p:first-line { line-height: 100%; }

Return to Decorative Initial Caps Article

Centered Initial Cap

Sed do eiusmod tempor incididunt lorem ipsum dolor sit amet, excepteur sint occaecat. Cupidatat non proident, consectetur adipisicing elit, ut labore et dolore magna aliqua. Mollit anim id est laborum. Velit esse cillum dolore qui officia deserunt duis aute irure dolor. In reprehenderit in voluptate sed do eiusmod tempor incididunt eu fugiat nulla pariatur.

p:first-letter {
font-size : 300%;
background-color: #000;
color: #fff;
}
p:first-line { line-height: 100%; }
p { text-indent: 45%; }

Return to Decorative Initial Caps Article

Adjacent Initial Cap

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

p {
text-indent: -2.5em;
margin-left: 3em;
}
p:first-letter { font-size: 3em; }
p:first-line { line-height: 100%; }

Return to Decorative Initial Caps Article

Fancy Initial Cap

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

p:first-letter {
font-size: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", cursive;
}
p:first-line { line-height: 100%; }

Return to Decorative Initial Caps Article

Put Them All Together

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

p { text-indent: 45%; }
p:first-letter {
padding: 0.1em;
font-size: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", cursive;
background-color: #000;
color: #fff;
}
p:first-line { line-height: 100%; }

Return to Decorative Initial Caps Article

Graphical Initial Cap

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<p class="capL"><span class="initial">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, ... </p>

.initial { display: none; }
p.capL {
line-height: 1em;
background-image: url(capL.gif);
background-repeat: no-repeat;
text-indent: 95px;
padding-top: 72px;
}

Return to Decorative Initial Caps Article

Jennifer Kyrnin

©2014 About.com. All rights reserved.