cover.html

CSS lets learn this step by step...

        <li class="tocline4"><a href="about.html#q6" class="tocxref"> Value</a>
        <li class="tocline4"><a href="about.html#q7" class="tocxref"> Initial</a>
        <li class="tocline4"><a href="about.html#q8" class="tocxref"> Applies to</a>
        <li class="tocline4"><a href="about.html#q9" class="tocxref"> Inherited</a>
        <li class="tocline4"><a href="about.html#q10" class="tocxref"> Percentage values</a>
        <li class="tocline4"><a href="about.html#q11" class="tocxref"> Media groups</a>
      </ul>
      <li class="tocline3"><a href="about.html#shorthand" class="tocxref">1.3.3 Shorthand properties</a>
      <li class="tocline3"><a href="about.html#q13" class="tocxref">1.3.4 Notes and examples</a>
      <li class="tocline3"><a href="about.html#q14" class="tocxref">1.3.5 Images and long descriptions</a>
    </ul>
    <li class="tocline2"><a href="about.html#q15" class="tocxref">1.4 Acknowledgments</a>
    <li class="tocline2"><a href="about.html#copyright" class="tocxref">1.5 Copyright Notice</a>
  </ul>
  <li class="tocline1"><a href="intro.html" class="tocxref">2 Introduction to CSS2</a>
  <ul class="toc">
    <li class="tocline2"><a href="intro.html#q1" class="tocxref">2.1 A brief CSS2 tutorial for HTML</a>
    <li class="tocline2"><a href="intro.html#q2" class="tocxref">2.2 A brief CSS2 tutorial for XML</a>
    <li class="tocline2"><a href="intro.html#processing-model" class="tocxref">2.3 The CSS2 processing model</a>
    <ul class="toc">
      <li class="tocline3"><a href="intro.html#q4" class="tocxref">2.3.1 The canvas</a>
      <li class="tocline3"><a href="intro.html#q5" class="tocxref">2.3.2 CSS2 addressing model</a>
    </ul>
    <li class="tocline2"><a href="intro.html#q6" class="tocxref">2.4 CSS design principles</a>
  </ul>
  <li class="tocline1"><a href="conform.html" class="tocxref">3 Conformance: Requirements and Recommendations</a>
  <ul class="toc">
    <li class="tocline2"><a href="conform.html#q1" class="tocxref">3.1 Definitions</a>
    <li class="tocline2"><a href="conform.html#conformance" class="tocxref">3.2 Conformance</a>
    <li class="tocline2"><a href="conform.html#q3" class="tocxref">3.3 Error conditions</a>
    <li class="tocline2"><a href="conform.html#text-css" class="tocxref">3.4 <span class="index-def" title="text/css">The text/css content type</span></a>
  </ul>
  <li class="tocline1"><a href="syndata.html" class="tocxref">4 CSS2 syntax and basic data types</a>
  <ul class="toc">
    <li class="tocline2"><a href="syndata.html#syntax" class="tocxref">4.1 Syntax</a>
    <ul class="toc">
      <li class="tocline3"><a href="syndata.html#tokenization" class="tocxref">4.1.1 Tokenization</a>
      <li class="tocline3"><a href="syndata.html#keywords" class="tocxref">4.1.2 Keywords</a>
      <li class="tocline3"><a href="syndata.html#q4" class="tocxref">4.1.3 Characters and case</a>
      <li class="tocline3"><a href="syndata.html#q5" class="tocxref">4.1.4 Statements</a>
      <li class="tocline3"><a href="syndata.html#at-rules" class="tocxref">4.1.5 <span class="index-def" title="at-rule"> At-rules</span></a>
      <li class="tocline3"><a href="syndata.html#block" class="tocxref">4.1.6 Blocks</a>
      <li class="tocline3"><a href="syndata.html#q8" class="tocxref">4.1.7 Rule sets, declaration blocks, and selectors</a>
      <li class="tocline3"><a href="syndata.html#declaration" class="tocxref">4.1.8 Declarations and properties</a>
      <li class="tocline3"><a href="syndata.html#comments" class="tocxref">4.1.9 Comments</a>
    </ul>
    <li class="tocline2"><a href="syndata.html#parsing-errors" class="tocxref">4.2 Rules for handling parsing errors</a>
    <li class="tocline2"><a href="syndata.html#values" class="tocxref">4.3 Values</a>
    <ul class="toc">
      <li class="tocline3"><a href="syndata.html#q13" class="tocxref">4.3.1 Integers and real numbers</a>
      <li class="tocline3"><a href="syndata.html#length-units" class="tocxref">4.3.2 Lengths</a>
      <li class="tocline3"><a href="syndata.html#percentage-units" class="tocxref">4.3.3 Percentages</a>
      <li class="tocline3"><a href="syndata.html#uri" class="tocxref">4.3.4 URL + URN = URI</a>
      <li class="tocline3"><a href="syndata.html#counter" class="tocxref">4.3.5 Counters</a>
      <li class="tocline3"><a href="syndata.html#color-units" class="tocxref">4.3.6 Colors</a>
      <li class="tocline3"><a href="syndata.html#q19" class="tocxref">4.3.7 Angles</a>
      <li class="tocline3"><a href="syndata.html#q20" class="tocxref">4.3.8 Times</a>
      <li class="tocline3"><a href="syndata.html#q21" class="tocxref">4.3.9 Frequencies</a>
      <li class="tocline3"><a href="syndata.html#strings" class="tocxref">4.3.10 Strings</a>
    </ul>
    <li class="tocline2"><a href="syndata.html#q23" class="tocxref">4.4 CSS document representation</a>
    <ul class="toc">
      <li class="tocline3"><a href="syndata.html#q24" class="tocxref">4.4.1 Referring to characters not represented in a character encoding</a>
    </ul>
  </ul>
  <li class="tocline1"><a href="selector.html" class="tocxref">5 Selectors</a>
  <ul class="toc">
    <li class="tocline2"><a href="selector.html#q1" class="tocxref">5.1 Pattern matching</a>
    <li class="tocline2"><a href="selector.html#q2" class="tocxref">5.2 Selector syntax</a>
    <ul class="toc">
      <li class="tocline3"><a href="selector.html#grouping" class="tocxref">5.2.1 Grouping</a>
    </ul>
    <li class="tocline2"><a href="selector.html#universal-selector" class="tocxref">5.3 Universal selector</a>
    <li class="tocline2"><a href="selector.html#type-selectors" class="tocxref">5.4 Type selectors</a>
    <li class="tocline2"><a href="selector.html#descendant-selectors" class="tocxref">5.5 Descendant selectors</a>
    <li class="tocline2"><a href="selector.html#child-selectors" class="tocxref">5.6 Child selectors</a>
    <li class="tocline2"><a href="selector.html#adjacent-selectors" class="tocxref">5.7 Adjacent sibling selectors</a>
    <li class="tocline2"><a href="selector.html#attribute-selectors" class="tocxref">5.8 Attribute selectors</a>
    <ul class="toc">
      <li class="tocline3"><a href="selector.html#q10" class="tocxref">5.8.1 Matching attributes and attribute values</a>
      <li class="tocline3"><a href="selector.html#q11" class="tocxref">5.8.2 Default attribute values in DTDs</a>
      <li class="tocline3"><a href="selector.html#class-html" class="tocxref">5.8.3 Class selectors</a>
    </ul>
    <li class="tocline2"><a href="selector.html#id-selectors" class="tocxref">5.9 ID selectors</a>
    <li class="tocline2"><a href="selector.html#pseudo-elements" class="tocxref">5.10 Pseudo-elements and pseudo-classes</a>
    <li class="tocline2"><a href="selector.html#q15" class="tocxref">5.11 Pseudo-classes</a>
    <ul class="toc">
      <li class="tocline3"><a href="selector.html#first-child" class="tocxref">5.11.1 :first-child pseudo-class</a>
      <li class="tocline3"><a href="selector.html#link-pseudo-classes" class="tocxref">5.11.2 The link pseudo-classes: <span class="index-def" title="pseudo-classes:::link|:link|link (pseudo-class)">:link</span> and <span class="index-def" title="pseudo-classes:::visited|:visited|visited (pseudo-class)">:visited</span></a>
      <li class="tocline3"><a href="selector.html#dynamic-pseudo-classes" class="tocxref">5.11.3 The dynamic pseudo-classes: <span class="index-def" title="pseudo-classes:::hover|:hover|hover (pseudo-class)">:hover</span>, <span class="index-def" title="pseudo-classes:::active|:active|active (pseudo-class)">:active</span>, and <span class="index-def" title="pseudo-classes:::focus|:focus|focus (pseudo-class)">:focus</span></a>
      <li class="tocline3"><a href="selector.html#lang" class="tocxref">5.11.4 The language pseudo-class: <span class="index-def" title="pseudo-classes:::lang|:lang|lang (pseudo-class)">:lang</span></a>
    </ul>
    <li class="tocline2"><a href="selector.html#q20" class="tocxref">5.12 Pseudo-elements</a>
    <ul class="toc">
      <li class="tocline3"><a href="selector.html#first-line-pseudo" class="tocxref">5.12.1 The <span class="index-def" title="pseudo-elements:::first-line|:first-line|first-line">:first-line</span> pseudo-element</a>
      <li class="tocline3"><a href="selector.html#first-letter" class="tocxref">5.12.2 The <span class="index-def" title="pseudo-elements:::first-letter|:first-letter|first-letter">:first-letter</span> pseudo-element</a>
      <li class="tocline3"><a href="selector.html#before-and-after" class="tocxref">5.12.3 The <span class="index-def" title="pseudo-elements:::before|:before">:before</span> and <span class="index-def" title="pseudo-elements:::after|:after">:after</span> pseudo-elements</a>
    </ul>
  </ul>
  <li class="tocline1"><a href="cascade.html" class="tocxref">6 Assigning property values, Cascading, and Inheritance</a>
  <ul class="toc">
    <li class="tocline2"><a href="cascade.html#q1" class="tocxref">6.1 Specified, computed, and actual values</a>
    <ul class="toc">
      <li class="tocline3"><a href="cascade.html#specified-value" class="tocxref">6.1.1 <span class="index-def" title="specified value"> Specified values</span></a>
      <li class="tocline3"><a href="cascade.html#computed-value" class="tocxref">6.1.2 <span class="index-def" title="computed value"> Computed values </span></a>
      <li class="tocline3"><a href="cascade.html#actual-value" class="tocxref">6.1.3 <span class="index-def" title="actual value"> Actual values</span></a>
    </ul>
    <li class="tocline2"><a href="cascade.html#inheritance" class="tocxref">6.2 Inheritance</a>
    <ul class="toc">
      <li class="tocline3"><a href="cascade.html#value-def-inherit" class="tocxref">6.2.1 The <span class="index-def" title="inherit, definition of">'inherit'</span> value</a>
    </ul>
    <li class="tocline2"><a href="cascade.html#at-import" class="tocxref">6.3 The @import rule</a>
    <li class="tocline2"><a href="cascade.html#cascade" class="tocxref">6.4 The cascade</a>
    <ul class="toc">
      <li class="tocline3"><a href="cascade.html#cascading-order" class="tocxref">6.4.1 Cascading order</a>
      <li class="tocline3"><a href="cascade.html#important-rules" class="tocxref">6.4.2 !important rules</a>
      <li class="tocline3"><a href="cascade.html#specificity" class="tocxref">6.4.3 Calculating a selector's specificity</a>
      <li class="tocline3"><a href="cascade.html#q12" class="tocxref">6.4.4 Precedence of non-CSS presentational hints</a>
    </ul>
  </ul>
  <li class="tocline1"><a href="media.html" class="tocxref">7 Media types</a>
  <ul class="toc">
    <li class="tocline2"><a href="media.html#q1" class="tocxref">7.1 Introduction to media types</a>
    <li class="tocline2"><a href="media.html#q2" class="tocxref">7.2 Specifying media-dependent style sheets</a>
    <ul class="toc">
      <li class="tocline3"><a href="media.html#at-media-rule" class="tocxref">7.2.1 The @media rule</a>
    </ul>
    <li class="tocline2"><a href="media.html#media-types" class="tocxref">7.3 Recognized media types</a>
    <ul class="toc">
      <li class="tocline3"><a href="media.html#media-groups" class="tocxref">7.3.1 Media groups</a>
    </ul>
  </ul>
  <li class="tocline1"><a href="box.html" class="tocxref">8 Box model</a>
  <ul class="toc">
    <li class="tocline2"><a href="box.html#box-dimensions" class="tocxref">8.1 Box dimensions</a>
    <li class="tocline2"><a href="box.html#mpb-examples" class="tocxref">8.2 Example of margins, padding, and borders</a>
    <li class="tocline2"><a href="box.html#margin-properties" class="tocxref">8.3 Margin properties: <span class="propinst-margin-top">'margin-top'</span>,  <span class="propinst-margin-right">'margin-right'</span>,  <span class="propinst-margin-bottom">'margin-bottom'</span>, <span class="propinst-margin-left">'margin-left'</span>, and <span class="propinst-margin">'margin'</span></a>
    <ul class="toc">
      <li class="tocline3"><a href="box.html#collapsing-margins" class="tocxref">8.3.1 Collapsing margins</a>
    </ul>
    <li class="tocline2"><a href="box.html#padding-properties" class="tocxref">8.4 Padding properties: <span class="propinst-padding-top">'padding-top'</span>, <span class="propinst-padding-right">'padding-right'</span>, <span class="propinst-padding-bottom">'padding-bottom'</span>, <span class="propinst-padding-left">'padding-left'</span>, and <span class="propinst-padding">'padding'</span></a>
    <li class="tocline2"><a href="box.html#border-properties" class="tocxref">8.5 Border properties</a>
    <ul class="toc">
      <li class="tocline3"><a href="box.html#border-width-properties" class="tocxref">8.5.1 Border width: <span class="propinst-border-top-width">'border-top-width'</span>, <span class="propinst-border-right-width">'border-right-width'</span>, <span class="propinst-border-bottom-width">'border-bottom-width'</span>, <span class="propinst-border-left-width">'border-left-width'</span>, and <span class="propinst-border-width">'border-width'</span></a>
      <li class="tocline3"><a href="box.html#border-color-properties" class="tocxref">8.5.2 Border color: <span class="propinst-border-top-color">'border-top-color'</span>, <span class="propinst-border-right-color">'border-right-color'</span>, <span class="propinst-border-bottom-color">'border-bottom-color'</span>, <span class="propinst-border-left-color">'border-left-color'</span>, and <span class="propinst-border-color">'border-color'</span></a>
      <li class="tocline3"><a href="box.html#border-style-properties" class="tocxref">8.5.3 Border style: <span class="propinst-border-top-style">'border-top-style'</span>, <span class="propinst-border-right-style">'border-right-style'</span>, <span class="propinst-border-bottom-style">'border-bottom-style'</span>, <span class="propinst-border-left-style">'border-left-style'</span>, and <span class="propinst-border-style">'border-style'</span></a>
      <li class="tocline3"><a href="box.html#border-shorthand-properties" class="tocxref">8.5.4 Border shorthand properties: <span class="propinst-border-top">'border-top'</span>, <span class="propinst-border-bottom">'border-bottom'</span>, <span class="propinst-border-right">'border-right'</span>, <span class="propinst-border-left">'border-left'</span>, and <span class="propinst-border">'border'</span></a>
    </ul>
  </ul>
  <li class="tocline1"><a href="visuren.html" class="tocxref">9 Visual formatting model</a>
  <ul class="toc">
    <li class="tocline2"><a href="visuren.html#q1" class="tocxref">9.1 Introduction to the visual formatting model</a>
    <ul class="toc">
      <li class="tocline3"><a href="visuren.html#q2" class="tocxref">9.1.1 The viewport</a>
      <li class="tocline3"><a href="visuren.html#containing-block" class="tocxref">9.1.2 <span class="index-def" title="containing block"> Containing blocks</span></a>
    </ul>
    <li class="tocline2"><a href="visuren.html#box-gen" class="tocxref">9.2 Controlling box generation</a>
    <ul class="toc">
      <li class="tocline3"><a href="visuren.html#q5" class="tocxref">9.2.1 Block-level elements and block boxes</a>
      <ul class="toc">
        <li class="tocline4"><a href="visuren.html#anonymous-block-level" class="tocxref"> Anonymous block boxes</a>
      </ul>
      <li class="tocline3"><a href="visuren.html#q7" class="tocxref">9.2.2 Inline-level elements and inline boxes</a>
      <ul class="toc">
        <li class="tocline4"><a href="visuren.html#anonymous" class="tocxref"> Anonymous inline boxes</a>
      </ul>
      <li class="tocline3"><a href="visuren.html#compact" class="tocxref">9.2.3 Compact boxes</a>