09 - More Advanced CSS Examples

From mi-linux
Jump to navigationJump to search

Example 1 - Lists, Boxes, Colours and Stuff

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <STYLE type="text/css">
    ul {list-style:none;}
    li {padding: 1em; display:inline;margin-left: 1em; margin-top: 1em;}

    .redback {background-color: red; color:green;}
    .yellowback {background-color: yellow; color:blue;}
    .pinkback {background-color: pink; color:white;}
    .greenback {background-color: green; color:red;}
    .purpleback {background-color: purple; color:yellow;}
    .orangeback {background-color: orange; color:blue;}
    .blueback {background-color: blue; color:yellow;}
  </STYLE>
 </HEAD>

 <BODY>
  <UL>
    <LI class="redback">item 01</LI>
    <LI class="yellowback">item 02</LI>
    <LI class="pinkback">item 03</LI>
    <LI class="greenback">item 04</LI>
    <LI class="purpleback">item 05</LI>
    <LI class="orangeback">item 06</LI>
    <LI class="blueback">item 07</LI>
  </UL>
 </BODY>

</HTML>

Example 2: Simple CSS layout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
 <HEAD>
  <STYLE type="text/css">

    div {border:1px solid}
    #top {float:top; padding:1%}
    #left {float:left; text-align:left; padding:1%}
    #right {float:right; text-align:right; padding:1%}
    #middle {text-align:center; padding:1%}
    #bottom {float:bottom; padding:1%}

  </STYLE>
 </HEAD>

 <BODY>
    <DIV id="top">this is top</DIV>
     <DIV>
      <DIV id="left">this is left</DIV>
      <DIV id="right">this is right</DIV>
      <DIV id="middle">this is middle</DIV>
     </DIV>
    <DIV id="bottom">this is bottom</DIV>

 </BODY>

</HTML>