<!-- html and body are 'block' -->

<header>
  <nav>
    <a href='#'>Link one</a>
    <a href='#'>Link two</a>
  </nav>
  
  <h1>Heading level <span>1</span> ← (showing a span)</h1>
  
  <p>Each element has a default 'display: type.' There are 3 types: block, inline, and inline-block.</p>

  <p>Some things are <em>emphasized</em>, or even - <strong>strong</strong>ly emphasised. You can even select ran<span>dom 'spans' of inline char</span>acters. links are inline - and so is <code>code</code> and <mark>marked (highlighted)</mark> text. <code>display: inline;</code> elements wrap like a regular word inside a paragraph. They don't have all of the same properties as block level elements. Inline elemens don't have children. An <a href='#'>inline link</a> works like this... but - you also will want to turn links into <em>blocks</em>, so that you can "put stuff in them."</p>
  
  <p>I'll put a blue border around all <code>display: block;</code> level elements - and and red border around all of the <code>display: inline;</code> elements.</p>
  
  <p>And what about this whacky <code>display: inline-block;</code> element: <img src='https://assets.codepen.io/4806767/down.gif' width='50'>? I'll put a purple border on those ones.</p>
</header>


<main>
  <section>
    <h2>Heading level 2</h2>
    
    <p>Some paragraph type thing</p>
    
    <h3>Heading level 3</h3>
    
    <ul>
      <li>
        <p>You can have a paragraph in a list item - or really anything you want.</p>
      </li>
      <li>You'll likely have some <a href='#'>Links</a>.</li>
      <li>List item 1</li>
    </ul>
  </section>
  
  <section class='float-example'>
    <img src='https://assets.codepen.io/4806767/gradient.png' width='200'>
    
    <h2>Image float example</h2>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores quos quidem, alias hic ducimus nulla tenetur consequatur laudantium nihil omnis repellendus libero. Non porro facilis unde, ab veniam vero nesciunt?</p>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores quos quidem, alias hic ducimus nulla tenetur consequatur laudantium nihil omnis repellendus libero. Non porro facilis unde, ab veniam vero nesciunt?</p>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores quos quidem, alias hic ducimus nulla tenetur consequatur laudantium nihil omnis repellendus libero. Non porro facilis unde, ab veniam vero nesciunt?</p>
  </section>
</main>

* {
  padding: 3px;
  box-sizing: border-box; /* for later ! */
}

/* we haven't talked about this yet, but you can target many selectors with one rele */
html, body, header, main, section, h1, h2, h3, h4, p, ul, li {
  border: 3px solid dodgerblue;
}

em, strong, span, code, mark, a {
  border: 3px solid red;
}

img {
  border: 3px solid purple;
  vertical-align: middle; 
  /* 
    inline-block can do this 
    so - it has the ability to set size, margin, padding - but also some 'inline' type abilities. A little of both / but also - used very little now...
  */
}

.float-example img {
  float: left;
  margin-right: 10px;
  opacity: .8;
}

p, li {
  line-height: 1.5;
  max-width: 80ch;
}












code {
  background-color: darkgray;
  color: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.