CSS Drop Caps Without Unnecessary HTML Elements or Classes
Recent Articles:
- Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
- Find Unused CSS Selectors With CSS Usage
- A List of New CSS Features In Firefox 3.6
- Create An Icon Bouncing Effect With jQuery & CSS
- A jQuery Tool That Generates External Stylesheets From Your HTML Structure
Subscribe To Feed
Subscribers
Subscribers
Mar 25
Drop capitals are commonly seen in newspapers or books. They can be identified by looking at the first letter of a paragraph or a page that is usually larger than the rest of the paragraph, bolded and often times a different font-family.
I've seen many different methods to achieve this effect in HTML and CSS, most of the time the method requires unnecessary elements or classes. I'll give an example of how to do drop caps in CSS without any classes, and then I'll show you a second method which will require you to place a single class on the parent element.
Styling Our Drop Cap in CSS Without Classes
The first option is if you want to style the first P element on every page of your website with a drop cap. The selector below will first use the :first-child pseudo selector to find our first P element and then it will select the first letter of the P element with the first-letter pseudo selector.
I've added some other visual effects to our drop cap such as a background-color, font-family, text-transform, and a double'd border which is seldom used.
body p:first-child:first-letter
{
background: #990000;
border: 4px double #ffcc00;
color: #ffffff;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 3em;
font-weight: bold;
margin: 7px 10px 0px 0px;
padding: 10px;
text-transform: uppercase;
}
Using A Class
You may also want to selectively apply a drop cap to other blocks of text on your website. In this case, simply add a class to the paragraph and add this selector to your CSS:
.dropcap
{
...
}
