Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

WDS66 - Style the Forms(Part 1)

In the last article, we learned about attribute selectors in CSS and it is really great to have some more selectors than just class or id. Moving forward, today we are going to style the forms using CSS. We have already learned to create forms using HTML. Let's style them so that they become more appealing to users...

Add Basic Styling


  • width is set to 100% so that it occupies whole horizontal space
  • padding is used to get padded inputs inside the Input box
  • the margin is used to get proper space between to input fields
  • border-radius is making curved corners

Colored Inputs

Add background-color to input and color property to change the color of the input text.

Focused Inputs

Add hover pseudo-class to change input field when the user focuses on input.

That' all for today. You can use various styling techniques learned in CSS on forms to make them look as you want. In next post, we will study styling other form elements.
Till then #keepCoding.

This post first appeared on The Coding Express, please read the originial post: here

Share the post

WDS66 - Style the Forms(Part 1)


Subscribe to The Coding Express

Get updates delivered right to your inbox!

Thank you for your subscription