Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that our form structure is nearly complete, we can concentrate on making it fit to visual design of our site. We'll do this by writing styles that target individual form elements and by taking advantage of the additional structure we added to our form with the fieldset and legend tags. So here I have the join.htm file from the 12_12 explorers directory open and we're going to start adding some styles. Now prior to this chapter, we've primarily worked with our CSS through either the CSS Styles panel or the New Rule Definition dialog box.
Well in this chapter we are going to do something little different. We are going to go in and we are going to start hand coding our styles. Now I know for a few of you, that may have quickened your pulse a little bit. You may be little nervous about that, but trust me about something. Hand coding is one of the best ways to quickly gain a comfort level with a certain technology, CSS especially. It's going to help you learn the syntax of it. It's going to help you feel comfortable going in and making those tweaks and edits on your own. It's also going to help you understand the overall structure of your CSS code and how it relates to everything else.
There's really no substitute for getting in there and sort of working with that code and learning it yourself. If you're brand-new to Dreamweaver, if you're brand-new to hand coding, don't panic. Dreamweaver gives us a lot of really cool tools. That's going to help us make sure that our syntax is correct. Plus we are going to go slowly through all the lines of code, talk about what they're doing for us and why we're writing a specific line. So hopefully you'll find this process just as instructive as working with the CSS Styles panel as well. So what I am going to do in order to sort of prepare for this, I am going to collapse my panels down to icons and then I am going to switch to a Split Screen View, so that I can see my CSS on one side and my design on the other.
Now I am going to scroll down so that I can see my form, so I can kind of watch and see what's going to happen with that. And over in the Code pane if you don't see what, I see go up right up here to the document that you have opened, join, find the related files, which is listed just below that, and click on main.css. That will make sure that it's focusing on this code. Now one of the reasons why I'm hand coding is because our CSS has sort of an empty block where our form styles need to go. So I want to make sure that those go in the right place and I want to be able to inspect these styles maybe a little bit more closely than some of the other styles we've written.
So I am going to scroll through my code and go all the way down to line 654. Now that's a lot, but that's fairly standard for a lot of sites out there. As a matter of fact there are a lot of sites out there that have three times this amount of code. All right, so what about line 653, you can see that we have a couple of comments. There little gray lines of code here. /* and ended by a */ is a comment. They are not processed by browsers. They are just ways of a sort of talking to ourselves or in this case organizing our code.
So our form styles are going to go right below the line 653 and then we have individual form areas for code. On another page we have a support form and a contact form and here is the area where our join form styles are going to go. Later on after you have done with this chapter, go to the clean site folder within our exercise files, open that up, and check out those other forms and why they needed some individual styling as well. Okay, well let's start with an overall form styling. I am just going to type in the selector on line 654. I am going to type in #mainContent.
that's all one word, lowercase m, uppercase C, space form. So we are targeting any form element inside of the mainConcent region. Open a curly brace. You'll find those just to the right of the P key. You have to hold the Shift key down to get them and then hit Return to go down to the next line. You can see automatically Dreamweaver is bringing up a list of properties that we can choose to set. Type in an F and then O and it will jump down in the list of font. That's what you want. So type in F and an O, then you should be able to hit Return and Dreamweaver will finish that for you, and you will see a colon. So for our font, I want you to type in normal, then a space, .9ems, so normal meaning we don't want it italicized, we don't want it bold, and then another space and then type in an A and you'll Arial, Helvetica and sans- serif. Go ahead and select that, type in a semicolon to end that property, go down to the next line ,and here you want to type in color and the color is going to be #193742, so 193742. Type in another semicolon, hit Return and close your curly brace. So you want an opening and a closing curly brace to surround those properties.
Now to learn a little bit more about the syntax of what we are writing here, be sure to go up and watch the chapters on typography and on layout that deal with CSS as well as any of the other CSS-based titles in the lynda.com Online Training Library. Okay if I click inside my form now, I can see that the text changes to Arial and it changes to that sort of darker blue color. So we are well on our way. Now let's take advantage of the fact that these forms have separate areas defined by fieldset tags. So I am going to go up to my form styling in my CSS and just below the rule that we've just created, make sure that you don't get rid of and that you're outside of that last closing curly brace there.
We type in #mainContent, space fieldset. So fieldset is one word. Open up your curly brace and on line below that, we are going to set some padding. So type in p-a, padding will come up. You can hit Return and it will finish it and you want to do 40 pixels 20 pixels 0 0. So that's going to give us 40 pixels worth of padding at the top of the fieldset. It's going to give us room for our legend tag to show up. We have 20 pixels worth of space to the right of our fieldset, zero on the bottom, and zero on the left.
So it's just giving a little bit of padding on the top and on the right. Hit Return to go down to the next line, and here you want to set your margin, and our margin is going to be set to zero, zero, 2em. So the zeroes here again, top margin of zero, right and left margin of zero, bottom margin of 2em. So essentially it's just going to push these fieldsets away from each other so that there's a little bit of space in between them. We are going to do a background color, and the background color here is going to be #e1d8b9.
On the next line we are going to do a border. Our border is going to be none and that's going to take away any default border, so every browser displays a fieldset as having sort of a gray border around it. We don't want that. Then we are going to do a position property of relative, so that we can position items within the fieldset using absolute or relative positioning. And then finally, we're going to do a float and we are going to float this to left. Now the float really isn't for our forms. It's for the other forms but we are leaving it in there just so that it will work for our site-wide. We don't really need that for our particular form.
In fact you can see it's causing some real issues with our form as these fieldsets we're stacking right beside each other. So we've got to fix that in just a moment. All right let's keep going. One of the most difficult HTML elements to style, if not the most difficult, is the legend tag. The legend tag just kind of does its own thing and different browsers allow different properties to actually affect it. So what we are going to do is kind of we have some default styling for our legend tag and then maybe going and tweak that a little bit to see if we can't place it a little bit more precisely.
I am going to go down to the next line and I am going to type in #mainContent fieldset legend, so that's the legend tag directly inside of the fieldset. We are going to give it a padding of zero, don't forgot my semicolon there, a margin of zero and then I am going to assign a color, something little different than rest of the form, #51341a. So 51341a, it's sort of a brown color.
Don't forget to close your rule out and now if you click back over in your form, you can see that the legends of change colors. They are more of a brown color now. Now one of the things that's really difficult about styling legends within fieldsets is positioning them. They want to show up in the upper left- hand corner and every browser has their own way of positioning them. You would think just sort of zeroing everything out and then telling the legend where you wanted to go would work. Unfortunately, browsers, and in this case most notably Firefox, don't allow certain types of positioning to occur to legend tags. So sometimes you got to be a little tricky.
What I would like you to do is go over to Design View and highlight each of the legends. Personal Information is first. Make sure you look at your Properties Inspector and you are on the HTML tab and click the Bold icon. That is going to basically throw a strong tag around each one of these legends. I am going to do the same thing for Login Information and I'm going tp have to scroll down but I am going to do the same thing for Tour Profile. So each one of these should now look bold and that's good because we kind of want it like that, but more importantly it means they have a strong tag around it and we can now actually go ahead and style that.
So what I am going to do is focus back on our Code View, go down the next line, and here I am going to type in #mainContent fieldset legend strong. And to be honest with you we don't really need to fieldset there. You could have just said mainContent legend strong, but it helps us understand kind of how it relates to the selector above it. I am going to go down to the next line and I am going to position this using absolute positioning. If you want to know more about absolute positioning, watch the chapter on CSS layout where we talk about it in a little bit more detail.
Then we are going got do a margin-left of 20 pixels. We are going to do a margin-top, and you can just scroll through those lists if you would like, of 10 pixels and then finally a font size, so font- size not just font, but font-size of 1.2ems. Go ahead and close your curly brace there. Now when you click, it's not really going to look that good in Design View, so we're done we are going to preview this in our browser to see where it positions the legend.
Now you might be wondering, well when we use positioning we use offsets, so left and top, why margin-left and margin-top? Well again, it's getting around some of these browser bugs and browser errors out there. Instead of using offsets, we're going to use margins to position it, but the absolute position around the strong tag allows us to move it at all. So its one of those closings were it's not an ideal selector and at first glance it doesn't make a whole lot of sense, but it does work. Okay we have one last thing left to do here in this stage of formatting. I am going to go down into our individual forms and since each of our forms is different in width and where its found and how it reacts, a lot times what you are going to want to do is for a specific form, say okay for this form, I want all my elements in it to look like this or I want its width to be this and that's why we have a separate section down here for our join form. And that's the one we are currently working on.
So here I want you to type in a selector that says #mainContent space form and no space here #frmJoin. Now a word about this. This is what we call an element specific ID selector. It's saying when you find the ID frmJoin on a form inside of mainContent, so that's what it's basically saying and remember we named that form frmJoin. All right another space and then type in fieldset. So we are targeting the fieldsets that are only found in our join form.
Go down to the next line and type in width 580 pixels. So we're setting an explicit width for our fieldsets to 580 pixels. When we do that the form behaves itself a little bit better. So go ahead and do a Save All, preview that in a browser, and you can kind of see what we have done to our form. Our fieldsets are now individual regions that are separated using the margin, the legend is positioning itself inside the fieldset instead of right on the edge, and we have given ourselves a little bit of spacing between that.
You will notice that this initial styling helps the overall structure of the form but it does absolutely nothing for the individual form elements and that's what we are going to have to tackle next.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.