font-text-styles.html (963B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Testing first-letter handling of font/text styles</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 7 <style type="text/css"> 8 html { overflow: hidden; } 9 body { 10 margin: 1em; 11 font-size: 25px; 12 line-height: 1.2em; 13 font-family: serif; 14 } 15 16 div { width: 200px; } 17 p { width: 0.5em; margin: 0; } 18 p:first-letter { font-weight: bold; text-transform: uppercase; } 19 p.reverse:first-letter { font-style: italic; text-transform: lowercase; } 20 span.floater { float: left; } 21 span.floater:first-letter { font-family: sans-serif; text-transform: uppercase; } 22 span.special { display: inline-block; } 23 span.special:first-letter { font-weight: bold; text-transform: uppercase; } 24 </style> 25 26 </head> 27 <body> 28 <div> 29 <p>yellow corndog</p> 30 <p class="reverse">HIPPIE BANANA</p> 31 <p><span class="floater">gonzo macadamia</span></p> 32 <p class="reverse">FELICITOUS <span class="special">raspberry</span></p> 33 </div> 34 </body> 35 </html>