Appendix C. Sample HTML 4 Style Sheet

The following style sheet is adapted from Appendix D of the CSS2.1 specification. There are two important things to note. The first is that while CSS2.1 says that "developers are encouraged to use [this] as a default style sheet in their implementations," this isn't always possible. For example, there is a rule that states:

 ol, ul, dir, menu, dd                 {margin-left: 40px;} 

This describes the legacy indenting of lists to a distance of 40 pixels, and it uses a left margin to do it. However, some browsers have used a 40-pixel left padding instead of a margin, believing this to be a better solution. (See Chapter 12 for details.) Therefore, you cannot rely on this as the exact default style sheet for any given user agent. It is provided more for illustrative purposes and as a learning tool.

The second thing to note is that not all HTML elements are fully described in this style sheet because CSS is not yet detailed enough to completely and accurately describe them. The classic examples are form elements, such as submit buttons, which are replaced elements but have their own special formatting needs. Submit buttons are replaced elements, and thus the bottom edge of their box should align with the baseline. Authors, however, are likely to expect the text inside the button to align with the baseline of other text in the same line. This is a reasonable expectation, but CSS does not (as of this writing) have the ability to describe such behavior; therefore, all that is said about such elements is the following rule:

 button, textarea, input, object, select, img {                  display:inline-block;} 

The rest of the formatting of such elements is left to the user agent.

With these caveats in mind, here is the style sheet (with some slight reformatting) found in the CSS2 specification. Any changes other than reformatting are noted in comments.

 address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre {                  display: block;} li              {display: list-item;} head            {display: none;} table           {display: table;} tr              {display: table-row;} thead           {display: table-header-group;} tbody           {display: table-row-group;} tfoot           {display: table-footer-group;} col             {display: table-column;} colgroup        {display: table-column-group;} td, th          {display: table-cell;} caption         {display: table-caption;} th              {font-weight: bolder; text-align: center;} caption         {text-align: center;} body            {padding: 8px; line-height: 1.12em;} h1              {font-size: 2em; margin: .67em 0;} h2              {font-size: 1.5em; margin: .75em 0;} h3              {font-size: 1.17em; margin: .83em 0;} h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu {                  margin: 1.12em 0;} h5              {font-size: .83em; margin: 1.5em 0;} h6              {font-size: .75em; margin: 1.67em 0;} h1, h2, h3, h4, h5, h6, b, strong {                  font-weight: bolder;} blockquote      {margin-left: 40px; margin-right: 40px;} i, cite, em, var, address  {                  font-style: italic;} pre, tt, code, kbd, samp {                  font-family: monospace;} pre             {white-space: pre;} button, textarea, input, object, select, img {                  display:inline-block;} big             {font-size: 1.17em;} small, sub, sup {font-size: .83em;} sub             {vertical-align: sub;} sup             {vertical-align: super;} s, strike, del  {text-decoration: line-through;} hr              {border: 1px inset;} ol, ul, dir, menu, dd  {                  margin-left: 40px;} ol              {list-style-type: decimal;} ol ul, ul ol, ul ul, ol ol {                  margin-top: 0; margin-bottom: 0;} u, ins          {text-decoration: underline;} br:before       {content: "\A";} center          {text-align: center;} abbr, acronym   {font-variant: small-caps; letter-spacing: 0.1em;} :link,:visited {text-decoration: underline;} :focus          {outline: thin dotted invert;} /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"]  {direction: ltr; unicode-bidi: bidi-override;} BDO[DIR="rtl"]  {direction: rtl; unicode-bidi: bidi-override;} *[DIR="ltr"]    {direction: ltr; unicode-bidi: embed;} *[DIR="rtl"]    {direction: rtl; unicode-bidi: embed;} @media print {   h1            {page-break-before: always;}   h1, h2, h3, h4, h5, h6 {                  page-break-after: avoid;}   ul, ol, dl    {page-break-before: avoid;} } @media aural {  /* changed from 'speech' which was not defined in CSS2 */   h1, h2, h3, h4, h5, h6 {                  voice-family: paul, male; stress: 20; richness: 90;}   h1            {pitch: x-low; pitch-range: 90;}   h2            {pitch: x-low; pitch-range: 80;}   h3            {pitch: low; pitch-range: 70;}   h4            {pitch: medium; pitch-range: 60;}   h5            {pitch: medium; pitch-range: 50;}   h6            {pitch: medium; pitch-range: 40;}   li, dt, dd    {pitch: medium; richness: 60;}   dt            {stress: 80;}   pre, code, tt {pitch: medium; pitch-range: 0; stress: 0; richness: 80;}   em            {pitch: medium; pitch-range: 60; stress: 60; richness: 50;}   strong        {pitch: medium; pitch-range: 60; stress: 90; richness: 90;}   dfn           {pitch: high; pitch-range: 60; stress: 60;}   s, strike     {richness: 0;}   i             {pitch: medium; pitch-range: 60; stress: 60; richness: 50;}   b             {pitch: medium; pitch-range: 60; stress: 90; richness: 90;}   u             {richness: 0;}   a:link        {voice-family: harry, male;}   a:visited     {voice-family: betty, female;}   a:active      {voice-family: betty, female; pitch-range: 80; pitch: x-high;} }