Super Markup Man: 100% Achievement Guide

Super Markup Man is a simple HTML/CSS-based programming game with 100 levels and 8 Steam achievements.Two achievements are tied to completion, three for doing specific tasks, two for killing ‘bugs’, and one for accumulating playtime in a specific game mode.
Nothing is actually missable as you can replay any mode at any time after unlocking them.A compatible controller is REQUIRED for the “CSS Buddies” achievement. Keep in mind that not all controllers are supported by the game and you might need a Xinput capable device in order to get this one.

It’s highly recommended to DISABLE the ‘Bugs’ mechanic until reaching the Free Play section of the guide (Settings > Bugs). The reason for this is simple, that game mode has a “play for 30 minutes” achievement that requires actual playtime and will NOT unlock by just idling.

Each

▎represents a platform in the game. Feel free to accommodate the tags and elements in any way you want, just make sure to follow the corresponding sequence to not break any solution.

✧ All three solutions are valid and will give you the same results within the game.

▎<a> text </a>

▎<em> text </em>

▎<strong> text </strong>

▎<em> <a> text </a> </em>

▎<strong> <a> text </a> </strong>

▎<strong> <em> text </em> </strong>

▎<a> text </a>
▎<em> text </em>

▎<strong> text </strong>
▎<a> text </a>

▎<em> text
▎<a> text </a></em>

▎<em> text
▎<strong> text </strong> </em>

▎text <br/>
▎text

▎text <br/>
▎text <br/>
▎text

▎<a> text </a> <br/>
▎text

▎text <br/>
▎<em> text </em>

▎<strong> text <br/>
▎text </strong>

▎text
▎<p> text </p>

▎text
▎<p> text </p>
▎text

▎<em> text </em>
▎<p> text text </p>

▎text <p> <strong> text
▎text text </strong> </p>

▎text <p> text <br/>
▎text </p>

▎<img/>
▎<p> text text </p>

▎<img/> <p> text <br/>
▎text </p>

▎<a> text </a> <br/>
▎<img/>

▎<a> <img/> <br/>
▎text </a>

▎<img/> text
▎<p> <img/> text </p>

▎<h1> text </h1> text

▎<h1> text </h1>
▎<h2> text </h2>

▎<h1> <em> text </em> </h1>
▎<img/>

▎<h2> text </h2>
▎<img/>
▎<p> text </p>

▎<h2> <a> text </a> </h2>
▎<strong> text </strong>

▎text <hr/> text

▎text <hr/>
▎text <br/> text

▎<p> <img/> </p>
▎text <hr/> text

▎<hr/> <img/> <hr/>
▎text <p> text </p>

▎text <hr/>
▎<a> <img/> </a> <br/>
▎text

▎<button> text </button> <br/>
▎<img/>

▎<button> <strong> text </strong> </button>

▎<button> text </button>
▎<button> text <p> text </p> </button>

▎<button> <img/> <br/>
▎<em> text </em> </button>

▎<ul> <li> text </li> </ul>

▎<ul> <li> text </li>
▎<li> text </li> </ul>

▎<ol> <li> text </li> </ol>

▎<ol> <li> text </li>
▎<li> text </li> </ol>

▎<ol> <li> text </li>
▎<li> <a> text </a> </li> </ol>

▎<ul> <li> <strong> text </strong> </li>
▎<li> text </li> </ul>

▎<ol> <li> text </li>
▎<li> text </li>
▎<li> text </li> </ol>

▎<img/>
▎<ul> <li> text </li>
▎<li> text </li> </ul>
▎<p> text </p>
▎text

▎<h2> text </h2>
▎<ol> <em> <li> text </li>
▎<li> text </li> </em> </ol> <hr/>
▎text

▎<h1> text </h1>
▎<ul> <li> <a>
▎<strong> text </strong>
▎</a> </li>
▎<li> text <em> text <br/>
▎text </em> text </li></ul>

▎<ol> <li> text </li>
▎<li> text </li>
▎<ul> <li> text </li>
▎<li> text </li> </ul>
▎<li> <button> text </button> </li> </ol>

✧ Start HTML Mode again.

▎<a> text </a>

▎<em> text </em>

▎<strong> text </strong>

▎<em> <a> text </a> </em>

▎<strong> <a> text </a> </strong>

▎<em> <strong> text </strong> </em>

CSS mode has two sides: left is for HTML coding and right is for CSS styling.
This can be either played in solo (by pressing shift/clicking on the screen to switch sides) or with a partner (if a compatible controller is connected). Either way, you will still need a controller for one achievement, so plug it in now (if you have any), and beat the first CSS level to unlock:

The first CSS level is also perfect to get the Quick Coder achievement.
Just keep restarting it until it’s doable within 2 moves:

