title: How to get the first letter of each word to be a different size and the rest to be the same size
body: <p>How can I make the first letter of each word in a text to be a different size to the rest? </p>
  
  <p>For example I am trying to make the J in jogging to be bigger than ogging and J in jog to be bigger than og. Also everything has to be capital letter.</p>
  
  <p>JOGGING JOG</p>
  
  <p>So far i have </p>
  
  <p>HTML: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;
      JOGGING JOG
  &lt;/h1&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>h1{
      font-family: amatic sc,cursive;
      color: #FFFFFF;
      font-size: 120px;
  }
  </code></pre>
  
  <p>I looked up some information but it seems this can only be done in JavaScript. I might be wrong but if possible can this be done with HTML and CSS only? Maybe using different classes to hold info and then positioning the letters? </p>