#fontexempel {
    font: italic small-caps bolder 24pt Courier, serif;
  }
        

ger detta ResULtat

  #textexempel1 {
    letter-spacing: -3px;
    word-spacing: -1px;
    line-height: normal;
    text-align: left;
    text-decoration: underline line-through;
    text-indent: 10px;
    text-transform: uppercase;
    white-space: inherit;
    text-shadow: yellow 5px, 5px, 5px;
  }

  #textexempel2 {
    letter-spacing: 3px;
    word-spacing: 1px;
    line-height: normal;
    text-align: center;
    text-decoration: overline line-through;
    text-indent: 10px;
    text-transform: lowercase;
    white-space: inherit;
  }
        

ger koden

  <p id="textexempel1">dettA äR en ihoptrYct tEXt</p>
  <p id="textexempel2">dettA äR en GlEs tEXt</p>
        

följande utseende

dettA äR en ihoptrYct tEXt

dettA äR en GlEs tEXt

  #listorexempel1 {
    list-style: square inside;
  }

  #listorexempel2 {
    list-style: square url("./star.gif");
  }
        

ger koden

  <ul id="listorexempel1">
    <li>apa</li><livgris</li><li>hund</li>
  </ul>
  <ul id="listorexempel2">
    <li>apa</li><li>gris</li><li>hund</li>
  </ul>
        

följande utseende

  span.fargklass1 {
    color: navy;
  }

  span.fargklass2 {
	  color: #ff3300;
  }        
        

ger tillsammans med javaScriptet

  var deltaId = 0;
  function changeColor() {
    document.getElementById("fargexempel" + deltaId++).className = "fargklass1";
    if(deltaId > 2)
      deltaId = 0;
    document.getElementById("fargexempel" + deltaId).className = "fargklass2";
  }
  window.setInterval(changeColor, 500);
        

koden

  <span class="fargklass1" id="fargexempel0">Min</span>
  <span class="fargklass1" id="fargexempel1"> färg</span>
  <span class="fargklass1" id="fargexempel2"> rullar</span>!
        

följande utseende

Min färg rullar!

  div.area {
    height: 100px;
    width: 100px;
    background-color : black;
    color : white;
    margin: 5px;
  }

  #synlighetsexempel1 {
    clip: rect(10px 70px 70px 10px);
    position: absolute;
  }

  #synlighetsexempel2 {
    visibility: hidden;
  }

  #synlighetsexempel3 {
    overflow: scroll;
  }
        

ger koden

  <div class="area">
    <img src="./oversized.gif" 
         alt="alltför stor bild" />
  </div>
  <div class="area">
    <img id="synlighetsexempel1" src="./oversized.gif" 
                                 alt="alltför stor bild" />
  </div>
  <div class="area">
    <img id="synlighetsexempel2" src="./oversized.gif" 
                                 alt="alltför stor bild" />
  </div>
  <div class="area" id="synlighetsexempel3">
    <img src="./oversized.gif" 
         alt="alltför stor bild" />
  </div>   
        
        

följande utseende

  div.area {
    height: 100px;
    width: 100px;
    background-color : black;
    color : white;
    margin: 5px;
  }
  
  div#bakgrundexempel1 {
    background: #9ACD32 url(./bg.gif) center center repeat-y;
    overflow : scroll;
  }

  div#bakgrundexempel2 {
    background: fixed Aqua url(./bg.gif) center  ;
    overflow : scroll;
  }
        

ger koden

  <div class="area" id="bakgrundexempel1" > 
    område 1<br /> rad 2<br/> rad 3<br/> rad 4
    <br/> rad 5<br/> rad 6<br/> rad 7
  </div> <br/> 
  <div class="area" id="bakgrundexempel2" >
    område 2<br/> rad 2<br/> rad 3<br/> rad 4
    <br/> rad 5<br/> rad 6<br/> rad 7
  </div> 
        

följande utseende

  div.marginexample0 {
    background-color: aqua;
    color: black;
    margin:10px;
    padding: 1px;
  }

  p#marginexample1 {
    margin: 0.5cm 1cm 2cm 4cm ;
    background-color: black;
    color: yellow;
  }

  p#marginexample2 {
    margin: 4cm 2cm 1cm 0.5cm ;
    background-color: black;
    color: yellow;
  }
        

