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

ger detta ResULtat

  #textexempel1 {
    text-align: left;
    text-decoration: underline line-through;
    text-indent: 10px;
    text-transform: uppercase;
    white-space: inherit;
    text-shadow: yellow 5px, 5px, 5px;
  }

  #textexempel2 {
    text-align: center;
    text-decoration: overline line-through;
    text-indent: 10px;
    text-transform: lowercase;
    white-space: inherit;
  }
        

ger koden

  <p id="textexempel1">dEn FÖrsTA teXten</p>
  <p id="textexempel2">dEn ANdRA teXten</p>
        

följande utseende

dEn FÖrsTA teXten

dEn ANdRA teXten

  #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

  #fargexempel1 {
    color: navy;
  }

  #fargexempel2 {
    color: rgb(50,150,250);
  }

  #fargexempel3 {
    color: #ff3300;
  }        
        

ger koden

  <span id="fargexempel1">Jag</span>
  <span id="fargexempel2"> har</span>
  <span id="fargexempel3"> färger</span>!
        

följande utseende

Jag har färger!

  #synlighetsexempel1 {
    visibility : hidden;
  }

  #synlighetsexempel2 {
    display : none;
  }
        

ger koden

 
  <p>;
    Det här är ett osynligt ord<br />
    Det här är ett <span id="synlighetsexempel1">osynligt</span> ord<br />
    Det här är ett <span id="synlighetsexempel2">osynligt</span> ord till
  </p>
        

följande utseende

Det här är ett osynligt ord
Det här är ett osynligt ord
Det här är ett osynligt ord till

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

  div#bakgrundexempel1 {
    background: #9ACD32 url(./bg.gif) no-repeat scroll center center;
    border: 1px solid black;
  }

  div#bakgrundexempel2 {
    background: Aqua url(./bg.gif) 7px repeat-y ;
    border: 1px solid black;
  }
        

ger koden

  <div class="area" id="bakgrundexempel1"></div>
  <div class="area" id="bakgrundexempel2"></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

  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

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

  span#storlekexempel1 {
    vertical-align : sub;
  }

  span#storlekexempel2 {
    vertical-align: super;
  }        
        

ger koden

  <div class="area">
    Hallå där <span id="storlekexempel1">nere</span>.<br />
    Hallå där <span id="storlekexempel2">uppe</span>.
  </div>     
        

följande utseende

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

  #positionexempel1 {
    float: right;
  }

  #positionexempel2 {
    clear: left;
  }
        

ger 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>Hello World! till vänster.</span>
  </div>
        

följande utseende

Hello World! till vänster.