Adding a drop cap to Blogger

Neal Grosskopf wrote an article CSS Drop Caps Without Unnecessary HTML Elements or Classes.

I tried it with my Blogger here and I found a small adjustment to work in Blogger.
What you have to do is create class dropcap and add CSS.

You can see a big N at the beginning of this paragraph.


 .dropcap
 {
 background: #990000;
 border: 4px double #ffcc00;
 color: #ffffff;
 float: left;
 font-family: "Times New Roman", Times, serif;
 font-size: 3em;
 font-weight: bold;
 margin: 0 10px 0 0;
 padding: 10px;
 text-transform: uppercase;
 }

And you need to add span with class="dropcap" to the first letter of your paragraph like this.


<span class="dropcap">B</span>BC News.

It becomes like this.
BBC News.

You can add more class like .blue after .dropcap


.blue 
{
 background: #3B7CEF;
}

And add this class to a span tag.


<span class="dropcap blue">C</span>NN News.

CNN News.

Web Development Sandpit