« »

Normally, web developers will place CSS code into a pair of tags such as or to a CSS file. But in this snippet, we are creating CSS within JavaScript definition that browsers still understand these CSS properties. Although this CSS example is more complex than old CSS definition, but it is one of ways to develop website; you may consider this is CSS tutorial which quite worthy to see.

Label: CSS Stylesheet, web developer, CSS, creating CSS, browsers, CSS properties, CSS tutorial

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript" name="addStyleSheet.js">
// Created by: Ultimater :: http://invisionfree.com/forums/Black_Forest_Boards

/* The addNewStyleSheetByFullCSS function accepts one argument,
 the full CSS to be used within the style sheet, and the new
 style sheet is appended to the DOM tree automatically. */

function addNewStyleSheetByFullCSS(innerCSS){
  var h=document.getElementsByTagName("head");if(!h.length)return;
  var newStyleSheet=document.createElement("style");
  newStyleSheet.type="text/css";
  h[0].appendChild(newStyleSheet);
  try{
    newStyleSheet.styleSheet.cssText=innerCSS;
  }catch(e){try{
    newStyleSheet.appendChild(document.createTextNode(innerCSS));
    newStyleSheet.innerHTML=innerCSS;
  }catch(e){}}
}

// ============

var fullCSS=''+
'nbody { margin: 20px 10px 10px 10px; padding: 0; background-color: #FFFFFF; color: #000000;'+
'nfont-family:serif; font-size:medium;'+
'n}'+
'ntr { vertical-align: top;  }'+
'n.fieldframe { background-color: #F1F2F6; color: #929BAB; border: 1px solid #929BAB; padding: 5px }'+
'n.buttonframe { background-color: #F1F2F6; color: #929BAB; margin-top: 10px; border: 1px solid #929BAB; padding: 5px }'+
'n.field { background-color: #E3E4EA; color: #000000; border: 1px solid #929BAB;}'+
'n.label { background-color: #E3E4EA; color: #000000; font-weight: bold; vertical-align: top;'+
'nwidth:180px;border:1px solid #929BAB;'+
'n}'+
'n.input { background-color: #F1F2F6; color: #5D636E; vertical-align: top;'+
'nwidth: 80px; border:1px solid #929BAB; padding:2px;'+
'n}'+
'n.input input{'+
'nbackground-color: white; color: black; border:0 none;'+
'n}'+
'n.button { background-color: #E3E4EA; color: #5D636E; border: 1px solid #929BAB; margin: 1px;  }'+
'n.button:hover { background-color: #F4F4F6; color: #5D636E; border: 1px solid #929BAB; margin: 1px;  }'+
'ndiv.field{'+
'nmargin:0;padding:2px;'+
'n}n'

addNewStyleSheetByFullCSS(fullCSS);
</script>

Copy All x2