Tinymce css for drupal tinymce wysiwyg profile. (Uses base64 encoded images, so replace with urls that point to image files if your intended user's browsers are old enough to not support base64). Utilises edeverett’s idea of illustrating to rich text editor users the markup they are creating or editing.

tinymce-drupal.css

/*
 * wysiwyg tinymce css for use in Drupal 7
 * with the addition of styles based on a great idea by edeverett http://edeverett.co.uk/
 * and diagnostic css from Eric Meyer http://meyerweb.com/eric/tools/css/diagnostics/
 *
 * requires a modern browser (more recent than IE7 anyway ;-) for the base64 encoded images
 *
 */

p,
blockquote,
div,
h1, h2, h3, h4, h5, h6,
ul, ol, dl, li,
strong,
span {
  background-repeat: no-repeat;
  background-position: right top;
}

p,
blockquote,
div,
h1, h2, h3, h4, h5, h6 {
  padding: 14px 9px 9px 9px;
  margin: 10px 10px 20px 10px;
}

ul li,
dl li {
  margin-right: 25px;
}

p, 
blockquote, 
div,
ul, ol, dl, li,
h1, h2, h3, h4, h5, h6 {
  border: 1px solid #eee;
}

p {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAIAAAALu/iQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADtJREFUeNpiPHPmDANxgAWZY2xsDGefPXsWn1JkFUBtaKqZGIgG6KbC3UCCAzABCQ4gVyke20kzFSDAAGjJErVbV1bBAAAAAElFTkSuQmCC);
}
div {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAKCAIAAAAl/tkCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAExJREFUeNpiPHPmDAP1ABMyxxgJoIkTZEMACxr/7NmzcKVwNpmuo7JniQFAJ0P8iNX5A+06uAOxhix6VMAji4x4AAJGGqY7ygFAgAEAs64c3FRRZD4AAAAASUVORK5CYII=);
}
blockquote {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAAKCAIAAACCI2/5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJFJREFUeNrcVVsKwCAMU9mNev8b6J02KJTSRnFiHaxfNT6W2JrlWmv6S1x6QESSt9YY4QQukymD6F2Sr63R331Aj3TFGH5eBiQBaXmWCyfDC4V7OcreQkMl37QZbKG1iFMyYPi6zeZLFKTnXJsZCzHvNTqytmboZv5WtrjZJOJPG1Qpn//PxD2nko5HnMXdAgwAuPmZF/QHY+IAAAAASUVORK5CYII=);
}
h1 {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAIAAAA2KZn2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpiPHPmDAPpgAmZY2xsTJCNRRtWgKmHKG1nz57FFGQhxmzC2uBm49fPxEAWIFMbIxXijXgAEGAAfKMNQwFK9D8AAAAASUVORK5CYII=);
}
h2 {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE9JREFUeNpiPHPmDAO5gAmZY2xsjMk2hgFMzSz4zQbqOXv2LCYbi82YAE01AZuxOg+rtVg0IzsSv07Czsajk6gAQ3YFmimMVItnUgFAgAEAok0geUSQ/t4AAAAASUVORK5CYII=);
}
h3 {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFNJREFUeNpiPHPmDAO5gAmZY2xsjMk2hgFMzSz4zQbqOXv2LCYbi82YAE01AZuxOg8iiGkQCy6rkE2BCJLsbKwOITbAgFbB9WM6m5Fq8UwqAAgwAEAOIkf56NNWAAAAAElFTkSuQmCC);
}
h4 {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpiPHPmDAO5gAmZY2xsjJWNycWiGRfAqpMozUCdZ8+exSrFgt8SPDqxaIYrhZuCzEAziAW/m5HNwnQCEwMFgJFq8UwqAAgwAEMMGd5YGSTqAAAAAElFTkSuQmCC);
}
h5 {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAMAAACDi47UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAACdJREFUeNpiYMAFGMGYEQQwBHGpRBaE8zG0YxVkxKoS1UyiAECAAQAQzQAjgy8EMgAAAABJRU5ErkJggg==);
}
h6 {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE9JREFUeNpiPHPmDAO5gAmZY2xsjMk2hgFMzSz4zQbqOXv2LC5ZFoJug9uJaQoLLqVwANeD6QoWPEpJCzBSAQE/Ax2Cx8+MVItnUgFAgAEA7AscSYKAFFoAAAAASUVORK5CYII=);
}

