HTML Element Style How to - Create code/pre section style








Question

We would like to know how to create code/pre section style.

Answer


<!--from  w w  w  .  j a va  2s  .  c  o  m-->

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#content pre {
  padding: 1em;
  border: 1px dashed #2f6fab;
  color: black;
  background-color: #f9f9f9;
  white-space: pre;
  margin: 1em 0px;
  display: block;
  font-family: monospace, Courier;
  line-height: 1.1em;
}

#content h3 {
  font-size: 188%;
  line-height: 1.2em;
  color: black;
  background: none;
  font-weight: normal;
  margin: 0;
  overflow: hidden;
  padding-top: .5em;
  padding-bottom: .17em;
  border-bottom: 1px solid #aaa;
  margin-bottom: 1em; /* make space below border */
}

#content h1, h2 {
  color: black;
  background: none;
  font-weight: normal;
  margin: 0;
  overflow: hidden;
  padding-top: .5em;
  padding-bottom: .17em;
}

#content h1:after, h2:after {
  content: '';
  display: block;
  width: 30%;
  height: 0;
  margin: 0 auto;
  border-bottom: 1px solid #aaa;
}
</style>
</head>
<body>
  <DIV id='content'>
    <h3>Main Title</h3>
    <h2>Sub Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
      eros odio, venenatis ut suscipit eget, vestibulum id est. Vivamus
      aliquet lacus sit amet enim tempus in fermentum ipsum ornare.
    <h2>Code Section</h2>
    <pre>
    
       This is a test.
              This is a test.
                     This is a test.

    </pre>
  </DIV>
</BODY>
</HTML>
</body>
</html>

The code above is rendered as follows: