This lesson is exclusive to members

Dreamweaver Templates & Javascript Menus

How to add and change the styling of a horizontal rule HR in Dreamweaver.

Daniel Walter Scott || VIDEO: 26 of 38

Download Exercise Files



I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link:

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Hi there, in this tutorial we're going to make this white line. It's got a horizontal rule, it's not hard, but there are some default styling that we want to go and change afterwards. So let's go do that now in Dreamweaver.

First of all, let's put in the Horizontal Rule. It's called HR tag, that's what they call it. So, I'm going to select my H1, which is my Heading1, because I want it just after this, and I'm going to go to 'Insert', 'HTML', and all the way down the bottom right, down the bottom is one called Horizontal Rule. Let's click on that. And, slide down, there he is there. Actually mine ended up right in the middle of my text, I'm going to undo. If that happens to you, click on it, click on the 'H1', make sure it's selected down here in your Tag Selector, and then go and click Horizontal Rule. I want to go after, please, and then, there he is there. There's my Horizontal Rule.

Now I'm going to preview this in a browser because by default the Horizontal Rule comes with some ugliness. So let's go check it in a browser. Now, it's a little hard to see, but it's actually what's called Inset, or Bevel and Emboss for the Photoshop people. If I zoom in loads you will start to see the styling on it. So down here, there he is there. You can see, it's kind of half white and half gray, and kind of got this little chiseled end here. I don't like it, you might be like, "You kind of see that." So you can save time, and just move on to the next tutorial. I don't like it, and I want to Style it. So, we're going to Style this HR, that's what's considered the Horizontal Rule. It's one of the few tags that doesn't have a beginning and an ending, like an H1 has an open and a close, an HR doesn't, like this BR tag, there are few that don't.

So, let's go and Style it, under CSS Designer 'Styles', 'Global', 'Selectors'. It's going to be called 'HR'. And because it's my pre-existing ones where we didn’t write it, like the H1, kind of something already pre-existing in HTML, we don't have to put the period in front. Something to do with Border. So Border, we're going to say, Style by default, it's inset, we're going to say, 'Solid', please. Color, I think it's like off-white by default, I'm going to make it white. And then I'm going to 'Save All', preview in my browser. And see what I like. Is it thin enough? You can play around with the width here. And put it down to 1 point or play with the pixels, I'm happy with the way it is.

All right, that is how to create a Line. It's a long tutorial for just a line but we want it to be a pretty line. And there we go. All right, on to the next tutorial.