Add a bit of Style

Let's start styling it up a bit!!!

HTML forms can further be styled up and look prettier with the help of some basic CSS knowledge. 

 

The width property can determine the width of the input field :

input {
  	width: 100%;
         }

You can also determine the length of a specific type of input by using attribute selectors.

The padding property can be used to add space inside the text field.

input[type=text] {
   width: 100%;
   padding: 12px 20px;
   box-sizing: border-box;
}

The background-color property can be used to add a background colour to the input  and colour property can be used to change the colour of the text.

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}
Discussion
Great work shivanshi

Thank You Prayasu! :)

After reading this post my interest in learning HTML has increased. Now I'm really curious . Thank you shivanshi s for such a enthralling post. You explained the whole concept really well.๐Ÿ™Œ๐Ÿ‘

2

thank you sm Joel๐Ÿ’™

Very informative article.Thank you!!

Thank you Ishanya ๐Ÿ’™

Hello Shivanshi S, Thank you so much for sharing all this wonderful info!!! Really helpful.

3

You're welcome Charvi โ™ฅ

Hii Dear! Wonderful article dead!! Keep up wuth this great work dear!!!

1

Thank you jigyasa ๐Ÿ’›

1

โคvery well writtenโค

2

๐Ÿ’›

1

Hi Shivanshi! You have taken up a very initial yet crucial topic to teach. Kudos. Can you please make the following changes for us to be able to publish it: 1. Divide it into 1 or 2 more steps 2. Add more screenshots of how stylized form would look like 3. Update your profile

Done!

1

6

7