Self Executing JavaScript Widget (HTML + CSS): just place a link to this script in your HTML where you want the content to appear, like <script src="myWidget.js"></script>

myWidget.js

(function() {
  var myWidget = document.createElement('section'),
      widgetStyles = document.createElement('style'),
      tag = document.querySelectorAll('[src*="myWidget"]')[0];
  myWidget.innerHTML = '\
    <!-- Add your HTML here, with line-breaks escaped by a "\" backslash character. -->\
    <!-- (Don\'t forget: you can escape any character, like quotes, as well -->\
    Hello\
  ';
  widgetStyles.innerHTML = '\
    /* Add your CSS here, with line-breaks escaped by a "\" backslash character */\
    html { background: #09f; }\
  ';
  function populateWidget(content) {
    tag.parentNode.insertBefore(content, tag.nextSibling);
  };
  populateWidget(widgetStyles);
  populateWidget(myWidget);
})();