ger koden

  <div class="marginexample0"> 
    <p id="marginexample1"> Hello World!</p> 
  </div> 
  <div class="marginexample0"> 
    <p id="marginexample2"> Hello World!</p> 
  </div> 
        

följande utseende

  div.area {
    height: 100px;
    width: 100px;
    background-color : black;
    color : white;
    margin: 5px;
  }        
        
  div#borderexample1 {
    border-color: #0000CD #00CC99 #CC3300 #FFCC00;
    border-style: dotted dashed double groove;
    border-width : thin medium thick 1ex;
    margin: 1cm;
  }        
        

ger koden

  <div class="area" id="borderexample1">Hello World!</div>
        

följande utseende

  span#outlineexample1 {
    outline: fuchsia ridge 3px;
  }        
        

ger koden

  <span id="outlineexample1">Hello World!</span>
        

följande utseende

Hello World!

  div.area {
    height: 100px;
    width: 100px;
    background-color : black;
    color : white;
    margin: 5px;
  }

  div#paddingexample1{
    padding : 1cm 2cm 3cm 4cm;
    border: black solid thin;
    margin: 1cm;
  }        
        

ger koden

  <div class="area" id="paddingexample1">Hello World!</div>
        

följande utseende

  table.tabellexempel1 {
    table-layout: auto;
    border-spacing: 10px 5px;
    caption-side: left;
    empty-cells: show;
    border-collapse: separate;
    margin: 5mm;
  }        
        

ger koden

  <table class="tabellexempel1" border="1" summary="en exempeltabell">
    <caption>exempeltabell</caption>
    <tr><td>data 1</td><td>data 2</td></tr>
    <tr><td></td><td>data 4</td></tr>
  </table>        
        

följande utseende

  p#storlekexempel{
    width : 150px;
    max-width : 150px;
    min-width : 150px;
    height: 100px;
    max-height: 100px;
    min-height : 100px;
    line-height : 200%;
    border: solid black thin;
    margin: 5mm;
  }

  span#storlekexempel2 {
    vertical-align : sub;
  }

  span#storlekexempel3 {
    vertical-align: super;
  }        
        

ger koden

  <p id="storlekexempel">
    Hello där <span id="storlekexempel2">nere</span>.<br />
    Hello där <span id="storlekexempel3">uppe</span>.
  </p>        
        

följande utseende

Hello där nere.
Hello där uppe.

  div.area {
    height: 100px;
    width: 100px;
    background-color : black;
    color : white;
    margin: 5px;
  }

  #positionexempel1 {
    float: right;
  }

  #positionexempel2 {
    clear: left;
  }

  #positionexempel3 {
    clear: right;
  }

  #positionexempel4a , #positionexempel5a, #positionexempel5b {
    position: relative;
    border: yellow solid 1px;
    z-index : 2;
  }

  #positionexempel5a {
    z-index : 1;
    left : 40px;
    top: -60px;
    border-color : red;
  }

  #positionexempel5b {
    z-index : 3;
    left : -80px;
    top: 60px;
    border-color : red;
  }
        

ger tillsammans med JavaScriptet

  function click1() {
    var elem = document.getElementById("positionexempel5b");
    if(elem)
      elem.id = "positionexempel5a";
  }

  function click2() {
    var elem = document.getElementById("positionexempel5a");
    if(elem)
      elem.id = "positionexempel5b";
  }

  setEventById("positionexempel4a", "click", click1);
  setEventById("positionexempel5a", "click", click2);
        

koden

  <div class="area" id="positionexempel11">Hello</div>
  <div class="area">World!</div>
  <div class="area">
    <img id="positionexempel12" src="./star.gif" alt="stjärna" />
    <span id="positionexempel2">Hello World! till vänster.</span>
  </div>
  <div class="area">
    <img id="positionexempel13" src="./star.gif" alt="stjärna" />
    <span id="positionexempel3">Hello World! till höger.</span>
  </div>
  <div class="area" id="positionexempel4a">Hello World! 1</div>
  <div class="area" id="positionexempel5a">Hello World! 2</div>
        

följande utseende

Hello World! till vänster.

Hello World! till höger.

klicka i rutan som skall vara överst

  div.area {
    height: 100px;
    width: 100px;
    background-color : black;
    color : white;
    margin: 5px;
  }

  div#ovrigtexempel1 {
    cursor: crosshair;
  }
        

ger koden

  <div class="area" id="ovrigtexempel1">Testa här!</div>
        

följande utseende