CodeView is a CSS file that helps you visualize the links and scripts that are normally invisible in HTML pages, as well as displaying a useful subset of HTML tags as it runs across them in the content. This makes it really useful to quickly assess the layout of a website you haven't seen before, or to help visualize the formatting in a blog pos…

codeview.css

/*

CodeView CSS - from @innovati, hosted by http://staticresource.com

*/

/* Scripts, styles, and other invisibles */
  head, title, link, meta, style, script {
    display: block;
  }
  
  title, link, meta, style, script {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: auto;
    margin: 10px 20px;
    padding: 10px 20px;
    background: #eaeaea;
    color: #333;
    font-family: monospace;
    font-size: 10pt;
    line-height: 14pt;
    white-space: pre-wrap;
    word-break: normal;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    border: 1px solid #cdcdcd;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #bbb;
    box-shadow: rgba(0,0,0,.15) 0 5px 15px;
    text-shadow: rgba(0,0,0,.3) 0 -1px 0, rgba(255,255,255,.7) 0 1px 1px;
  }

  title:before { content: '<title>'; opacity: 0.5; }
  title:after  {  content: '</title>'; opacity: 0.5; }
  
  meta:before { content: '<meta ' attr(content); opacity: 0.5; }
  meta:after  {  content: '>'; opacity: 0.5; }
  meta[charset]:before { content: '<meta charset="' attr(charset) '"'; opacity: 0.5; }
  meta[charset]:after  {  content: '>'; opacity: 0.5; }
  meta[http-equiv]:before { content: '<meta http-equiv="' attr(http-equiv) '" content="' attr(http-equiv) '"'; opacity: 0.5; }
  meta[http-equiv]:after  {  content: '>'; opacity: 0.5; }
  meta[name]:before { content: '<meta name="' attr(name) '" content="' attr(content) '"'; opacity: 0.5; }
  meta[name]:after  {  content: '>'; opacity: 0.5; }
  meta[property]:before { content: '<meta property="' attr(property) '" content="' attr(content) '"'; opacity: 0.5; }
  meta[property]:after  {  content: '>'; opacity: 0.5; }  
  
  link:before { content: '<link href="' attr(href) '" rel="' attr(rel) '"'; opacity: 0.5; }
  link:after  { content: '>'; opacity: 0.5; }
  link[type]:before,link[title]:before { content: '<link href="' attr(href) '" rel="' attr(rel) '" type="' attr(type) '" title="' attr(title) '"'; opacity: 0.5; }
  link[type]:after,link[title]:after  { content: '>'; opacity: 0.5; } 
  
  script[src]:before { content: '<script src="' attr(src) '" type="' attr(type) '"'; opacity: 0.5; }
  script[src]:after  { content: '>'; opacity: 0.5; }
  script:before { content: '<script type="' attr(type) '">\A'; opacity: 0.5; white-space: pre-wrap; }
  script:after  { content: '\A<''/script>'; opacity: 0.5; white-space: pre-wrap; }
  
  style:before { content: '<style type="' attr(type) '">\A'; opacity: 0.5; white-space: pre-wrap; }
  style:after  { content: '\A<''/style>'; opacity: 0.5; white-space: pre-wrap; }

/* Links */
  a:before { content: '<a>'; opacity: 0.5; }
  a:after  { content: '</a>'; opacity: 0.5; }
  
/* Abbreviations */    
  abbr:before { content: '<abbr>'; opacity: 0.5; }
  abbr:after  { content: '</abbr>'; opacity: 0.5; }

/* Addresses */
  address:before { content: '<address>\A'; opacity: 0.5; white-space: pre-wrap; }
  address:after  { content: '\A</address>'; opacity: 0.5; white-space: pre-wrap; }
  
/* Articles */   
  article:before { content: '<article>'; opacity: 0.5; white-space: pre-wrap; }
  article:after  { content: '</article>'; opacity: 0.5; }
  
/* Asides */   
  aside:before { content: '<aside>'; opacity: 0.5; }
  aside:after  { content: '</aside>'; opacity: 0.5; }

/* Bold text */
  b:before { content: '<b>'; opacity: 0.5; }
  b:after  { content: '</b>'; opacity: 0.5; }

/* Blockquotes */   
  blockquote:before { content: '<blockquote>\A'; opacity: 0.5; white-space: pre-wrap; }
  blockquote:after  { content: '\A</blockquote>'; opacity: 0.5; white-space: pre-wrap; }
  
