Marusya's School Notes

Float First Letter of Text

In this demonstration, we will let the first letter of a paragraph float to the left and style that letter:

HTML file:	Displayed by browser:
<style> span { float: left; width: 0.7em; font-size: 400%; font-family: algerian, courier; line-height: 80%; } </style> <body> <p><span>T</span>he first letter of the text in this paragraph is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian", or a second option of "Courier" if the computer reading this webpage does not have the "Algerian" font. </p> </body>	The first letter of the text in this paragraph is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian", or a second option of "Courier" if the computer reading this webpage does not have the "Algerian" font.

HTML file:

Displayed by browser:

<body>
<p><span>T</span>he first letter of the text in this paragraph is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian", or a second option of "Courier" if the computer reading this webpage does not have the "Algerian" font. </p>
</body>

The first letter of the text in this paragraph is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian", or a second option of "Courier" if the computer reading this webpage does not have the "Algerian" font.