Capitalize The First Letter of a Paragraph with CSS

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>

Display browser badges depending on what browser the user is viewing in?

Do you want to display a "Get Firefox" button to all Internet Explorer users but not to Firefox users? Maybe an upgrade to IE7 button to IE6 users? Heres how:

<!--[if IE]>
	<p><a href="http://www.mozilla.com/firefox/">
    <img src="images/firefox.jpg" alt="Get Firefox!"/></a></p>
<![endif]-->

<!--[if IE 6]>
	<p><a href="http://www.microsoft.com/windows/products/
winfamily/ie/default.mspx">
    <img src="images/ie7_badge.jpg" alt="Upgrade to IE7"/></a></p>
<![endif]-->

Now test in Firefox, then IE7 and IE6 and notice the difference!

Download Example Files

Underline your Heading Text

If you want to underline all of your h2 headings, add this simple css:

h2 {
    display: block;
    width: 50%;
    color: #FFFFFF;
    border-bottom: 2px solid #FFF;
} 

To center the text add one line of code to the above css:

h2 {
    display: block;
    width: 50%;
    color: #FFFFFF;
    border-bottom: 2px solid #FFF;
    text-align: center;
    }

Or for variety add a dashed underline

h2 {
    display: block;
    width: 50%;
    color: #FFFFFF;
    border-bottom: 2px dashed #FFF;
    }