Fail:CSS kasti mudel.png

Joonis CSS-is kasutatavate servade, veeriste ja polstrite kohta.

Pilt on valmistatud kasutades HTML-i ja CSS-i. Ekraanipilt on võetud brauserist Opera, töödeldud Gimpiga.

HTML:

<div id="veeris">
  Veeris / Margin
  <div id="serv">
    Serv / Border
    <div id="polster">
      Polster / Padding
      <div id="sisu">
        Sisu
      </div>
    </div>
  </div>
</div>

<ul>
<li><span></span> - läbipaistev ala</li>
<li><span></span> - serva värv (border-color)</li>
<li><span></span> - taustavärv (background-color)</li>
</ul>

CSS:

body {
    padding: 2em;
    font-size: large;
    font-weight: bold;
    font-family: sans-serif;
}

div { padding: 1.5em; padding-top: 0em; line-height: 1.5em; text-align: center}

#veeris { border: dashed 2px black; width: 300px }
#serv { background: green }
#polster { background: yellow }
#sisu { border: dashed 2px black; padding-top: 1.5em;}


ul { margin-left: 0em; padding-left: 0em; list-style-type: none}
li { padding-left: 0.6em; margin-bottom: 0.2em; }
li span { background: white; padding-left: 3em; border: solid 1px black }
li+li span { background: green }
li+li+li span { background: yellow }