<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.