1st letter different size/font for each p

Forum Moderators: not2easy

Message Too Old, No Replies

1st letter different size/font for each p

class, nth-child, first-letter and line-height

Lorel

4:23 pm on Feb 8, 2011 (gmt 0)

I'm trying to set up pages so the first letter in each paragraphs is larger than normal and also a different font.

Here is the css.

p:first-letter {
font-size:24px;
font-family: Times, serif; }

The above works fine on this paragraph:

Blah blah blah blah blah.

However I want the first letter in the first paragraph to be even larger than the 1st letter in all other paragraphs and I can't get that to work. The letters will only go so high even though I put a span tag around the first letter in first paragraph. When displayed in a browser the 1st paragraph moves down a bit to accomodate the specified size of the first letter but the letter doesn't increase in size.

Blah blah blah blah blah.

Can anyone tell me how to fix this?

birdbrain

5:32 pm on Feb 9, 2011 (gmt 0)

Hi there Lorel,

try it like this...


<!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=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
 
<title>Paragraph first letter</title> 
 
<style type="text/css"> 
div { 
 width:760px; 
 padding:10px; 
 border:3px double #999; 
 margin:auto; 
 } 
p:first-letter { 
 font-family:times,serif; 
 font-size:24px; 
 }  
.bigger:first-letter { 
 font-size:42px; 
 color:#600; 
 } 
</style> 
 
</head> 
<body> 
 
<div> 
 
<p> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac  
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh  
orci quis mi.  
</p> 
<p class="bigger"> 
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,  
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum  
augue non purus.  
</p> 
<p> 
Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque  
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat  
quis ante.  
</p> 
<p class="bigger"> 
Cras dictum semper ante. Vivamus fermentum, neque non commodo congue, lacus lectus  
elementum elit, vitae placerat nisl nibh vitae tortor. In molestie fermentum tellus. Nunc  
dolor quam, venenatis vel, gravida sit amet, imperdiet sit amet, mi. Nulla facilisi. Nunc  
pede orci, elementum eget, facilisis id, viverra vel, leo. Duis eu mauris eget felis  
lobortis iaculis. Etiam elit metus, posuere ut, tempor eget, commodo eget, leo. Vivamus  
elementum. Quisque fringilla orci sit amet nulla. 
</p> 
 
</div> 
 
</body> 
</html>

birdbrain

Fotiman

5:56 pm on Feb 9, 2011 (gmt 0)

However I want the first letter in the first paragraph to be even larger than the 1st letter in all other paragraphs

The following should work on all major browsers (except IE):


<!DOCTYPE html>
<head>
<style>
p:first-letter {
  font-size: 200%;
}
p:nth-child(1):first-letter {
  font-size: 400%;
}
</style>
<title>Test</title>
</head>
<body>
<p>
  Paragraph 1
</p>
<p>
  Paragraph 2
</p>
<p>
  Paragraph 3
</p>
</body>
</html>

IE supports the :first-letter selector, but not the :nth-child selector (though IE9 supposedly will support :nth-child as well).

Note, I used relative font sizes in my example, but absolute sizes should work too.

Lorel

7:05 pm on Feb 9, 2011 (gmt 0)

Thanks Fotiman, I haven't used that method before. It makes more sense. However it's not working (the formatting for all paragraphs is applied to the first paragraph like all the others) and W3C indicates this code (p:nth-child(1):first-letter) does not validate. It gives this error:'

Unknown pseudo-element or pseudo-class :nth-child

Can you tell me what might be wrong with this CSS?

p:nth-child(1):first-letter
{ color:#800000;
font-size:400%;
font-family: 'Apple Chancery', 'Zaph Chancery','URW Chancery L', cursive; }

p:first-letter { font-size:24px;
color:#800000; }

I tried sizing them with pixels and percent and no change.

Fotiman

7:26 pm on Feb 9, 2011 (gmt 0)

:nth-child is CSS3. Validate it as CSS3 instead of CSS2.1 and you will see it validates. :)

the formatting for all paragraphs is applied to the first paragraph like all the others

First, I would put the more specific declaration last (p:first-letter styles first, then p:nth-child(1):first-letter last). What browser are you using, because I've tested my sample code in Chrome, Safari, Firefox, and Opera, and it works as described in all of those browsers. And as I mentioned, it does not work for IE < IE9.

birdbrain

7:53 pm on Feb 9, 2011 (gmt 0)

My method will will work in IE6. ;)

birdbrain

Lorel

8:27 pm on Feb 9, 2011 (gmt 0)

Ahhh. I read yours wrong in the first post Birdbrain. I thought you were formatting the whole paragraph. It's working now with this css (didn't work until I took out % and inserted PX for font size).

p:first-letter { font-size:24px;
color:#800000; }

.bigger:first-letter {
font-size:42px;
font-family: 'Apple Chancery', 'Zaph Chancery','URW Chancery L', cursive; }

PS. I'm using Safari and Firefox on the Mac. I can't test it on my PC right now -- it's fried. Getting another later today.

Thanks to both of you.

Lorel

8:36 pm on Feb 9, 2011 (gmt 0)

Opps. I just noticed there is now an extra space under the first line of each paragraph due to the increased size of the font in first line. I added margin-bottom:0 and padding-bottom:0 to each and that didn't fix it.

Can someone tell me what's causing this?

birdbrain

8:43 pm on Feb 9, 2011 (gmt 0)

Hi there Lorel,

you need to experiment with line-height values in the :first-letter rules. ;)

birdbrain

Lorel

10:55 pm on Feb 9, 2011 (gmt 0)

Setting the line-height to normal for each one fixed it. Thanks.

birdbrain

11:22 pm on Feb 9, 2011 (gmt 0)

No problem, you're very welcome. ;)

birdbrain