The Code Block Cascading Style Sheet (C.S.S.) Code

Linking the external C.S.S. style sheet to the web page

Create the following markup code in the <head></head> element at the top of your web page.

Enter the name of your external C.S.S. file with a .css extension in the filename.css space:

  1. <head>
  2.   <link href="filename.css" media="screen" rel="stylesheet" type="text/css">
  3. </head>

This will link the external style sheet to your web document.

top

Creating the C.S.S.

Essential Selectors and their Properties for the Code Block

In order to produce the browser rendered code block we need to create three C.S.S. Rule Sets:

  1. ol.code
  2. ol.code pre
  3. ol.code li

These three presentation layer C.S.S. Rule Sets contain:

If you wish, please feel free to experiment and edit any or all of the code shown below in your C.S.S. text editor to achieve your desired style for the code block.

Example C.S.S. text editor style sheet entry:

  1. /* start of ol code block style */
  2.  
  3. ol.code {
  4.    margin: 2.5em 2em;
  5.    padding: 0em;
  6.    border: solid 1px #2b91af;
  7.    font-family: "Courier New" , Courier, serif;
  8.    font-weight: bold;
  9.    color: #2b91af;
  10.    background: #eee;
  11.    line-height: 115%;
  12.    overflow: auto; }
  13.  
  14. ol.code pre {
  15.    margin: 0em;
  16.    padding: 0.3em 0.5em;
  17.    border-left: solid 1px #2b91af;
  18.    font-size: 115%;
  19.    color: #000;
  20.    background: #eee;
  21.    width: auto; }
  22.  
  23. ol.code li {
  24.    margin: 0em 0em 0em 5em;
  25.  
  26. /* end of ol code block style */

top