• HTML▎<a> text </a>

• CSS▎a{
  ▎color: green; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<span> text </span>

• CSS▎span{
  ▎color: red; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎text
  ▎<span> text </span>
  ▎text

• CSS▎span{
  ▎color: orange; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎text
  ▎<div> text </div>
  ▎text

• CSS▎div{
  ▎color: blue; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> text <br/>
  ▎text </div>

• CSS▎div{
  ▎font-style: italic; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> text
  ▎<p> text </p> </div>

• CSS▎div{
  ▎font-style: italic;
  ▎color: green; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<em> text
  ▎<span> text </span>
  ▎text </em>

• CSS▎span{
  ▎font-style: normal;
  ▎font-size: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎text
  ▎<em> text </em>
  ▎text

• CSS▎em{
  ▎color: blue;
  ▎font-size: 10px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> text text </div>

• CSS▎div{
  ▎background: yellow;
  ▎font-size: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> text <br/>
  ▎text </div>

• CSS▎div{
  ▎background: red;
  ▎text-align: right; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> <img/> <br/>
  ▎text </div>

• CSS▎div{
  ▎text-align: center;
  ▎opacity: 0.5; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<h2> text </h2>
  ▎<img/>

• CSS▎img{
  ▎opacity: 0.25;
  ▎width: 100%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎text
  ▎<img/>
  ▎text

• CSS▎img{
  ▎display: block;
  ▎width: 25%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎text
  ▎<span> text </span>
  ▎text

• CSS▎span{
  ▎display: block;
  ▎opacity: 0.25; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎text
  ▎<div> text </div>
  ▎text

• CSS▎div{
  ▎background: green;
  ▎display: inline; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<h1> text </h1>
  ▎<img/>

• CSS▎h1{
  ▎font-style: italic; }
  ▎img{
  ▎display: none; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<a> text </a>
  ▎<div> <img/> text </div>

• CSS▎a{
  ▎font-size: 40px; }
  ▎div{
  ▎display: none; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<h1> text </h1>
  ▎<p> text </p>

• CSS▎h1{
  ▎font-size: 20px; }
  ▎p{
  ▎text-align: right; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<button> text </button>
  ▎<p> text </p>

• CSS▎button{
  ▎height: 50%; }
  ▎p{
  ▎opacity: 0.25; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<button> text </button>
  ▎<em> text </em>
  ▎<button> text </button>

• CSS▎button{
  ▎width: 100%; }
  ▎em{
  ▎color: green; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<hr/>
  ▎<div> text </div>
  ▎<hr/>

• CSS▎div{
  ▎background: orange;
  ▎text-align: center;
  ▎padding: 10px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎text <hr/>
  ▎<p> text </p>

• CSS▎p{
  ▎background: black;
  ▎color: white;
  ▎padding: 20px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<strong> text </strong>
  ▎<strong> text </strong>

• CSS▎strong{
  ▎display: block;
  ▎font-style: italic;
  ▎padding: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> text </div>
  ▎<div> text </div>

• CSS▎div{
  ▎background: red;
  ▎margin: 40px;
  ▎text-align: right; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎text <hr/>
  ▎<img/> <img/> <br/>
  ▎<img/>

• CSS▎img{
  ▎margin: 20px;
  ▎opacity: 0.5;
  ▎width: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<span> text </span>
  ▎<span> text </span>
  ▎<span> text </span>

• CSS▎span{
  ▎display: block;
  ▎font-size: 10px;
  ▎margin: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<h2> text </h2>
  ▎<div> </div>
  ▎<div> </div>
  ▎<div> </div>

• CSS▎div{
  ▎background: black;
  ▎display: inline;
  ▎margin: 10px;
  ▎padding: 10px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<button> text
  ▎<p> text </p> </button>

• CSS▎button{
  ▎color: red;
  ▎font-size: 40px;
  ▎height: 100%;
  ▎width: 50%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<img/>
  ▎<strong> <a> text
  ▎</a> </strong>

• CSS▎img{
  ▎opacity: 0.25;
  ▎height: 20px;
  ▎width: 100%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> <h2> text </h2>
  ▎<img/> </div>

• CSS▎div{
  ▎background: orange;
  ▎height: 25%;
  ▎overflow: scroll; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> <img/> </div>
  ▎<button> text </button>

• CSS▎div{ background: green;
  ▎height: 40px;
  ▎overflow: hidden; }
  ▎button{
  ▎font-size: 10px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> <img/> </div>
  ▎<p> <img/> </p>

• CSS▎div{ background: black;
  ▎width: 50%;
  ▎height: 50%; }
  ▎img{
  ▎width: 50%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> <button> text
  ▎text </button> </div>

• CSS▎div{
  ▎background: blue;
  ▎padding: 10px;
  ▎text-align: right; }
  ▎button{ width: 50%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> text <br/>
  ▎text <br/>
  ▎<em> text </em> </div>

• CSS▎div{ color: red;
  ▎font-size: 40px;
  ▎text-align: center; }
  ▎em{
  ▎color: blue; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> text
  ▎<h1> text </h1>
  ▎text </div>

• CSS▎div{ padding: 20px;
  ▎opacity: 0.5;
  ▎text-align: right; }
  ▎h1{
  ▎text-align: left; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<ul> <li> text </li>
  ▎<li> text </li>
  ▎<li> <img/> </li> </ul>

• CSS▎ul{ background: yellow;
  ▎margin: 40px; }
  ▎img{
  ▎opacity: 0.5;
  ▎width: 25%; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<ol> <li> text </li>
  ▎<li> text </li> </ol>

• CSS▎ol{ background: orange;
  ▎padding: 40px; }
  ▎li{
  ▎margin: 20px;
  ▎background: red; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<ol> <li> text </li>
  ▎<ul> <li> text
  ▎</li> </ul> </ol>

• CSS▎ol { color: green;
  ▎width: 50%; }
  ▎ul {
  ▎color: red;
  ▎font-style: italic; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> <ul> <li> text
  ▎</li> <li> text </li>
  ▎</ul> </div>

• CSS▎div{ background: yellow;
  ▎padding: 20px; }
  ▎ul{
  ▎background: orange;
  ▎padding: 40px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<hr/> <ul>
  ▎<li> text </li>
  ▎<li> text </li>
  ▎</ul> <hr/>

• CSS▎hr {
  ▎height: 10px;
  ▎width: 50%; }
  ▎li { color: blue;
  ▎display: inline; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> <button> text
  ▎</button> <span>
  ▎text </span> </div>

• CSS▎div{
  ▎background: green;
  ▎height: 50%; }
  ▎button{ height: 50%; }
  ▎span{ display: none; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<p> text </p>
  ▎<button> text </button>
  ▎<p> text </p>
  ▎<hr/>

• CSS▎p{ text-align: right; }
  ▎button{
  ▎background: black;
  ▎color: white; }
  ▎hr{ display: none; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<h2> text text </h2>
  ▎<div> </div>
  ▎<img/>
  ▎<div> </div>

• CSS▎h2{ text-align: center; }
  ▎div{
  ▎background: black;
  ▎height: 40px; }
  ▎img{ margin: 10px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<p> <strong> text
  ▎<span> text </span>
  ▎</strong> text
  ▎<span> text </span>
  ▎text </p>

• CSS▎p{ color: blue; }
  ▎strong{
  ▎font-style: italic; }
  ▎span{ font-size: 40px;
  ▎opacity: 0.25; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<a> text </a>
  ▎<div> <img/>
  ▎<img/>
  ▎<img/> </div>

• CSS▎a{ background: red; }
  ▎div{
  ▎overflow: scroll;
  ▎height: 50px; }
  ▎img{ margin: 20px; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> <img/> </div>
  ▎<h2> <a> text
  ▎</a> </h2>

• CSS▎div{ overflow: hidden;
  ▎height: 40px; }
  ▎img{ width: 100%; }
  ▎h2{ font-size: 20px;
  ▎text-align: center; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<a> text </a>
  ▎<a> text </a> <hr/>
  ▎<em> text </em>
  ▎text
  ▎<em> text </em>

• CSS▎a{ display: block;
  ▎padding: 20px; }
  ▎hr{ width: 50%; }
  ▎em{ font-style: normal;
  ▎color: green; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> text </div>
  ▎<ul> <li> text </li>
  ▎<li> text </li>
  ▎<li> text </li>
  ▎<li> text </li> </ul>

• CSS▎div{ background: yellow;
  ▎padding: 20px; }
  ▎ul{ width: 50%; }
  ▎li{ background: yellow;
  ▎display: inline; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<ul> <li> text </li>
  ▎<li> <button> text
  ▎<img/> </button> </li>
  ▎<li> <span> text
  ▎</span> </li> </ul>

• CSS▎ul{ color: orange; }
  ▎button{ text-align: left;
  ▎padding: 10px; }
  ▎span{ color: black;
  ▎font-style: italic; }

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

• HTML▎<div> <ol> <li> text
  ▎</li> <li> text </li>
  ▎<ul> <li> text </li>
  ▎<li> text </li>
  ▎</ul> </ol> </div>

• CSS▎div{ background: black;
  ▎height: 50%; }
  ▎ol{ background: white;
  ▎width: 50%; }
  ▎ul{ background: green; }

Written by lylat