# H. Style sheet for XHTML 2

This appendix is normative.

This Appendix defines a normative [CSS2] style sheet for XHTML 2. While visual user agents implementing XHTML 2 are not required to support CSS2, they are required to behave as if the following CSS2 styles are in effect.

Normative CSS2 style sheet is needed

We need a normative style sheet. There is a start of one (included below), but it needs more work. This is less than alpha-release quality at the moment and not suitable for general use.

    @namespace url("http://www.w3.org/2002/06/xhtml2");

    /*  A sample style sheet for XHTML 2.0

        This style sheet describes a very incomplete, sample rendering of
        XHTML 2.0 elements.

        Editor: Masayasu Ishikawa <mimasa@w3.org>
        Revision: $Id: xhtml2.css,v 1.1.2.9 2005/05/21 22:12:14 ahby Exp $
    */

    /* new elements */

    section, h, nl, label, l, blockcode, separator, di
                    { display: block; }
    section, h, nl, label, l, blockcode, di
                    { unicode-bidi: embed }
    nl              { margin: 1.33em 0 }
    summary, standby, handler
                    { display: none }
    blockcode       { font-family: monospace; white-space: pre }
    separator       { border: 1px inset }
    h               { display: block; font-weight: bolder; }
    body h {
      font-size: 2em;
      margin: .67em 0;
    }

    section h {
      font-size: 1.5em;
      margin: .83em 0;
    }

    section section h {
      font-size: 1.17em;
      margin: 1em 0;
    }

    section section section h, p, blockquote, ul, ol, dl
                    { margin: 1.33em 0; }

    section section section section h {
      font-size: .83em;
      line-height: 1.17em;
      margin: 1.67em 0;
    }

    section section section section section h {
      font-size: .67em;
      margin: 2.33em 0;
    }

    *[edit="deleted"]  { display: none }
    /* no special presentation by default
    *[edit="inserted"] {  }
    *[edit="changed"]  {  }
    *[edit="moved"]    {  }
    */

    /* experimental navigation list style */

    nl {
      height: 1.5em;
      overflow: hidden;
      margin: 0;
      line-height: normal !important;
      white-space: nowrap;
      text-align: start;
      cursor: default;
      border-width: 2px !important;
      border-style: inset !important;
      vertical-align: baseline;
      padding: 0;
    }

    nl:hover { height: auto; overflow: visible; }

    nl > li, nl > label {
      display: block;
      min-height: 1em;
      line-height: normal !important;
    }
    nl > li, nl > label {
      padding: 0 5px 0 3px;
    }
    nl > li {
      margin-left: 1em;
    }
    nl > label {
      font-weight: bold;
    }

    nl > nl > label {
      display: block;
      line-height: normal !important;
      font-style: italic;
      font-weight: bold;
    }

    nl > nl > li {
      padding-left: 2em;
      font-style: normal;
      font-weight: normal;
    }

    @media print {
      h             { page-break-after: avoid; page-break-inside: avoid }
      blockcode
                    { page-break-inside: avoid }
    }

    @media aural, speech {
      h {
         voice-family: paul, male;
         stress: 20;
         richness: 90;
         pitch: x-low;
         pitch-range: 90;
      }

      section h {
         pitch: x-low;
         pitch-range: 80;
      }

      section section h {
         pitch: low;
         pitch-range: 70;
      }

      section section section h {
         pitch: medium;
         pitch-range: 60;
      }

      section section section section h {
         pitch: medium;
         pitch-range: 50;
      }

      section section section section section h {
         pitch: medium;
         pitch-range: 40;
      }

      blockcode {
         pitch: medium; pitch-range: 0; stress: 0; richness: 80
      }
    }

    /* inherited elements */

    html, body, div, p, h1, h2, h3, h4, h5, h6,
    address, blockquote, pre, ol, ul, dl, dt, dd
                    { display: block }
    li              { display: list-item }
    head, style, link, meta
                    { 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.2 }
    h1              { font-size: 200%; margin: .67em 0 }
    h2              { font-size: 150%; margin: .83em 0 }
    h3              { font-size: 117%; margin: 1em 0 }
    h4, p, blockquote, ol, ul, dl
                    { margin: 1.33em 0 }
    h5              { font-size: 83%; line-height: 1.17em; margin: 1.67em 0 }
    h6              { font-size: 67%; margin: 2.33em 0 }
    h1, h2, h3, h4, h5, h6
                    { font-family: sans-serif; font-weight: bolder }
    strong          { font-weight: bolder }
    blockquote      { margin-left: 4em; margin-right: 4em }
    cite, em, var, address
                    { font-style: italic }
    pre code, kbd, samp
                    { font-family: monospace }
    pre             { white-space: pre }
    sub, sup        { font-size: smaller }
    sub             { vertical-align: sub }
    sup             { vertical-align: super }
    ol, ul, dd      { margin-left: 4em }
    ol              { list-style-type: decimal }
    ol ul, ul ol, ul ul, ol ol
                    { margin-top: 0; margin-bottom: 0 }

    abbr[title]     { border-bottom: dotted 1px }
    :link           { text-decoration: underline; color: blue; }
    :focus          { outline: thin dotted invert }

    /* Hover effects should be default */

    :link:hover,:link:visited   { color: #b7f }

    /* begin bidirectionality settings (do not change) */

    *[dir="ltr"]    { direction: ltr; unicode-bidi: embed }
    *[dir="rtl"]    { direction: rtl; unicode-bidi: embed }
    *[dir="lro"]    { direction: ltr; unicode-bidi: bidi-override }
    *[dir="rlo"]    { direction: rtl; unicode-bidi: bidi-override }

    /* block-level elements */
    body, div, p, hr, h1, h2, h3, h4, h5, h6,
    address, blockquote, pre, ol, ul, li, di, dt, dd,
    table, thead, tbody, tfoot, tr, td, th,
    col, colgroup, caption, object, summary, standby, blockcode
                    { unicode-bidi: embed }
    /* end bidi settings */

    @media print {
      h1, h2, h3, h4, h5, h6
                    { page-break-after: avoid; page-break-inside: avoid }
      blockquote, pre
                    { page-break-inside: avoid }
      ul, ol, dl    { page-break-before: avoid }
    }

    @media aural, speech {
      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     { 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 }
      :link         { voice-family: harry, male }
      :visited      { voice-family: betty, female }
      :active       { voice-family: betty, female; pitch-range: 80; pitch: x-high }
    }

    /* end xhtml2.css */