The Web Design Survival Guide | CSS Example 1

by todaly1

HTML

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="css-example-1.css">
    <meta charset="UTF-8">
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h2>h2 Headline inside the header tag</h2>
    </header>
    <main>
      <section id="section-1">
        <article>
         <div class="column">
          <p>Paragraph inside a div tag named column.</p>
         </div>
         <div class="column">
          <p>Paragraph inside a div tag named column.</p>
         </div>
        </article>
      </section>
    </main>
    <footer>
     <p>Paragraph inside the footer tag.</p>
    </footer>
  </body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

body{
font-family: "Open Sans",Arial, sans-serif;
}

header{
background-color: lightgray;
padding:5px;
}

h2{ 
font-size: 24px;
font-weight: normal;
}

#section-1{
background-color: grey;
padding: 5px;
overflow: auto;
}

.column{
width: 48%;
float: left;
background-color: white;
margin: 5px;
padding: 5px;
}

footer{
background-color: black;
padding: 5px;
font-size: 14px;
font-style: italic;
color: white;
clear: both;
}