<h1>Use a CSS Reset</h1>
<h3>Resetting a browser's base styles gives developers a clean slate to work with.</h3>
<form action=".">
<div class="text">
<label for="type-text">Text (text)</label>
<input type="text" name="type-text" id="type-text">
</div>
<div class="text">
<label for="type-search">Search (search)</label>
<input type="search" name="type-search" id="type-search">
</div>
<div class="text">
<label for="type-tel">Telephone (tel)</label>
<input type="tel" name="type-tel" id="type-tel">
</div>
<div class="text">
<label for="type-url">URL (url)</label>
<input type="url" name="type-url" id="type-url">
</div>
<div class="text">
<label for="type-email">E-mail (email)</label>
<input type="email" name="type-email" id="type-email">
</div>
<div class="text">
<label for="type-datetime">Date and Time (datetime)</label>
<input type="datetime" name="type-datetime" id="type-datetime">
</div>
<div class="text">
<label for="type-date">Date (date)</label>
<input type="date" name="type-date" id="type-date">
</div>
<div class="text">
<label for="type-month">Month (month)</label>
<input type="month" name="type-month" id="type-month">
</div>
<div class="text">
<label for="type-week">Week (week)</label>
<input type="week" name="type-week" id="type-week">
</div>
<div class="text">
<label for="type-time">Time (time)</label>
<input type="time" name="type-time" id="type-time">
</div>
<div class="text">
<label for="type-datetime-local">Local Date and Time (datetime-local)</label>
<input type="datetime-local" name="type-datetime-local" id="type-datetime-local">
</div>
<div class="text">
<label for="type-number">Number (number)</label>
<input type="number" name="type-number" id="type-number" min="0" max="20">
</div>
<div class="text">
<label for="type-range">Range (range)</label>
<input type="range" name="type-range" id="type-range" min="0" max="100">
</div>
<div class="text">
<label for="type-color">Color (color)</label>
<input type="color" name="type-color" id="type-color">
</div>
<div class="submit-area">
<input type="submit" value="Submit" name="submit-1">
</div>
</form>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
// Demo example for https://github.com/AllThingsSmitty/css-protips#use-a-css-reset
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.