Font size - Post ID 845

User 181505 Photo


Registered User
31 posts

Hi I use html editor 2007 and am running windows xp. I was wondering if anyone knows how to make the first letter of a word larger than the other letters, sort of like in a story book. I think I read it here somewhere but can't find it.
User 37670 Photo


Registered User
2,138 posts

<font size="5">T</font><font size="3">hisisarealbigwordwiththefirstletterbiggerthantherest</font>

Is this what you are looking for?

Do you just need this at the first word on a page / paragraph / first letter of every word?

Depending on how often you need the first letter bigger, .css might be a better way to go.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 364143 Photo


Guest
5,410 posts

Try a little CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Make it big</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p{color:#000000; font: Normal 10pt "Arial";}
span.first
{
float: left;
font-family: Old English, Georgia,serif;
font-size: 30pt;
line-height: 0.85em;
margin-right: 3px;
margin-bottom: -3px;
}
</style>
</head>
<body>
<p align="left"><span class="first">T</span>he first letter is<br />different than all the rest.</p>
<br /><br/>
<p align="left"><span style="font-size: 30pt;">T</span>he <span style="font-size: 30pt;">f</span>irst <span style="font-size: 30pt;">l</span>etter <span style="font-size: 30pt;">i</span>s <span style="font-size: 30pt;">b</span>ig</p>
</body>
</html>
CoffeeCup... Yeah, they are the best!
User 181505 Photo


Registered User
31 posts

Hi Cliff
Wow quick response. It's exactly what I was looking to do, I just couldn't get the code correct. I left out a part, thanks a milliion.
User 3004957 Photo


Registered User
806 posts

Even cleaner CSS, using the :first-letter psuedo-element:

<style type="text/css">
p.dcpara:first-letter {
float: left;
font-family: Old English, Georgia,serif;
font-size: 300%;
line-height: 0.85em;
margin-right: 0.03em;
margin-bottom:-0.25em;
}

Then you only have to specify the class in the html, which can save a ton of markup and time.

http://www.users.globalnet.co.uk/~arcus … pcaps.html

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.