kenmazaika/tutorial.md

## gistfile1.txt
http://codepen.io/pen

## tutorial.md

      
    Raw
  

              tutorial.md
            
          
    In HTML enter this.  Replace Ken Mazaika with your name.
<body>
   <div class="boxy">
     <h1>Ken Mazaika</h1>
     <h2>I like to code</h2>
  </div>
</body>

This is the text of your web page. This will say your name, and that you like to code.  Then in the CSS line go through and add these lines one by one and watch it get updated:
.boxy {
  background-color:rgba(0,0,0,0.5);
}

h1 {
  font-family:"Helvetica Neue";
  font-weight:100;
}

h2 {
  font-family: "Helvetica Neue";
  font-weight:200;
}

.boxy {
  width: 200px;
  padding:20px;
  margin:auto;
}

body {
  background:url('http://25.media.tumblr.com/8fb80a2a6111ffbf05defc3a758a2f8a/tumblr_n10n4rpjvZ1st5lhmo1_1280.jpg');
}

.boxy {
  color:white;
}

Now update the HTML to look like this:
<body>
   <div class="boxy">
     <h1>Ken Mazaika</h1>
     <h2>I like to hack</h2>
     <p>My favorite website is: Google</p>
  </div>
</body>

And update the CSS to look like this:
p {
  font-family:"Helvetica";
}

Then update the HTML to look like this:
<body>
   <div class="boxy">
     <h1>Ken Mazaika</h1>
     <h2>I like to hack</h2>
     <p>My favorite website is: <a href="http://google.com">Google</a></p>
  </div>
</body>

Then add this to the CSS:
a {
  color: #4444aa;
  font-weight:bold;
}