CSS: The Definitive Guide, 3rd Edition (76 page)

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;}
}