challenge.md

CSS Challenge

You start with this:

<style>
  div {
    display: inline-block;
    width: 250px;
    padding: 20px;
    border: 1px solid grey;
    background: lightgrey;
  }
  ul {
    padding: 0;
  }
</style>

<div>
  <ul>
    <li>Foozle miz fiz</li>
    <li>Jazzle piz</li>
    <li>Shtrackle twiz</li>
  </ul>
</div>
<div>
  <ul>
    <li>Foozle doozle pizzle miz fiz</li>
    <li>Jazzle biz marzle piz</li>
    <li>Shtrackle shmarzle beezle twiz</li>
  </ul>
</div>
<div>
  <ul>
    <li>Foozle miz fiz</li>
    <li>Jazzle marzle piz</li>
    <li>Shtrackle beezle twiz</li>
  </ul>
</div>

And must end up with this:

You may add at most 3 CSS rules (eg. color: deeppink) and can’t add any selector.

Fork and edit start.html to show your solution! :)

start.html

<style>
  div {
    display: inline-block;
    width: 250px;
    padding: 20px;
    border: 1px solid grey;
    background: lightgrey;
    text-align: center;
  }
  ul {
    padding: 0;
    display: inline-block;
    text-align: left;
  }
</style>

<div>
  <ul>
    <li>Foozle miz fiz</li>
    <li>Jazzle piz</li>
    <li>Shtrackle twiz</li>
  </ul>
</div>
<div>
  <ul>
    <li>Foozle doozle pizzle miz fiz</li>
    <li>Jazzle biz marzle piz</li>
    <li>Shtrackle shmarzle beezle twiz</li>
  </ul>
</div>
<div>
  <ul>
    <li>Foozle miz fiz</li>
    <li>Jazzle marzle piz</li>
    <li>Shtrackle beezle twiz</li>
  </ul>
</div>

Well done Mr. Back end! :P