Decorative Initial Cap
Examples
Learn how to use CSS in different ways to create an initial cap on your paragraph.
- Simple Initial Cap
- Fancier Initial Cap
- Centered Initial Cap
- Adjacent Initial Cap
- Fancy Initial Cap
- Put Them All Together
- Graphical Initial Cap
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>Jennifer Kyrnin
.initial { display: none; }
p.capL {
line-height: 1em;
background-image: url(capL.gif);
background-repeat: no-repeat;
text-indent: 95px;
padding-top: 72px;
}
