• Print Article
• Email Article
• Report it

CSS

.capital {
font:70px/50px Georgia, "Times New Roman", Times, serif;
color: #003300;
background: #CCCC99;
border: 1px solid #003300;
padding: 5px 5px 2px 4px;
margin-right: 5px;
margin-top: 2px;
float: left;
}

You'll see I chose a font size of 70 pixels and a line height of 50 pixels. I have specified a line height so that I can control the space around the letter "A".

The rest of the properties add the border, and give just the right amount of spacing around the "A".

Finally the letter "A" is Floated left so the extra paragraph text will wrap around.

HTML

<span class="capital">A</span>
<p>dding a capital letter to the beginning of a
paragraph, isn't difficult at all.
Just one additional class in css and
a span added to the html and a simple paragraph now has a unique style!</p>
<p>See the css and html code below.</p>

• How can I display the text 'Please turn your javascript on' if the user does not have javascript on, but not display the message to those who do?
• Use Shorthand CSS to lighten file load time.
• Organise your HTML with Comments
• Adding a StyleSheet to an RSS Feed
• Comment Your CSS