HTML5 Video Tutorial

Part 6 - CSS Page Layout

The following code is from the Video.

CSS Web Page Layout

The following CSS is used with the HTML code show below.

@charset "UTF-8";

article, aside, footer, header, main, nav, section {
  display: block;
}

html, body, h1, h2, h3, ul, li, a, p, 
article, aside, footer, header, main, nav, section {
  padding: 0;
  margin: 0;
}

.banner {
  background-color: #11233b;
  color: white;
  padding: 10px 20px;
}

body {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  background-color: #f0f0f0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
}

nav {
  background-color: #20416c;
  padding: 5px;
  margin-top: 1px;
}

li a {
  color: white;
}

li {
  display: inline;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 20px;
  font-variant: small-caps;
  font-weight: bold;
}

section {
  background-color: #bbbbbb;
  margin-top: 10px;
  padding: 5px;
}

article {
  background-color: white;
  margin-top: 5px;
  padding: 10px 15px;
}

main {
  width: 640px;
  float: left;
  margin-bottom: 10px;
}

aside {
  background-color: #bbbbbb;
  width: 270px;
  float: right;
  padding: 20px;
  margin-top: 10px;
}

footer {
  clear: both;
  background-color: #20416c;
  color: white;
  padding: 5px 20px;
}

The following is the HTML code for a sample web page that uses semantic elements that are new to HTML5.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>News</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--[if lt IE 9]>
    <script>
      document.createElement("article");
      document.createElement("aside");
      document.createElement("footer");
      document.createElement("header");
      document.createElement("main");
      document.createElement("nav");
      document.createElement("section");
    </script>
    <![endif]-->
  </head>
  <body>
    <header class="banner">
      <h1>News</h1>
      <p>Local and National News</p>
    </header>

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="archive.html">Archives</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </nav>

    <main>
      <section>
        <h2>Local News</h2>
        <article>
          <header>
            <h3>Fire fighters rescue man from building</h3>
            <p>(author, date)</p>
          </header>
          <p>This is the story text. This is the story text.</p>
          <p>This is the story text. This is the story text.</p>
        </article>

        <article>
          <header>
            <h3>New Library to be built</h3>
            <p>(author, date)</p>
          </header>
          <p>This is the story text. This is the story text.</p>
          <p>This is the story text. This is the story text.</p>
        </article>
      </section>

      <section>
        <h2>National News</h2>
        <article>
          <header>
            <h3>Snow storm is making travel difficult</h3>
            <p>(author, date)</p>
          </header>
          <p>This is the story text. This is the story text.</p>
          <p>This is the story text. This is the story text.</p>
        </article>

        <article>
          <header>
            <h3>Thousands are without power</h3>
            <p>(author, date)</p>
          </header>
          <p>This is the story text. This is the story text.</p>
          <p>This is the story text. This is the story text.</p>
        </article>
      </section>
    </main>

    <aside>
      <h2>Be a news reporter</h2>
      <p>If you see news happening - Send us a Text.</p>
    </aside>

    <footer>
      <p>Footer Information</p>
    </footer>

  </body>
</html>