Dropcaps in CSS

Fri 19 February 2016

Although I've tried to keep my website quite plain, without too much visual flair, one noticeable thing that I have added is the drop caps at the start of each blog post (i.e. the large capital 'A' on the left). I think this is quite stylish and it turns out that it can be achieved with a single CSS rule:

div#article-content >
p:first-of-type:first-child:first-letter {
    float: left ;
    font-family: "Fredericka the Great" ;
    font-weight: normal ;
    font-size: 4em ;
    margin: 0.15em 0.13em 0 0 ;
    line-height: 0.5em ;

The selector selects the first letter of the content of the first paragraph in the div with id article-content, which has the content for the article inside it. I then style this first letter with the Fredericka the Great font and align everything by setting the line height and the margins.