<main>
  <div class="wrapper"> <!-- block added to differentiate box margin space with dashed border -->
    <div class="box">
      <div class="content"> <!-- block added to differentiate box padding space with dashed border -->
        <h1>Content Goes Here</h1> <!-- Heading -->
      </div>
    </div>
  </div>
</main>
/* Play With Box Settings */

.box {
  width: 300px;  /* content width */
  height: 50px;  /* content height */
  padding: 20px;  /* space between content and border */
  margin: 20px;  /* space between border and other elements */
  border-width: 20px;  /* border thickness */
 
  border-style:solid;
  border-radius:0px; /* round corners */
  background-color:#F4F4F4; /* try red, orange, ... */
}

.box:hover {
  border-width:30px; /* border thickness */
  border-color:#29AAE1;
  background-color:white; /* try red, orange, ... */
}

/* Play with Font and Text Settings */

h1 {
  text-align:center; /* left, right, center */
  color:black; /* try pink, red, yellow,. . . */
  font-size:24px; 
	font-style:italic; /* normal, italic */
	font-weight:lighter; /* bolder, bold, lighter, normal */
}

/* Other Style Settings */

body {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	display:table;
}

main {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

.wrapper {
	width:auto;
	display:inline-block;
	border:1px dashed black;
  cursor:pointer;
}

.content {
  display:table;
  width:100%;
  height:100%;
  border:1px dashed black;
}

h1 {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

* { /* antimated trantitions for all elements */
  -webkit-transition:0.5s; /* For Safari 3.1 to 6.0 */
  transition:0.5s; 
}


External CSS

  1. http://digitallearning.esc4.net/pixels4kids/codepen/css/basic.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js