Video
1. Place The HTML And Text
We must first place a few lines of text. I’m going to jump over to http://html-ipsum.com and grab three of the long paragraphs and just change the first word of each paragraph so there is a little variety.
2. Write The CSS3
There is a pseudo element in CSS3 called “:first-letter” which allows us to target and style the first letter of the targeted tag. We will start by targeting the first-letter of any <p> tag.
[code type=”css” title=”Code”]p:first-letter {
}[/code]
3. Set Aside First Letter
The very first thing we will do with CSS3 is display our first letter as a block level element which will allow us to really control the width, height, margin, and padding if we like. My code (This will not make much visual difference):
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
}[/code]
4. Set The First Letter Size
Next we want to increase the size of the type based on the size of the surrounding type and by setting a creative line-height we will align the top of our dropped letter with the top of our normal type. My code:
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
font-size:3em;
line-height:0.9em;
}[/code]
5. Padding
Adding 10px of padding to the left and right of our letter helps pull it away from the rest of the letters a little bit. We like this. My code:
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
font-size:3em;
line-height:0.9em;
padding:0 10px;
}[/code]
6. Color!
The finishing touch will be to add a dash of color and maybe even make these letters bold to really set them apart from the body type. My code:
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
font-size:3em;
line-height:0.9em;
padding:0 10px;
color:#bf253c;
font-weight:bold;
}[/code]
Great tutorial. Simple and to the point. Thank you for sharing. 😀
Thanks for checking it out! Glad you enjoyed.
great tutorial thank you.
Nathaniel I’ve been following you since 2009 in youtube first and then in your website, I have learned a lot of useful things with you. You made me to discover this passion for web design so in this little message Im trying to encourage you to keep up with this project of tutorials, teaching people because in this you have the power of change the world. I just want to thank you againa and again even not being an english native speaker (Im from Colombia) I’ve learn a lot you’re the best, thanks again.
Great tutorial, Nathaniel! Been following your blog for several years, now, and have tried out more than a few of your Photoshop tips. This is the first time I’ve been able to make use of one of your web design tips. I like our website, but I always felt the text was just missing…something. Now it looks MUCH better! Thank you!
Hey, why haven`t I found you earlier? Your pieces of advice saved me, because I didn`t know what to do. Digital image editing is my problem and now you will certainly help me to create eye-popping drawings! I use fixthephoto.com ad lavalu digital photo editing services which always meet my aspirations, as I am a very creative and extraordinary person and hate the work with computer programs and it is better for me to outsource photo editing.