Waylee George shows how to style the HTML hr tag with CSS in HTML5. Remove the default border, set background color and height, use percentages for responsive width, and add gradients or dashed borders for custom effects.
This video will introduce you to the HR tag, also known as the horizontal rule tag, and how you can still style it even in HTML5. The HR tag, or horizontal rule tag, is used when you want to separate sections of your web page with just a simple straight line going from one side of the page to the other. The tag itself is one of those single or empty tags that has the opening and closing all in one tag. Now, in older versions of HTML, you could add some style to the line by making it a certain width or height and even color, and even specify if it were a solid or a dotted line. But since late HTML4 and now in HTML5, that method is no longer supported. Now it is styled in the Cascading Style Sheet and not directly within the HR tag itself. Let me show you what I'm talking about. Opening up my editor here, and this is the Komodo editor, and I've already got the line installed right here. And this is the tag right here. Now technically speaking, if you are using an XHTML page, which we are not, this is an HTML5 as shown in the declaration here, then this would have to be shown with a space and then the forward slash. Either way will work, but I'm going to go this way. And this is how it's demonstrated. Now how this is actually being shown or interpreted through the browsers is this is a transparent line with a border around it. But that transparent center is so small that the border looks to be solid from top to bottom. So let me demonstrate how that actually is by adding some style. Now up here between the opening and closing style tag, which is located between the opening and closing head tag, we add the selector HR. And you see how Komodo just automatically pops it up here. I can just hit the Enter key and we're good. Now then, I want to add an opening curly bracket, and then Komodo automatically adds the second or closing curly bracket. I've hit my Enter key so I got some room to add some stuff. So what I want to do is I want to make the border none. Then I'm going to add a color to the background and I'm going to make the height of the center part even greater so you can see that. Actually, let me add the height first, that way you can see what I'm talking about as far as it being transparent. Let me say 5 pixels. Now you can see a little bit better. If I make this 15, probably see even better. There you go. So you can see here the HR itself is this transparent stuff in the middle, and it actually by default has this border around it. So let's go ahead and get rid of that border. Put the separator there, that's the semicolon. Hit my return key. Border: none. The separator or the semicolon. Hit the return key because without the border you're not going to see anything. Because it's there but it's the same color. It's transparent so it's the same color as the background. So we need to add some color to that background and let's go with red. That'll be easy to see. And there you go. And you can do so much more. If you wanted this to be gradient you could do that with just the styling. If you wanted this to be dotted or dashed you could do that with the styling. And if you only want it to be a certain width you could do that as well. Let's say 65% would be a good number. Or you could use pixels, but I would rather go with percentage. That way it could be adjusted according to the window it's being viewed in, whether it's a smartphone or a tablet or a desktop. And there you go. And that's how you can style your HR tag, or otherwise known as the horizontal rule. That's going to bring us to the end of this video. Thanks for watching, and you have a great day.
