Creating and appending CSS styles to the head element to an HTML document.

style.js

const head = document.head || document.getElementsByTagName('head')[0];
const style = document.createElement('style');
const css = `
::selection {
  background-color: pink;
  color: limegreen;
}

::-moz-selection {
  background-color: dodgerblue;
  color: white;
}

::-webkit-selection {
  background-color: dodgerblue;
  color: white;
}

*, 
*:before, 
*:after { 
  box-sizing: inherit; 
} 

html { 
  font-size: 16px; 
  line-height: 1.625; 
  color: #797979; 
  box-sizing:
  border-box; 
} 

body { 
  font: normal normal normal 1rem/1.625 sans-serif; 
  padding: 1rem 3rem 0; 
}

.container {
  width: 60%;
  min-width: 600px;
  max-width: 800px;
}

h1 { font-size: 2.5em; }`;


style.type = 'text/css';

if (style.stylesheet) {
  style.stylesheet.cssText = css
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);