ul {
  margin: 10px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAMAAACDi47UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAB5JREFUeNpiYMAFGMGYcYAEGRgZGcEEIyMDaQAgwAALdwAbSG1nuAAAAABJRU5ErkJggg==);
}
ol {
  margin-top: 10px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD9JREFUeNpiPHPmDAO5gAmNbwwDyCK4NLOg6Tx79iwmm1ibKXL2ENGMEmDAEIKHLXJoIQc4sjgjNeOZJAAQYADGvhWqIDjdiAAAAABJRU5ErkJggg==);
}
dl {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD9JREFUeNpiPHPmDAO5gAWZY2xsDGefPXsWLghn49NMpB44YGKgAAxRzegBBg9w5NDCGgtAwEhJPFPkbIAAAwBZVBZIhk7/VwAAAABJRU5ErkJggg==);
}
li {
  padding-top: 10px;
  margin: 5px 5px 5px 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAIAAAA2KZn2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADFJREFUeNpiPHPmDAPpgAmZY2xsjFURpjgTA1lgOGtjwRNoZ8+exaWNkQrxRjwACDAACRoJDyKpASUAAAAASUVORK5CYII=);
}
strong {
  padding-top: 10px;
  background-color: #eee;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAKCAIAAABAEyt9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH1JREFUeNrMVMkNACEIVGNH9N8B9LQPsoRwLfvSeQnM4IjRiYjjNLaJAYAXRKRDSeoMc0KVLplWUopNeLFvavZmW+GWWhJyBCsbkff7C2ZmdeedKQsTHU7mgzMfk6AX2TmanMxl6HuFRzz5OprXUYw9U9WcecM/scYFeAQYAN6pdR5vn9aWAAAAAElFTkSuQmCC);
  text-shadow: 1px 1px #fff;
}
span {
  padding-top: 10px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKCAIAAABaL8vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGdJREFUeNq0U8ENACEIU+JG7L8B7HQPE0Kw9R6GvgCrlaLTzEYnVslVdQfuntOoQE5eihgIQGqpQM55bkBYa2wDI+deaQeZxwwpvv1qLHbx06LLMC4aAifc9YqgRY+Y3f9ARjM+AQYAOsRNgQZ0WqkAAAAASUVORK5CYII=);
}

img {
  margin: 10px 20px 20px 20px;
}
br {
  border: 1px solid #ccc;
}
sup, sub {
  vertical-align: baseline;
  position: relative;
}
sup {
  top: -0.4em;
}
sub {
  top: 0.4em;
}


/* Errors & Warnings copied from CSS by edeverett & Eric Meyer */
/* warning - inline styles and/or copied from MS Word */
[class^="Mso"], /* ^ == starts with */
[style*="mso"], /* * == contains */
[style*="color"], 
[style*="font-family"],
[style*="font-size"],
img[alt=""], /* alt="" can be fine, but would be wrong in a Wysiwyg Drupal field */
*[class=""], /* empty attribute warnings */
*[id=""] {
  background-color: lime;
}
div:empty, 
span:empty,
li:empty, 
p:empty,
td:empty, 
th:empty {
  background: yellow;
}

/* errors */
h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p,
p table {
  background-color: pink;
}





/* reflect drupal theme css */
body#tinymce.mceContentBody {
  font-size: 1em; /* change this to match theme */
}
/* add more theme css here */

/* for example: */
/* override sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css */
body#tinymce.mceContentBody {
  color: #222; 
  font-family: sans-serif; 
  font-size: 14px;
  line-height: 1.5em; 
}
#tinymce td, 
#tinymce pre {
  color: inherit; 
  font-family: inherit; 
  font-size: inherit; 
}



/* classes for styles menu */
/* add more menu style css here */
/* or add as comments and add to wysiwyg settings as a drop down list */

/* for example, having set body to 14px in the example above: */
/*
 * goto: admin/config/content/wysiwyg/profile/1/edit
 * and under CSS, add:

14 pixels=f-14
16 pixels=f-16
18 pixels=f-18
20 pixels=f-20
24 pixels=f-24

 * to use the microstyle font classes here:
 */
.f-14 {
  font-size: 1em;
  line-height: 1.714285714em;
}
.f-16 {
  font-size: 1.142857143em;
  line-height: 1.5em;
}
.f-18 {
  font-size: 1.285714286em;
  line-height: 1.333333333em;
}
.f-20 {
  font-size: 1.428571429em;
  line-height: 1.2em; /* 20 > 24 */
}
.f-24 {
  font-size: 1.714285714em;
  line-height: 1.25em; /* 24 > 30 */
}