Forms are the one place where the browser does a lot on its own. Inputs, buttons and selects have their own default look and do not inherit the font or size from your page.
index.html
HTML
<style>
body { font-family: Georgia, serif; font-size: 18px; }
</style>
<p>This paragraph uses Georgia at 18px.</p>
<input value="But this input does not">
<button>Nor does this button</button>The paragraph follows body. The input and button keep their own small system font.
A base for all forms
Start every project with a few lines that make controls inherit and size predictably.
style.css
PHP
input, button, select, textarea {
font: inherit; /* use the page's font */
color: inherit;
box-sizing: border-box; /* width includes padding and border */
}Then style the common parts
index.html
HTML
<style>
form { max-width: 320px; font-family: system-ui, sans-serif; }
input, button { font: inherit; box-sizing: border-box; }
label { display: block; margin: 12px 0 4px; font-weight: 600; }
input { width: 100%; padding: 10px 12px; border: 1px solid #b9b2ad; border-radius: 6px; }
button { margin-top: 16px; padding: 10px 20px; border: 0; border-radius: 6px; background: #d94a00; color: #fff; cursor: pointer; }
</style>
<form>
<label for="name">Name</label>
<input id="name" type="text" placeholder="Your name">
<label for="email">Email</label>
<input id="email" type="email" placeholder="you@example.com" required>
<button type="submit">Send</button>
</form>Each piece is covered in the next lessons: inputs and labels, textarea and select, buttons, focus states, validation states and accessibility.
lightbulb
Don't restyle everything
Native controls such as date pickers, file inputs and range sliders are hard to restyle and are accessible by default. Style the parts that are easy, and leave the others alone.