Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In our previous movie, we wrote our site's global styles. Global styles give you the baseline styling for your site, and provide the foundation for the remainder of your site's styles to be built off of. In this movie, we are going to tackle the next step in styling your site's typography, writing targeted styles for specific regions of the page. Now very rarely will you want all paragraphs in the headings, sidebars, footers and main content regions to look the same. To accomplish this, we're going to use descendant selectors to target specific elements within page regions.
It will help first to review the structure of our site and talk about how this is going to allow us to style each area separately, so I am going to do that now. I have our resources.htm file opened, and this is found in the 07_11 folder. So if I go over to Code View, we can see that inside of our wrapper we have a header. So we have our header region, then we have a region called mainNav. After the mainNav region, we have a region called mainContent.
Inside mainContent, we have another div tag called mainArticle. After our mainContent region is finished, we have another div with an id of sidebar. So we have a sidebar region, and finally, we have a region with the id of footer. So if we are looking at that in Design view, we have the header. We have our mainContent, which is that region. We have our main navigation, which is that region. We have our sidebar, which is this region, and finally, we have our footer, which is that region.
So we have those distinct areas, and we can use those areas to target specific styling for the content inside of them. Now, in the last movie, I made you hand-code. I'm sorry, but I hope you enjoyed it and notice that it really isn't that hard. Trust me. If you're really adverse to code, forcing yourself to do that a few times would really make you feel like, it's really not that bad, but I am going to let you off easy this time. We are going to go back to the CSS Styles panel, and we are going to use that to make the majority of our changes. Okay, so let's just go down through our page in order, and start targeting those areas that are global styles that didn't fully style.
The first thing I want to turn my attention to is, right up at the top of the page, Resources. Now, this is a heading1 that has an ID of page ID. Every single page in our site has this. We have a little heading at the very top that identifies which page that is. This is especially helpful when we have something like Resources, where there are multiple files in the resources section. It really helps to identify that this is indeed that section of the site. Okay, so what I am going to do now is I am going to write a selector that targets this.
So I am going to go over to the CSS Styles panel. Again, I am going to collapse the Files panel, just to make this a little bit easier for me, and I am going to use the CSS Styles panel to help me focus exactly where I want this to be placed, okay? So what I'm going to do is I am going to come right over here and find this #mainConten h1 tagline rule. I am going to click that to highlight it. Now why am I doing that? Because now when I create a new rule, the new rule is going to go directly underneath that one, so it's a really easy way of making sure that your styles remain organized as you create new ones.
Okay, I am going to create a New CSS Rule, and here I want to create the mainContent space pageID. Now that came up automatically. How in the world did Dreamweaver know to do that? Well, remember, I was clicked inside that heading, when I chose New CSS Rule. Dreamweaver is going to try to write a selector for you that targets that region. Now it doesn't always get it right. So what I'm going to do is I am going to place my cursor in front of the #pageID, and I'm going to type in h1. So now what I'm doing is I am saying hey, any heading one with an ID or pageID - and notice there is no space between h1 pageID - that's found within mainContent, I want to affect.
Now here you need to make sure that there is a space between the h1 and mainContent. So if you don't have a space there, make sure there is one there. Okay. I am going to click OK. Now one of the first things I could do here is set the color for this, but remember, we wrote our global styles where all heading once have that sort of deep teal color. That's the color I want, so I don't need to set it again here. Now for Font-size I am going to choose 1.4em, so I am going to change that. Now I want my Font-weight to remain Bold, so I am going to be very explicit about that, and then I am going to go and set some Box model properties.
So I am going to go to my Box category. For Margin Top, I am going to do 20 pixels. Now you'll notice here I'm not doing ems. I am doing pixels. That's because I want to make sure it stays exactly that far away from the top edge of the page. Ems would change if somebody changed the Font Size, whereas 20 pixels will always remain the same. And for Padding, I am going to turn off Same for all. For Bottom, I am going to type in .25 em. There we go. Now one last little thing here; I want a border underneath it to act as sort of a rule between it and the content below it.
So I am going to go to my Border category, deselect Same for all, and then we are going to do a Bottom border. I am going to do a Solid border, 2 pixels, and for Color, I am going to do the same color, #193742. If I hit Tab, I can make sure it's that teal color that I am looking for. It is. Then I am going to click OK. So just like that, my header up top styles itself exactly the way we want, and again, we use the region and the ID that has to target that specific element. Now I am going to scroll down a little bit because I want to style this list that we have down here.
It doesn't look like a list right now, but if I click inside of it, I can indeed see that it is inside of the UL tag, and each of these guys are inside list item tags. Remember, in our global styles we did a reset that told all unordered lists and list items to have no margins and no padding. So it pretty much just made it look like not a list. All right. so let's go ahead and make it look more like a list. I am going to go ahead and scroll down a little bit more in my styles, and find this mainArticle ul selector, right there. I am going to select that because I want my next rule to go just below that.
So I am going to choose a New CSS Rule, and my Compound Selector is coming up pretty much the way that I want, except for a couple of things here. Number one: I don't need this #wrapper at the beginning. So I am just going to choose less specific, and it will get rid of that. Even though it's not hurting anything, I don't really need the ul there either, so I am going to get rid of the ul, but I am going to be very careful to make sure there's still some spacing between mainArticle and li. To be honest with you, once you get use to writing these descendant selectors, it's easier, a lot of times, just to write them yourself rather than trying to go through this sometimes complex dialog box that Dreamweaver has.
So I am going to go ahead and click OK, and here I am going to switch immediately to my Box category because Margins and Paddings are what we are going to use here to control this. So for Margins, I am going to choose deselect Same for all. My Top margin is going to be zero. My Right margin is going to be zero. My Bottom margin, on the other hand, that's going to be 1.2ems, and then finally, the Left margin is going to be 2.4ems, and that's going to push it away from the edge of the parent container by a good amount there. I am going to go back to my Type category, and in my Type category, I am going to change Font size to 1em, and then for Color I am going to go ahead and choose #51341a; and that's that sort of brown color that we were using elsewhere in the site.
So I am going to go ahead and click OK, and now our list is looking a little bit more like a list. Now you might notice that we don't have any bullet points. Now that's okay. We are going to go in and set those bullet points as graphics a little bit later on. Okay, so that's our mainContent region. Let's turn our attention to our sidebar, which right now is not looking that good. So we need to go ahead and fix that. I am going to scroll down through my styles, and eventually I am going to find one of the sidebar styles right there. Well, I am actually going to click on the mainContent rule just above it, because I am going to write a very generic sidebar rule, and I want that to be the first of all my sidebar rules.
So again, I am just going to highlight that and then click the Plus symbol, and now this time I could just do an ID selector really, because I am just going to do #sidebar. Make sure it's defining in main.css. I'll go ahead and click OK. Now here we are going to write really what amounts to a global style. Everything in our sidebar should be a little smaller than the rest of our content, just by the very nature of the sidebar being so narrow. So for my sidebar's Font-size, I am going to type in 90%. That's going to shrink down any text inside of the sidebar to 90% of what it would've been originally.
It's just going to make the text in the sidebar a little bit smaller. When I click OK, you can see exactly what I am talking about. It took all your headlines, all your paragraphs, shrunk them down just a little bit. That also means that if I now say 1em for one of those, they're actually going to be 1em of 90% of what the body tag would be. So those values are cumulative as you go down the order, and that's something you really need to remember. Okay. Let's target some of those specific areas. So once again, with that rule selected, I am going to choose New CSS Rule. I am going to do a Compound Selector and remember when I said it was just easier to type these yourself sometimes? This is one of those times.
I am going to type in #sidebar space p. So #sidebar p, so any paragraph inside of a sidebar. Click OK. And for that, we just need a Line-height. I am going to do a Line-height of 1.2, make sure I am doing multiples there, and that just means a smaller Line-height than the remainder of our page. I'll go ahead and click that, and it does tend to move things up a little bit, although we've got so much going on there right now you can't really see that change. Okay, now, I want to affect these specials. Notice that this is still rather crowded in here.
So what I am going to do is I am going to use the fact that this is a div tag within ID of specials inside sidebar. I am going to write a rule that targets that element specifically, and targets the h2 inside of it first. So again, I am going to come right over to my CSS Styles panel, click on New CSS Rule, and I am going to type in #sidebar #specials h2. So #sidebar #specials h2. Now remember, this is targeting any heading two found inside of an element with an ID of specials, found inside of an element with an ID of sidebar.
So please don't get overwhelmed with these really long selectors. All they really are is saying, "Hey, when you find this, inside of this, go ahead and style it that way." We make those increasingly more specific so that they don't really work or overwrite any of the other styles we have on our page. I am going to go ahead and click OK, and now we have got a little bit of work ahead of us here. Our Font-size is going to be 1em, so we have got that. Our Font-family is going to be Arial, Helvtica, sans-serif. Our Font-weight is going to be bold. It's going to ensure that that heading is bold, no matter what else is going on around it.
For Color, I am going to go ahead and click inside that dialog box, so I am going to type in #193742. Remember, that's that teal color we have been using. And again, if you ever want to see what this is doing, just click Apply, and you can see all of our headings right there changing. Now there are a couple of things we still need to do here. I am going to click on the Block category, and for Text-align, I am going to choose Right. I am also going to click on my Box properties, and I am going to deselect Same for all for Margin. For my Bottom margin, I am going to type in 0. I am also going to click off Padding Same for all, and for Padding Top, I am going to type in 1em, so 1em for Padding on the top.
Now why did I do a little bit of Top padding? Because we are going to do a border that's going to separate all of those elements. So I am going to go to my Border category, deselect Same for all, and for Border Top, we're going to do Solid, 1 pixel, and we're going to do that same color, #193742. I am going to go ahead and click OK, and now you can see exactly what's going on there. That border up top is acting as a nice separator between those guys, and the text is aligned. Now we have got a little bit of work to do, and you might say to yourself, "You know what? "I don't like that top one having that line.
I would rather have my monthly specials and not have that separator between them." Well, if you click inside that heading, you can see that there is actually a class already applied to it called Top, and that's going to allow us to tell that one, "Hey, by the way, top one, you shouldn't have a border." So let's go ahead and write that selector while we are at it. So I am going to go right over to my CSS styles > New CSS Rule, and here we are just going to select Compound Selector, type in #sidebar #specials h2.top.
And I am going to click OK, go down to Border, and I am just going to tell Border, None, and that's all we really need to do. I am going to go ahead and click OK, and you can see that border is going to go away for the top one, but still gives us a nice separator between the bottom two there, so that's cool. Now believe it or not, I know this thing still looks kind of messy, but we really only have two more selectors to write. So let's go ahead and write those selectors for us. I am going to go ahead and choose New CSS Rule, and I want to target the paragraphs within that particular element, so I am going to type in #sidebar #specials p. So #sidebar #specials p, so any paragraph inside of a div tag with an ID of specials, inside of the other div tag with an ID of sidebar.
I am going to go ahead and click OK, and this one is going to be fairly easy. The Font-style is going to be italic. The Text-align is going to be right. So I am going to go over to my Block category, and for Text-align I am going to choose Right. I am going to go down to my Box category and deselect Same for all for Margin. Now for Top margin, I am going to type in .5ems, and for Bottom margin, I am going to type in .5ems. I am going to leave the Right and the Left alone, because I really don't want them to have one. So I could type in zero, or I could just kind of leave them alone like I am doing. One more thing, let's go back to our Type category and let's set a Line-height for that.
I am going to set the Line-height at 1.6. That's going to control the amount of space between one paragraph and the next. Remember, for Line-height, we are going to be using multiples, so now when I click OK, I get the spacing I want between those guys, and I get the alignment that I want. They're italicized. They're looking exactly the way I want them to do. Now the last thing I need to do right here is our Monthly Specials. That headline along with Did You Know headline really don't fit those regions. So right now they are getting all their styling information from the global h1, so we need to overwrite that.
So we notice, by the way, that they're in a div tag with the class of callOut. Because callOuts can be used within our mainContent and within our sidebar, I want to write a selector that really isn't specific to the sidebar, and having that class callOut is going to allow me to do that. I am going to go to my CSS Styles and scroll up, and go all the way up and find this callOut Selector. Now that's controlling the div tag itself, but I want to target the headings inside of it. So with that selected, I am going to choose New CSS Rule, and I am going to do a Compound Selector, and I am going to do .callOut.
So callOut with a capital O, space, h1. So again, that's going to target any h1 inside of an element with the class name callOut. I am going to go ahead and click OK, and then just make a few minor changes here. The Font-size is going to be 1.2em, so we are going to make it little bit smaller. Color for that we can leave unchanged, because that teal color is going to work out just fine for us. Let's go ahead and put a border on the bottom of it, so deselect Same for all. We are going to do Bottom Border, Solid, 1 pixel and the Color for that's going to be the same teal color, so #193742.
So after a while you do kind of get them memorized. And you know what? Let's make that a little bit thicker, how about 2 pixels? That will offset it a little bit from that line underneath it. So feel free to make changes as you're doing this. You are like, what if we did this, or what if we used something other than a solid line? What if I used a double line? Yeah, feel free to go ahead and do that, kind of experiment with it, and see if you get something that you like a little bit better. Now I am going to go to the Box category, and here I am going to deselect Same for all for both Margin and Padding. For my Margin Bottom, I am going to type in .5ems. That's going to add a little bit of space below it, but for my Padding on the bottom, I am going to do .25ems, and that's going to push the border away from the text a little bit.
I am going to go ahead and apply that, click OK, and there are our headlines. Cool! So I am going to save the file. We have done a lot of work here, preview that in my browser, and now we see the result of our global styles and our targeted styles coming together to format that page the way that we wanted it to be formatted. Cool! Now writing our global styles first, and then focusing on specific areas, that's a really good practice, and it's one that's going to ensure that you are styling is consistent throughout your site.
It also means that when you're writing styles for specific areas, you don't need to define the same properties over and over and over again. If all headings are going to be Arial, for example, you don't need to define the Font Family property in every heading style, just the global one. Even better, your typography is now much easier to update and maintain, because most of your edits will be made to the global styles, not the area specific styles, which can be harder to locate and more numerous. Now in the end, each designer develops a strategy that fits their site and their workflow the best.
As you develop your own styles, pay attention to the techniques that can save you time, create smaller code, and still give you the power and flexibility that you require for your design.
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.
Your file was successfully uploaded.