A Kind of Reset
{"view":"split-vertical","prefixfree":"1","page":"css"}
<!-- content to be placed inside <body>…</body> -->
<h1>This is a header, and the largest.</h1>
<h2>And this is also a header, but one size smaller.</h2>
<h3>Finally, this is a header too — the smallest.</h3>
<p>This is a damn paragraph of gibberish. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.</p>
<p><small>This is a small little bastard of a paragraph. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla.</small></p>
<hr>
<ul>
<li>And this here</li>
<li>Is an unordered list</li>
</ul>
<ol>
<li>And this here</li>
<li>Is an ordered list</li>
</ol>
<hr>
<form>
<input value="This is a regular input">
<button>This is a button</button>
<select>
<option>Option
</select>
</form>
<hr>
<img src="http://placekitten.com/640/480">
<img src="http://placekitten.com/853/480">
<img src="http://placekitten.com/853/360">
<hr>
<div class="box">
<h3>This is a header inside of a box.</h3>
<p>This is a paragraph contained inside of a box.</p>
<ul>
<li>And this is</li>
<li>a list in a box.</li>
</ul>
</div>
<div class="box">
<input value="This is an input in a box.">
</div>
<hr>
/**
* A Kind of Reset
*/
* {
margin:0;
padding:0;
box-sizing:border-box;
border:0;
}
html {
font-size:16px;
font-family:helvetica;
padding:2rem;
}
body {
font-size:1.3rem;
line-height:2rem;
background:url(http://griddle.it/16-1?color=fff&num=0&horizontal=16) 0 1px;
}
h1, h2, h3, p, ul, ol, img {
margin-bottom:1.5rem;
}
h1 {
font-size:3rem;
line-height:3rem;
margin-bottom:3rem;
}
h2 {
font-size:2rem;
line-height:2rem;
margin-bottom:2rem;
}
h3 {
font-size:1.5rem;
line-height:2rem;
}
ul, ol {
padding:0;
list-style-position:inside;
}
small {
display:block;
font-size:1rem;
line-height:1.5rem;
}
input, button, select {
-webkit-appearance:none;
box-shadow:inset 0 0 0 1px black;
font-size:1.5rem;
font-family:inherit;
height:3rem;
margin-bottom:1.5rem;
padding:0 1ex;
}
hr {
height:1.5rem;
box-shadow:0 -1px 0 black;
position:relative;
top:1px; /* offset */
}
img {
background-color:black;
display:block;
max-width:100%;
max-height:11rem;
}
.box {
background:rgba(0,0,0,.1);
box-shadow:inset 0 0 0 1px black; /* even with display:border-box, using borders will ruin the baseline without a set height. */
padding:1.5rem;
padding-bottom:0;
margin-bottom:1.5rem;
overflow:auto; /* to contain margins */
}