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.
Leave a Comment