The Web Design Survival Guide | CSS Example 3

by todaly1

HTML

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="css-example-3.css">
    <meta charset="UTF-8">
    <title>Title of the document</title>
  </head>
  <body>
    <header>
      <h3>h3 Headline inside the header tag</h3>
    </header>
    <main id="inheritance">
      <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>
          <p>Another paragraph inside a div tag named column-1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente a quod at esse ea, dicta officiis, corporis eligendi adipisci molestias, repudiandae aut. Tempore sit quo itaque perspiciatis eveniet totam, modi ratione, sit mollitia illo a. Voluptate adipisci, recusandae soluta aspernatur. Delectus consectetur adipisicing elit nemo totam. Perferendis, voluptas, esse!</p>
         </div>
         <div class="column-2">
          <h4>h4 Headline inside a div tag named column-2</h4>
          <p style="color: blue">Paragraph inside a div tag named column-2 with an inline style applied.</p>
          <p>Another paragraph inside a div tag named column-2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta modi ratione, sit mollitia. Delectus ad natus ut rem enim, doloribus beatae nemo totam, debitis atque officia architecto modi quos itaque cumque illo quia, nulla nisi. Est exercitationem blanditiis perferendis vel necessitatibus, soluta ipsum.</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;
}

#inheritance{
font-family: Times, "Times Roman", serif;
}

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

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

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;
}