Can anyone help with first-letter pseudo class?

**slaterino** · Sep 22, 2010 14:07

Hi,
I am having trouble trying to get the first-letter pseudo class to work. My aim at the moment is simply to make the first letter of the two words in my heading larger than the rest of the letter. To do this my html is:

HTML Code:

<div class="paragraph_title">
<em>DANAMAR</em> <em>PRODUCTIONS</em>
</div>

And my css is:

HTML Code:

.paragraph_title {
	float:left;
	margin-top:12px;
}
.paragraph_title em {
	font-size:1.4em;
	margin-top:12px;
	font-family:'BodoniSvtyTwoITCTT-BookIta','Bodoni SvtyTwo ITC TT','Times New Roman','serif';
}
.paragraph_title em:first-letter {
	font-size:1.8em;
}

However, at the moment the first-letter of the words are no bigger than the rest of the words. If I move the float:left property to the .paragraph_title em class then I do get larger first letters, but then there is a huge space between the two words which I can't get rid of. Does anyone know how I can resolve this?

Thanks,
Russ

**Kalon** · Sep 22, 2010 14:20

One way off the top of my head to do it.

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
.paragraph_title {
line-height: 2em;
font-size: 1em
}
 
.first_letter {
font-size: 2em
}

</style>

</head>
<body>
 
<div class="paragraph_title">

     <span class="first_letter">D</span>ANAMAR <span class="first_letter">P</span>RODUCTIONS

</div>
 
</body>
</html>

**Rayzur** · Sep 22, 2010 15:31

Hi,
Rather than using a div and em to simulate a title/heading I think I would just go ahead and use an h-tag for the job.

Then just follow that up with your p-tags and carry on. All that can be done in one wrapping div with a class so you can reuse it.

As far as styling the first-letter of the second word, just nest that first letter in a b-tag and group it together with your first-letter styles.

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
 
<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100%/1.3 'Times New Roman','serif';
    background:#CCC;
}
h1 {
    margin:12px;
    font-size:1.8em;
}
.wrap {
    float:left;
    width:450px; /*for demo*/
    margin:12px 0 0;
    background:#FFF;
    text-align:justify;
}
.wrap h2 {
    font-size:1.4em;
    margin:0 12px;
    font-family:'BodoniSvtyTwoITCTT-BookIta','Bodoni SvtyTwo ITC TT','Times New Roman','serif';
    text-transform:uppercase;
}
.wrap h2:first-letter,
.wrap h2 b {
    font-size:1.8em;
    color:red;
}
.wrap p {
    margin:0 12px 12px;
}
</style>
 
</head>
<body>
 
<h1>Danmar Page Title</h1>
 
<div class="wrap">
    <h2>Danbar <b>P</b>roductions</h2>
    <p>
        Lorem ipsum dolor sit amet consectetuer euismod laoreet et amet id. Ante turpis feugiat nec 
        cursus Phasellus vitae dapibus sodales interdum faucibus. Pellentesque nunc amet condimentum.
    </p>
</div>
 
</body>
</html>

**slaterino** · Sep 22, 2010 16:51

Awesome! That works a treat, thanks!

**rguy84** · Sep 22, 2010 18:06

Slater please read the following link, it may help as to why you are having issues: http://reference.sitepoint.com/css/p...nt-firstletter

User Tag List

Thread: Can anyone help with first-letter pseudo class?

Thread Tools

Display

Can anyone help with first-letter pseudo class?

Bookmarks

Bookmarks

Posting Permissions