CSS Master

CreatingadropcapitalrequiresafewmorelinesofCSS.Unlikeaninitialcapital,

theadjacenttexttothedropcapitalletterwrapsaroundit.Thismeansthatweneed

toaddfloat: left;toourruleset.We’llalsoaddtop,right,andbottommargins:

01-selectors/pseudo-el-first-letter-drop.html (excerpt)

p::first-letter {

font: bold italic 3em / .5 serif;

font-style: italic;

color: #607d8b;

float: left;

margin: 0.2em 0.25em .01em 0;

}

Floatinganelement,orinthiscaseapseudo-element,causestheremainingtextto

flowaroundit,asillustratedinFigure1.14.

Figure 1.14. Creating a drop capital with ::first-letter

Beawarethat::first-lettercanbedifficulttostylewithpixel-perfectaccuracy

acrossbrowsers,unlessyouusepxorremunitsforsize,margin,andlineheight.

Sometimesthefirstletterofatextelementisactuallypunctuation;forexample,a

newsstorythatbeginswithaquote:

26 CSS Master