- With our form now properly structured,…we're going to turn our attention to styling it.…Instead of styling the entire form as we did…in the previous chapter, we're just going to…refine the styling a little bit, so that we can then…turn our attention to making our form responsive.…Now in this case I'm working in the forms.htm file…found in the 02-03 directory, and as you can see…in the head of the document, there's already…a good bit of form styling going on here.…If we preview it in a browser, you can see…we've already got the labels and form elements styled…rather nicely, maybe not great, but not too bad.…
And most everything looks okay.…You'll notice the Submit button looks very familiar…from the previous chapter.…So we're using a lot of the same consistent type of styling.…The first thing I'm going to do is go up…to the very top of my styles, and I'm going to add a style…for the entire form, to control the line height.…So I'm just going to type in register-form…and inside that I'm going to add line-height:…
Released
1/8/2016In this course, senior staff author James Williamson shows how to use flex containers, flex child items, and responsive design techniques to create responsive layouts for two forms: a short search form and a longer registration form with sections. He demonstrates how to style the form structures, fields, labels, and buttons; control the alignment of different elements; and enhance the responsiveness of both forms with media queries.
Share this video
Embed this video
Video: Refining basic styling