Font size inheritance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<style type="text/css">
body {
font-size: 62.5%;
margin: 10% 10% 20% 10%;
}
h1 {
font-size: 2.5em;
font-family: Myriad, Helvetica, Arial, sans-serif;
width: 66.6%;
text-shadow: yellow .15em .15em .15em;
margin: 0 0 0.1em 0;
}
p {
margin: 0 0 1em 0;
font-size: 1.2em;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="frame">
<h1>A Good Sleepy is a Good Thing Indeed</h1>
<p>I had to wake up early for the dentist appointment this morning. Why is it that on the day I have to wake up really early it interferes with a good sleep? I had the blankets right where they were the most comfortable, too.</p>
<p>If that ever happens, our society should allow you to tell the other person you were late because you realized you in the middle of "a good sleepy". It's the positive version of "I was in a car accident."
<p>Try the phrase out, see how it works and report back to me.</p>
</div><!-- END #frame -->
</body>
</html>
Related examples in the same category
| 1. | Font Property and Purpose | | |
| 2. | 'font' Example | | |
| 3. | font shortcut | | |
| 4. | Font shortcut: font: bold italic 2em Georgia, Times, "Times New Roman", serif; | | |
| 5. | font: 1em/1.5 Georgia, serif | | |
| 6. | font: bold 1em/1.5 Verdana, sans-serif | | |
| 7. | font: italic 1em/1.5 Georgia, serif; | | |
| 8. | Font color | | |
| 9. | font: status-bar | | |
| 10. | font: small-caption | | |
| 11. | font: message-box | | |
| 12. | font: menu | | |
| 13. | font: caption; | | |
| 14. | font: icon; | | |
| 15. | font: menu; | | |
| 16. | font: message-box; | | |
| 17. | font: small-caption; | | |
| 18. | font: status-bar; | | |
| 19. | font: italic small-caps bold 1.5em/3em sans-serif; | | |
| 20. | font: 32px "Monotype Corsiva"; | | |
| 21. | font: 16px sans-serif; | | |
| 22. | font: bold 24px sans-serif; | | |
| 23. | font: italic bold small-caps 24px sans-serif; | | |
| 24. | font: 16px monospace; | | |
| 25. | This font is 1.2 times the default font, or 20 pixels. | | |
| 26. | font-size is inheritable | | |
| 27. | Making font size smaller and smaller | | |
| 28. | This font size is 50% bigger | | |
| 29. | This font size is 25% smaller | | |
| 30. | font style | | |
| 31. | font style no italic no oblique | | |
| 32. | font style oblique italic | | |
| 33. | Generic font | | |
| 34. | Multiple fonts | | |
| 35. | Using system font | | |
| 36. | Font properties | | |
| 37. | HTML code for displaying generic font families | | |
| 38. | HTML source code for displaying font size values | | |
| 39. | Using font sizes in pixels for alignment | | |
| 40. | Using keyword font property values | | |
| 41. | Change font size with inline style | | |
| 42. | Font inheritance | | |
| 43. | CSS Built-in Fonts | | |
| 44. | CSS1 Font Properties Example | | |
| 45. | This demonstrates the use of the font-variant: small-caps; effect. | | |
| 46. | Relative font size | | |
| 47. | Test font at 100% | | |
| 48. | font: 12px sans-serif; | | |
| 49. | font-family: monospace; | | |
| 50. | font-variant: small-caps; | | |
| 51. | h4 font-weight: normal; | | |
| 52. | Using inline style to control font size for span | | |
| 53. | first-child font-weight: bold; | | |
| 54. | This font is 1 em in size and sans-serif. | | |
| 55. | Font style shortcut | | |
| 56. | Use font | | |
| 57. | This font is italic, small-caps, bold, 1em in size, with a 1.5 em line height and a sans-serif font. | | |
| 58. | make text that's italic, bold, small-caps,24 pixel sans-serif, which looks like a comic book font | | |
| 59. | Overlay font | | |
| 60. | font color 2 | | |
| 61. | System font: caption | | |
| 62. | System font: icon | | |
| 63. | System font: menu | | |
| 64. | System font: message-box | | |
| 65. | System font: small-caption | | |
| 66. | System font: status-bar | | |