font-text-styles.html 963 B

123456789101112131415161718192021222324252627282930313233343536
  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. <style type="text/css">
  7. html { overflow: hidden; }
  8. body {
  9. margin: 1em;
  10. font-size: 25px;
  11. line-height: 1.2em;
  12. font-family: serif;
  13. }
  14. div { width: 200px; }
  15. p { width: 0.5em; margin: 0; }
  16. p:first-letter { font-weight: bold; text-transform: uppercase; }
  17. p.reverse:first-letter { font-style: italic; text-transform: lowercase; }
  18. span.floater { float: left; }
  19. span.floater:first-letter { font-family: sans-serif; text-transform: uppercase; }
  20. span.special { display: inline-block; }
  21. span.special:first-letter { font-weight: bold; text-transform: uppercase; }
  22. </style>
  23. </head>
  24. <body>
  25. <div>
  26. <p>yellow corndog</p>
  27. <p class="reverse">HIPPIE BANANA</p>
  28. <p><span class="floater">gonzo macadamia</span></p>
  29. <p class="reverse">FELICITOUS <span class="special">raspberry</span></p>
  30. </div>
  31. </body>
  32. </html>