Advanced Dreamweaver 8 - How to Adjust Margins and Fonts for Tags

I am going to do one other thing for this style and that is another option that does not exist without CSS. If you notice over here, my headline bumps right up against the edge and it is pretty close to the top of the edge of this table. I would like to give it a little more breathing room and I would like it to line up with the text below it. To do that, I can add to the style definition some margin.

Now, you have patting and margin options and I will show you more about that in a second. But for now, unclick same for all, because I do not want the same margin all the way around this headline. That would mean that if I specified a number, I would have exactly the same space around it.

I want to be more précised than that. I want to be able to set this so that it is 25 pixels from the top. Meaning 25 pixels from there and 10 pixels from the left, meaning it will indent about 10 pixels like this paragraph below it. Now, when I click okay, notice the side bar is here and automatically highlighted so I can see all the things I just set. But nothing changes to my page yet because class styles have to be applied, there is nothing to automatically change like that H1 tag.

So this time, I need to select the headline. I will find my new style down here in the style area of the properties inspector. Now, there are many styles already here because like I said, this is like a cooking show and I have already prepared some of the ingredients. But the one I just added, sidebar head appears here now because I just created it. And when I select that, it automatically changes the formatting of this headline and notice it will also give me some breathing room around it.

So now, if I come down, scroll down, you will see there is another subhead down here. I can apply the same style to this subhead again, coming over here choosing sidebar head. And it automatically applies. One of the most powerful things about CSS is the ability to change a style like the one we just created and apply it to multiple elements at the same time. So, if I decide that I do not really like this being Geneva because my other font is Verdana and I want something with a little more contrast. Then I can double click on the sidebar head, come over here to my font list and change it. Let us try Georgia. Now, that is going to give me a tear of font and a little more interesting design, when I click okay, notice that it automatically changed both places that I have applied that headline style. That is the beauty of CSS.

The ability to style many elements at ones and then change them automatically just by changing the style, and I am going to do the same with my H1 tag and I want this to have a little breathing room too. Notice that it is right up against the edge as well. There are a couple of ways to edit a style. You can double click like I did with the sidebar or you can click ones and come down and use the edit styles button or you can actually make changes in the properties panel now.

I am just going to open up the rule definition dialogue again because I want to be able to see easily in the box settings, my margins. Now, ones again, I do not want the same margin all the way around. Look, if I type 10 in here, it is going to put 10 pixels around everything. If I erase 10, it is going to take it out of all of that because I have same for all checked. But I do not want that, I just want a little space at the top and a little space to the left.

So, to make this match the other things on the page, I am going to make the top spacing 25 pixels and I am going to make the left spacing ten. Again, matching up what I have before and this is the place where sometimes it is nice to take notes and keep track. That is the easy mistake to make as you go through. You can also always go back over and select something and see what it is but you have to close the CSS rule definition dialogue box first.

So now that I have assigned the margins that I want here, let me click okay. One more thing I wanted to change, in the type area, let us make that font match as well, Georgia and click okay. Now you see because the H1 tag is applied to all three of these headlines, they automatically change. And you see that the position of this headline is consistent across the page and the left alignment is the same because I have got the same 10 pixels of margin space applied to this paragraph that I do to this headline.