Basic styling for all elements in wordpress default WYSIWYG editor (without colors)

wordpress post text.less

.entry {

  del {text-decoration: line-through;}
  strong {font-weight: bold;}
  em {font-style: italic;}
  
  h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    letter-spacing: -0.005em;
  }
  
  h1 {
    font-size: 2.85em;
    line-height: 1em;
    margin-top: 0;
    margin-bottom: .9em;
  }
  
  h2 {
    font-size: 2.1em;
    margin: .6em 0;
  }
  
  h3 {
    font-size: 1.4em;
    margin: .9em 0;
  }

  h4,h5,h6 {
    font-size: 1em;
    margin: 0.5em 0;
    font-size: 1em,
  }

  img {
    max-width: 100%;
    height: auto;
  }

  p {
    line-height: 1.6em;
    margin: 0 0 1.6em 0;

    a {
      text-decoration: underline;
    }
  }

  ul, ol {
    counter-reset: the_counter;
    list-style: none;
    padding:0;
    margin:0;

    li {
      line-height: 1.8em;
      letter-spacing: -0.005em;
      font-size: 1em;
      padding-left: 3em; 
    }
  }

  ul li:before {
    content: "• ";
    margin-left: -1.7em;
    margin-right: 1em;
    font-size: 1.1em;
    line-height: 1.6em;
    vertical-align: middle;
  }

  ol li:before {
    content: counter(the_counter)'.';
    counter-increment: the_counter;
    margin-left: -4.5em;
    margin-right: 1.4em;
    width: 3em;
    vertical-align: middle;
    display: inline-block;
    text-align: right;
  }

  address {
    line-height: 1.4em;
    letter-spacing: -0.005em;
    margin: 1.4em 0;
    font-weight: 500;
    font-size: 0.95em;
    font-style: italic;
  }

  blockquote {
    font-style: italic;
    font-size: 1em;
    padding-left: 2.6em;
    padding-right: .5em;
    margin: 1.6em 0;
    font-family: Georgia, Times, "Times New Roman", serif;
    quotes: "\201C""\201D""\2018""\2019";
    position: relative;

    &:before {
      content: open-quote;
      font-size: 4.2em;
      font-weight: 700;
      display: inline;
      position: absolute;
      left: -.1em;
      top: -.2em;
      line-height: 1em;
      top: -0.2em;
    }

  }

  pre {
    width: 100%;
    overflow-x: auto;
    font-family: Monaco, Lucida Console, Courier New, monospace, serif;
    background-color: #EEE;
    padding: 1em 0.7em;
    margin: 1.6em 0;
    font-size: 0.9em;
    outline: #DEDEDE solid 1px;
  }
  
  hr {
    border: none;
    margin: 2.1em 0;
    border-bottom: 1px solid #DEDEDE;
  }

  :first-child{margin-top: 0;}
  :last-child{margin-bottom: 0;}

}

wp_test_text.html

<h1>Ceci est titre1</h1>
<h2>Ceci est un titre2</h2>
<h3>Ceci est un titre3</h3>
<h4>Ceci est un titre4</h4>
<h5>Ceci est un titre5</h5>
<h6>Ceci est un titre6</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<hr />

<h2>Ceci est un titre2 au milieu du texte</h2>
<p><a title="ceci est un lien" href="tamere">Lorem ipsum dolor sit amet,</a> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h3>Ceci est un titre3 au milieu du texte</h3>
<p>Lorem ipsum dolor sit.<strong> Ce texte au mileu de paragraphe est en gras.</strong> amet, consetetur sadipscing elitr. <em>Celui-ci est italique. <del>Et la, barre de surcroit.</del></em> <span style="text-decoration: underline;">Celui-ci est souligne.</span> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h4>Ceci est un titre 4 au milieu du texte</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</blockquote>

<address>Lorem ipsum<br>
Chez moi<br>
Dans mon Pays<br>
02 23 56 78 96</address>
<pre>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</pre>