It’s hard to style basic web components if you’ve never done it before. You want your buttons and forms to look good and also be cross-browser consistent. The easiest solution is to use a framework like Bootstrap or Foundation, but that won’t help you understand the fundamentals. It’s actually not as hard as it seems, and in this article I’ll show you how.

To make life easy for myself, I’ve compiled all these into my own framework, Primitive (which also incorporates Sass and Gulp) and I encourage you to make your own as well, even if only for learning purposes.

Prerequisites

• Basic knowledge of HTML and CSS
• (Optional) Having some knowledge of the basics of setting up a responsive website without a framework will be helpful.

Goals

• Style buttons, in the form of div, link (a), input, and button elements.
• Style forms, including HTML5 input, textarea, and select elements.

Preparation

I referenced my fundamentals article from before because it includes a few things I like all my web projects to have: a CSS reset, and border-box reset. Basically, these two things will allow you to have a little more consistency and control over your layout.

CSS Reset

#css #design #fundamentals