Displaying blocks of code online : code : Text HTML CSS TUTORIALS


HTML CSS TUTORIALS » Text » code »

 

Displaying blocks of code online


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Displaying blocks of code online</title>
<style type="text/css" media="screen">

body {
    font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
    padding: 20px;
}
    
.codeList {
    border: 1px solid #aaa;
}
    
.codeList dt {
    background: #dddddd;
    padding: 7px;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
}
    
.codeList li {
    background: #ddd;
    margin-left: 2.5em;
}
    
.codeList code {
    background: #eaeaea;
    display: block;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    font : 1.2em "Courier New", Courier, monospace;
    padding: 2px 10px;
}
</style>
</head>
<body>
  <div id="wrapper">
    <dl class="codeList">
      <dt>Writing out list styles in full</dt>
      <dd>
        <ol>
          <li><code>import java</code></li>
          <li><code>class MainClass{</code></li>
          <li><code>  int i;</code></li>
          <li><code>public static void main</code></li>
          <li><code>}</code></li>
        </ol>
      </dd>
    </dl>
  </div>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Text
» code