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]
