Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.
As a designer, one of the things that I absolutely love about CSS is the amount of control that it gives me over my typography. Prior to using CSS, there were aspects of my type that I had no control over, like Line Height, for example. Now, whether you refer to it as Line Spacing, Line Height or Leading, the Line Height CSS Property lets you adjust the amount of space between lines of text. While that, in and of itself, is great, if you have a full understanding of how the Line Height property works, you can make it do a great deal of work for you inside your layouts.
The value that you assign to an element's Line Height become the distance between the baselines of lines of text. Now, what's more, the calculated value is one of the values used in calculating the height of an element's Inline box, which allows us to do some pretty cool things outside of just controlling typography, as we're going to see in this example. So here we have the explores.htm open, and I want to scroll down and talk about a few of the things that we're going to do here. Scrolling down and looking at our paragraph text, it is a little too jammed together.
I want to space that out a little bit more, so it's a little bit easier to read. Now, if I scroll down a little bit further, I can see that I have a box down here where I have some of the benefits of being an explorer member listed. What I'd like to do is kind of center this text, Explorer Member Benefits. I would like to center that within that space vertically. Now, most people would use padding to do that, but as we're going to see, Line Height can help us do that as well. Well, let's first tackle the Line Height of our paragraph right up here. Remember, one of the easiest ways to target this is just go ahead, hold down the Alt key on the PC or the Command+Option Key on the Mac and click on it, and you can go right to the selector that you're looking for.
Now, we are looking for the #mainContent p selector. So I'm going to go ahead and click on that. Now, it does open you up in a Split Screen View, but more importantly, look at that. It jumps right over here to the CSS Styles panel to that rule. I'm going to double-click that to open that up in my CSS Rule Definition dialog box. Okay, well, here is where we get to set a Line-height. Notice that we do have units of measurement for that. We have a unit of measurement that we don't have anywhere else, and I want to talk about that. So I'm going to type in 1.8.
Now, just a little plug for online typography here, guys: Online typography typically needs a little bit more white space than traditional print typography. So whereas your Leading values in print might be set to, say, 120% of your text size, online, you should think more that as 140% of your font size. However, it is not a hard and a fast rule. In this case, we're going to do more. So when we do 1.8, if I grab the pulldown menu, we have all of our normal units of measurement.
There are percentages. There's ems. There's pixels. There's whatever you want to use. But at the very bottom, we have a unit of measurement called multiple. Now, that's not going to be available in any other property, only Line-height. So what is multiple? Well, essentially multiple means 1.8 times the size of your font. So if our font is at 1 em, which can translate to, say, 16 pixels, then it's going to be 1.8 times 16 pixels, or whatever the size of your font is. So you could also think of that as 180%, and you can certainly type in 180% and get something very similar.
Most people, for Line-height, use multiples for one very important reason, and that's inheritance. Let's say we put a Line- height of 1.5 ems on our body tag. Now, the Line-height's value inherits. So you would think that everybody in your site would get 1.5 ems as their Line-height. That's not entirely true. What would happen is the value would be calculated first. So you'd have 1.5 times whatever the size of the body text is, and then that fixed value would then be inherited by all of your paragraphs and headlines and things like that.
That's not desired. However, if you use a multiple, then the multiple itself is inherited, so everybody would get that 1.5, or 1.2, or 1.8, or whatever it is that you're going for. So as a general rule, if you're really using it simply for sizing and you want to make sure the proper value is inherited down the line, use multiples instead. All right. So I'm going to go ahead and click OK, click on Design view, and sure enough, now we get a little bit more vertical spacing between our text. That certainly does look a lot better to me.
Okay, well, I'm going to scroll down a little bit further to our Explorer Member Benefits box. So remember, I want to center that text in that box, that sort of dark blue background that we've got going on there. Now, most people, when they first start trying to tackle something like that, typically will use padding to do this. They'll put the same amount of padding at top and the same amount of padding in the bottom to get what they want. However, there's a much easier way to do this. Every single line of text that you use is inside of something that we call an Inline box.
Let me demonstrate that for you really quickly. You guys don't have to do this along with me. This is just me wanting to show you guys this concept maybe a little bit more clearly. All right. So if I take this and I give this a background color of, say, yellow, ff0 - there we go - and I go back over to my page, now every single one of these lines of text is considered to be inside what we call an Inline box. So this isn't one solid, big block. Each one of these lines of text is in their own box.
Now, Line-height is actually the space between the top and the bottom area between this box, and the text is centered in the middle of it. So 1.8, we are getting 1.8 times the size of this text and then the text is centered inside that. So the distance from baseline to baseline is actually centered within that. Now, we're going to use that particular fact to our advantage in this Explorer Member Benefits. So what we're want to do here is target, and once again, I can just bring up the Code Navigator, I'm going to target this rule: #mainiContent #mainArticle .memberBenefits h2.
So by selecting that, I just bring that right over here. I'm going to double-click that. And now, we're going to go into our Line-height. Now, here we could do a relative unit of measurement, or I could do a fixed unit of measurement, because we are not really worried about inheriting this anywhere. We're more worried about the size of our actual text box. So if I give it a Line-height of, say, 2 and give it a multiple there, click OK, and I'm just going to go ahead and flip that back over, you can see over here in Design View we get a much taller structure. Of course, it can't be that precise with that, because if somebody increases or decreases the size of the text, that's going to increase or decrease with it.
That may be the desired result, but what if you just wanted to make it, say, 40 pixels tall, and have it stay 40 pixels tall. Well you can do that as well. So I'm going to go back and edit that again. And this time, instead of leaving the Line- height as 2 - and I'm just going to hand-code this. You can bring up that dialog box again, if you'd like - I am just going to type in 40px for pixels. Do a Save All. Flip back over to Design view. You can it doesn't make a whole lot of difference. And that's based off of the default size. So it's going to be about the same. But now, if I increase or decrease the size of my text - so let me increase that - you can see that the size of the box is actually increasing because of the line breaks.
But if I decrease the size of my text, the line box itself stays exactly the same size at 40 pixels. If I'd used a relative unit there, say 2 or 1.8, that would continue to resize even if the text shrunk down a little bit. So it's really a personal preference, and it's up to you whether you want to use a fixed unit of measurement for the Line-height in those instances or a relative unit of measurement. So Line-height, that's a pretty straightforward concept. But just like anything else with CSS, you must fully understand how it works in order to take full advantage of it.
Using relative units allow you to create line spacing that relates to the text size, allowing the line spacing to scale with the text if the font size changes. Now, keep in mind that using multiples for line spacing is encouraged if the Line-height property is going to be inherited. Although not a good idea for the majority of your site's typography, using absolute values for Line-height both centers text vertically inside its line box while also setting the height of the box itself, which is ideal for menus and other single-use structures.
Find answers to the most frequently asked questions about Dreamweaver CS5 Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.