The Web Design Survival Guide | CSS Example 2

by todaly1

HTML

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="css-example-2.css">
    <meta charset="UTF-8">
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h3>h3 Headline inside the header tag</h3>
    </header>
    <main>
      <section id="section-1">
        <article>
         <div class="column-1">
          <h4>h4 Headline inside a div tag named column-1</h4>
          <p>Paragraph inside a div tag named column-1.</p>
         </div>
         <div class="column-2">
          <h4>h4 Headline inside a div tag named column-2</h4>
          <p>Paragraph inside a div tag named column-2.</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;
}

h3, h4{
color: black;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: normal;
}

h3{ 
font-size: 22px;
}

h4{ 
font-size: 18px;
}

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

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

.column-2{
width: 47%;
float: right;
background-color: white;
color: black;
margin: 5px;
padding: 5px
}

#section-1 .column-2 p{
color: red;
font-style: italic;
}

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