/* Line Breaks */    
  br { border-bottom: 1px dashed #00c4cc; display: block; content: ' '; opacity: 0.5; }
  
/* Citations */
  cite:before { content: '<cite>'; opacity: 0.5; }
  cite:after  { content: '</cite>'; opacity: 0.5; }

/* Code */
  code:before { content: '<code>'; opacity: 0.5; }
  code:after  { content: '</code>'; opacity: 0.5; }
  
/* Definitions */
  dd:before { content: '<dd>'; opacity: 0.5; }
  dd:after  { content: '</dd>'; opacity: 0.5; }
  dl:before { content: '<dl>\A'; opacity: 0.5; white-space: pre-wrap; }
  dl:after  { content: '</dl>'; opacity: 0.5;}
  dt:before { content: '<dt>'; opacity: 0.5; }
  dt:after  { content: '</dt>'; opacity: 0.5; }
  
/* Deleted text */
  del:before { content: '<del>'; opacity: 0.5; }
  del:after  { content: '</del>'; opacity: 0.5; }
  
/* Definition text */
  dfn:before { content: '<dfn>'; opacity: 0.5; }
  dfn:after  { content: '</dfn>'; opacity: 0.5; }

/* Divisions */
/*  div:before { content: '<div>'; opacity: 0.5; }
  div:after  { content: '</div>'; opacity: 0.5; } */

/* Emphasized text */
  em:before { content: '<em>'; opacity: 0.5; }
  em:after  { content: '</em>'; opacity: 0.5; }

/* Fieldsets */
  fieldset:before { content: '<fieldset>\A'; opacity: 0.5; white-space: pre-wrap; }
  fieldset:after  { content: '\A</fieldset>'; opacity: 0.5; white-space: pre-wrap; }

/* Figure Captions */
  figcaption:before { content: '<figcaption>'; opacity: 0.5; }
  figcaption:after  { content: '</figcaption>'; opacity: 0.5; }

/* Figures */
  figure:before { content: '<figure>\A'; opacity: 0.5; white-space: pre-wrap; }
  figure:after  { content: '</figure>'; opacity: 0.5; }
  
/* Footers */
  footer:before { content: '<footer>'; opacity: 0.5;}
  footer:after  { content: '</footer>'; opacity: 0.5; }
  
/* Forms */
  form:before { content: '<form>'; opacity: 0.5; }
  form:after  { content: '</form>'; opacity: 0.5; }
  
/* Headings 1–6 */ 
  h1:before { content: '<h1>'; opacity: 0.5; }
  h1:after  { content: '</h1>'; opacity: 0.5; }
  h2:before { content: '<h2>'; opacity: 0.5; }
  h2:after  { content: '</h2>'; opacity: 0.5; }
  h3:before { content: '<h3>'; opacity: 0.5; }
  h3:after  { content: '</h3>'; opacity: 0.5; }
  h4:before { content: '<h4>'; opacity: 0.5; }
  h4:after  { content: '</h4>'; opacity: 0.5; }
  h5:before { content: '<h5>'; opacity: 0.5; }
  h5:after  { content: '</h5>'; opacity: 0.5; }
  h6:before { content: '<h6>'; opacity: 0.5; }
  h6:after  { content: '</h6>'; opacity: 0.5; }
  
/* Headers */
  header:before { content: '<header>'; opacity: 0.5; }
  header:after  { content: '</header>'; opacity: 0.5; }

/* Horizontal Rules */
  hr:before { content: '<hr>'; opacity: 0.5; white-space: pre-wrap; }

/* Italicized text */
  i:before { content: '<i>'; opacity: 0.5; }
  i:after  { content: '</i>'; opacity: 0.5; }

/* Inserted text */
  ins:before { content: '<ins>'; opacity: 0.5; }
  ins:after  { content: '</ins>'; opacity: 0.5; }

/* Keyboard input */
  kbd:before { content: '<kbd>'; opacity: 0.5; }
  kbd:after  { content: '</kbd>'; opacity: 0.5; }
  
/* Legends */
  legend:before { content: '<legend>'; opacity: 0.5; }
  legend:after  { content: '</legend>'; opacity: 0.5; }
  
/* List Items */
  li:before { content: '<li>'; opacity: 0.5; }
  li:after  { content: '</li>'; opacity: 0.5; }

/* Marked text */
  mark:before { content: '<mark>'; opacity: 0.5; }
  mark:after  { content: '</mark>'; opacity: 0.5; }
  
/* Navigation */
  nav:before { content: '<nav>'; opacity: 0.5; }
  nav:after  { content: '</nav>'; opacity: 0.5; }
  
/* Ordered Lists */
  ol:before { content: '<ol>'; opacity: 0.5; }
  ol:after  { content: '</ol>'; opacity: 0.5; }

/* Paragraphs */
  p:before { content: '<p>'; opacity: 0.5; }
  p:after  { content: '</p>'; opacity: 0.5; }
  
/* Preformatted text */
  pre:before { content: '<pre>\A'; opacity: 0.5; white-space: pre-wrap; }
  pre:after  { content: '</pre>'; opacity: 0.5; }
  
/* Quoted text */
  q:before { content: '<q>'; opacity: 0.5; }
  q:after  { content: '</q>'; opacity: 0.5; }

/* Strikethrough text */
  s:before { content: '<s>'; opacity: 0.5; }
  s:after  { content: '</s>'; opacity: 0.5; }
  
/* Sample text */
  samp:before { content: '<samp>'; opacity: 0.5; }
  samp:after  { content: '</samp>'; opacity: 0.5; }

/* Strong text */
  strong:before { content: '<strong>'; opacity: 0.5; }
  strong:after  { content: '</strong>'; opacity: 0.5; }

/* Sections */
  section:before { content: '<section>'; opacity: 0.5; }
  section:after  { content: '</section>'; opacity: 0.5; }

/* Small text */
  small:before { content: '<small>'; opacity: 0.5; }
  small:after  { content: '</small>'; opacity: 0.5; }
  
/* Span text */
  span:before { content: '<span>'; opacity: 0.5; }
  span:after  { content: '</span>'; opacity: 0.5; }

/* Subscript text */
  sub:before { content: '<sub>'; opacity: 0.5; }
  sub:after  { content: '</sub>'; opacity: 0.5; }

/* Superscript text */
  sup:before { content: '<sup>'; opacity: 0.5; }
  sup:after  { content: '</sup>'; opacity: 0.5; }

/* Underlined text */
  u:before { content: '<u>'; opacity: 0.5; }
  u:after  { content: '</u>'; opacity: 0.5; }
  
/* Unordered Lists */
  ul:before { content: '<ul>'; opacity: 0.5; }
  ul:after  { content: '</ul>'; opacity: 0.5; }
  
/* Variable text */
  var:before { content: '<var>'; opacity: 0.5; }
  var:after  { content: '</var>'; opacity: 0.5; }