Practice: Styling Basics
Now, you should be able to complete this exercise. You will be styling a basic form. If you have an online tool you prefer to use for this work, you may do so. Otherwise, work in whatever editor is comfortable for you. You should download the starting point for this task before you begin to work on the practice assessment. This exercise does not count toward your grade. It is just for practice!
Test your skills: Styling basics
The aim of this practice is to assess whether you've understood our Styling web forms article.
Note: You can try out solutions by editing the starting point file locally, however it may be helpful to put your code in an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.
Styling basics 1
Our basic form styling assessment is fairly free-form, and you have a lot of flexibility over what you do here. But your CSS should aim to fulfill the following requirements:
- Add some lightweight "reset" to make fonts, padding, margin, and sizing more consistent.
- On top of that, add some nice, consistent styling for the inputs and buttons.
- Use some layout techniques to make the inputs and labels line up neatly.
Download the starting point for this task to work in your own editor or in an online editor.
Source: Mozilla, https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Styling_basics
This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.