Smarten Up a Slick Login Form With CSS3

Web forms are an integral part of a website’s design. Whatever the purpose, forms are intended to be a simple way for users to input values and submit data. Having HTML5 and CSS3 at your disposal, allows you to create forms that are both intuitive to use and visually appealing. Suhail Dawood believes that web design should be clean and efficient. The form design that he is going to be coding follows those principals, including just three elements: a username input, a password input, and a submit input.

Right now, Suhail Dawood doesn't have anything too special, just a form, three inputs and a blank document. Let’s create a CSS file called style.css and link it back to his HTML page. Remember, the CSS file is currently located in his main directory; make sure you use the correct path if you choose to put your CSS file in another folder, such as the folder ‘css’. Before he adds any of his own styling to the CSS file, it is always good practice to start off from a clean slate. Let’s start off with defining a font and background gradient for his login page.