Proper CSS Code for Drop Caps

[BryGuy]

I’m pretty green when it comes to CSS code. Most of my coding knowledge is based on hacking up someone else’s.

I created the following and stuck it up in the Typography part of my CSS:

cap {

margin: 0;

padding: 0 0 18px 0;

word-spacing: 2px;

line-height: 1.2em;

font-family: 'Francois One', sans-serif;

font-size: 24px;

font-weight: 400;

color: #2a2a2a;

}

In my post I simply insert the following HTML

D

for the first letter of the sentence. I only want to apply the dropcap to the letter of the post (which all ways starts after an opening quote) and not the beginning of each paragraph.

It seems to work just fine, but I’m sure it’s not the right way to do it. Should I be using a class like:

.dropcap {

margin: 0;

padding: 0 0 18px 0;

word-spacing: 2px;

line-height: 1.2em;

font-family: 'Francois One', sans-serif;

font-size: 24px;

font-weight: 400;

color: #2a2a2a;

}

and insert the following HTML

 D 

If the span class is the way to go, where’s the proper place to insert it in my CSS?

[GMB]

Take a look at this page, from the venerable CSS-Tricks website, or this one for explanations on how to create drop caps for the web.

And, technically speaking, since your initial cap doesn’t drop below the baseline, it’s not a drop cap. And don’t forget that drops caps should be mortised, and not left all alone in a blank rectangle in the upper left of the text block (unless the cap in question is a one-letter word like “I” or “A”).

[BryGuy]

Thanks for the reply and correction. The links were very useful too.

[Author]

Posts