Yea, I know that it has been a while since the last post. I've been busy lately! Anyway, this one will be very short and sweet and perhaps moderately useful every once in a while. We will discuss how to modify the properties of a horizontal rule <hr>.
<hr>'s have been revered as rogue html elements for many years now. They don't behave well and often when styled they appear differently based on which browser you are using. So why bother even learning this, you ask? And I answer: I don't know.
So let's get into it, shall we? In days past, you could actually style <hr>'s using pure html. You could type something like <hr size="5px" width="90%" align="center"> and it would actually render. But that is all deprecated now. As is becoming the trend with everything web-design related in terms of formatting, you'll want to switch over to CSS for that stuff. Let's begin exploring the possibilities by creating a fine black line. Notice first of all what an unstyled <hr> looks like:
Now let's try tinkering with the CSS a little. Create some internal CSS in your header that looks like this:
What that does is remove the border, modified the color to black, and adjusted the height to a single pixel. Here is what that would look like:
So that's the most basic code I will show you. You can use that to adjust the thickness and color of the line. Let me make a red line, no border, 5px thick:
...and with a border...
If you want to change only a single <hr> and you have many on a page, then simple write the CSS as inline:
<hr style="border:none; background-color:#f00; height:5px;">Quick note on the color there, the actual color for red is #ff0000. If the color repeats in a way such that the first two values are the same, the third and fourth values are the same, and the fifth and sixth values are the same, then you can actually write it using only three values instead of six. It's called a triple hex value. So #005599 could be written #059, and #3300FF could be written #30F. Just fyi.
So what else can you do with the <hr>? Pretty much anything! [um, that's definitely not true] Check out this guy (set against a grey backdrop)
That much is done with the following code:
Okay, now that's you've seen some tricked out styling, let's get back to some basics. To mix it up a little, I'll show the next few examples as they look with inline CSS. Let's go ahead and change a width. This can be done as such:
<hr style="width:50%;">And the height:
<hr style="height:3em;">The border properties are similar to the border of a table (refer to the table post). That is, you will style the thickness, the style (dotted, dash, solid, etc.), and finally the color, all in that order. Put them all together and you might get some code that looks like:
And that would produce something like this guy:
Let me build on that code right there and add some more coloring. If you want to change the color of the <hr>, then you need specify both the color property and the background-color property. Though both properties are specified, they will be the same color. This ensures that IE looks the same as the rest of the world. IE will refer to the "color" property and the civilized world will use the "color-background" property. So let's see what we can do with that:
That code would produce this guy:
Other options available to you is changing where it floats (the style="float:value" function is the same as the old html equivalent of align="value"). I am torn as to what to do with this, as the align function in html is deprecated, but older versions of IE only recognize the align tag.
You can also actually use an image as an <hr>, if you'd like. Here is an image that I will use as the <hr>:
(http://tinyurl.com/3qdqk5l)
Here is this image at a 5 pixel height:
And at 20 pixels:
Back down to a single pixel (with border width):
And at the width of the image (which is a little wider than this column):
Yea, I know that it's getting weird. So stay away from images in your <hr>, but know that it's possible if you are really interested. I don't know what else to say about <hr>'s. Tinker around if you'd like. In any case, know that there are different color schemes available for you. If for some reason you are having a dark background on your page, style the <hr> so that it appears light. If the background is #708090, then put an <hr> of with the style="color:#D3D3D3". If the background is #2F4F4F then try an <hr> with the style="color:#A9A9A9". Anyway, this blog post is now filed away for you guys.
Comments
Post a Comment