How to make large first letter of paragraph?

Discuss HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets)

Moderators: Chuck, Ilbin, Vanessa

How to make large first letter of paragraph?

Postby bobinyec on Fri Mar 27, 2009 6:06 pm

I recently saw a webpage in which the first letter of the first word of a paragraph was large, with the text of the first two lines wrapping around it. This is typical of what you would see in a book. How is that done?

Thanks,
JB
bobinyec
Forum User
 
Posts: 1
Joined: Fri Mar 27, 2009 5:32 pm

Re: How to make large first letter of paragraph?

Postby Vanessa on Fri Mar 27, 2009 7:03 pm

It depends...if you were looking at a site like Wordpress it was likely a plugin that did this.
Vanessa Vasile
System Administration
http://inmotionhosting.com
My site (Hosted by IMH!)v-nessa.net
User avatar
Vanessa
Administrator
 
Posts: 393
Joined: Tue Aug 15, 2006 10:31 am
Location: Virginia Beach, VA

Re: How to make large first letter of paragraph?

Postby Wilsonsway on Sat Mar 28, 2009 3:44 am

It's possible to do this with an image too and let the remainder of the text wrap around it giving it the same look and feel as that of the book you mentioned. :wink:

Just fire up whatever image editor you use (such as Fireworks, Photoshop or GIMP) and just use the text editor part to create the look you're wanting.
Wilsonsway
User avatar
Wilsonsway
Forum User
 
Posts: 70
Joined: Sat May 24, 2008 4:22 am
Location: Southeast, USA

Re: How to make large first letter of paragraph?

Postby damiancds on Fri May 08, 2009 7:22 pm

I would recommend you look at W3Schools, they've got great examples and their easy to learn from.

For your first letter of the paragraph, I'd look at this example http://www.w3schools.com/css/tryit.asp?filename=trycss_float4

of course, this method uses css, and if you're unfamiliar with it, you might want to stay away or pick up some new tricks
damiancds
Forum User
 
Posts: 1
Joined: Fri May 08, 2009 7:18 pm

Re: How to make large first letter of paragraph?

Postby hashim on Sun Jul 26, 2009 1:14 am

You can try this

p {font-size: 12pt}
p:first-letter {color:#ff0000;font-size:xx-large}
hashim
Forum User
 
Posts: 4
Joined: Thu Apr 16, 2009 7:58 am


Return to HTML and CSS

Who is online

Users browsing this forum: No registered users and 1 guest