Join James Williamson for an in-depth discussion in this video Basic form styling, part of Building Responsive Forms with Flexbox.
- View Offline
Before we start using FlexBox…we need to first add our default styles to our form.…So these are going to be styles that don't necessarily…control layout they're just going to make the form…look a little bit better.…Now to do that I'm going to be…working on the search.html file,…found in the 01-04 folder…in your exercise files.…Now if you take a look towards the top of the code,…you'll see that I've placed a style tag right here,…within the head of the document.…So for the purpose of the projects…that we're going to build in this course,…we're going to write our styles as an embedded styles…directly onto the page.…
Now I don't necessarily recommend that…from an authoring standpoint.…You'll see for example that we do have…an external base.css…That's handling the rest of our styling…but what this is going to do…is allow us to focus specifically on our form styles…and sort of isolate them here on the page.…So we can really focus on them and concentrate on them…and not have to worry about going back and forth…from the CSS document to the html file.…
In 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.