Subtitles of the Movie

In this movie we will take the CSS styles that we have set up and apply them to our html document for our form. So let's go ahead and jump over to our HTML for this and move on down to our form region and we're going to need to apply our classes to our HTML structure here and all of our labels need to be over to the left-hand side whereas our different input elements need to be to the right of that. So with our labels we will set up a class equal to our Form Layout and then on our different form elements we'll set up a class for Stack Form. I'll go ahead and save that and now jump back into my browser here and I'll just refresh and I'll end up seeing what happens. Now, if you notice here it's kind of chaos but I'll go ahead and continue to add in the appropriate class here and the reason why it was doing such craziness was because we have float set up and there wasn't really enough room for that float to exist so if I continue to add in my classes here, I'll go ahead and add my class to the appropriate elements here for the Form Layout. Go ahead and save that, jump back in here and refresh. It shifts a little bit but not much so let me go back in and add in my Stack Form and I'll add the Stack Form to the form elements themselves. Now, with our Radio Buttons here, not only do we need to stack our labels but if we want them to appear right next to our actual form element, we also need to stack the form element so we need to do Stack Form on the labels as well as the actual elements for the Radio Button and then for our checkbox. And we also need to set up our class down here for our Submit Button but that also is going to need to be cleared. So I'll go ahead and set that up to Form Layout and get rid of my Stack Form there. So I'm going to go ahead and save that. Whenever I come back here and refresh, things don't look quite right. So what we need to do is we actually need to float our other elements here. So let me go ahead here and jump back in here and take a look at what's going on because we have our Form Layout setup and our Form Layout and our CSS is just making it so that our form is clearing to the left. What we need to do is we also need to make that Form Layout and those elements to have that Form Layout also stack. So what I'll do is I'll go back in here and on my elements on the left I'll go ahead and add that Stack Form and that's going to make them float to the left as well. So right now they're just clearing. They're not floating or anything so I'll go ahead and copy that and then go down through here and paste in that Stack Form to those things that have the Form Layout on them. So then I'll save that and jump back into my browser and refresh and like magic, it all falls into place. Now, if you look down here at the bottom, it seems like we have a problem with our Subscribe to RSS Feed and then the Agree to the Terms of Service on this website and to take care of that we will have to set up a couple of more rules here, as well as a couple of ids to identify these items and so to take care of that, I just need to jump back into my HTML here to add in some identifiers to some specific elements and then stylize those elements. So first of all I'm going to come up here and where I have that Subscribe to RSS Feed, I'm going to add in an ID here and I'm going to call this Radio Span because this is our selector for our Radio Buttons and then I'm going to go down to the Form Label here for the Agreeing to our Terms of the Service and add in an ID equal to Check Span because that's going to surround our checkbox. So go ahead and save that and then jump over into my CSS and add in those two rules. So I'm going to go ahead here and Copy and Paste and first I'll set up the Radio Span. So the Radio Span is going to have a width here set to 15m and it's also going to clear left. And then our Check Span is going to need a width set to 25m and I'll set its Margin Right to be 1m and then lastly it needs to clear left. So we'll go ahead and save that and jump back into my browser here and whenever I refresh, everything goes where it should. Now, that concludes our look at how to stylize our layout and it also concludes our look at stylizing forms.