Recently I looked into how to create a one pixel black lIne in CSS. CSS has changed the meaning of the <hr> tag. It no longer means what it used to mean!
Instead of being a black horizontal line, an <hr> tag now has a more semantic meaning. It means a major break in the flow of your paragraphs, something like that. Back in the days when <hr> defaulted to being a single black line, the meaning was more visual than semantic.
I want my black line back! Here's how to do it:
hr {
margin: 5px;
height: 1px;
border:none;
color: #000000;
background-color: #000000;
}
A few notes:
- The margin of 5px is because I was working for a client who wanted his horizontal rules to almost touch, but not quite touch, the web design to the left of the horizontal rule and to the right of the horizontal rule. The 5 pixels are to please him. I set the margin to 5 pixels with margin: 5px;
-
It's weird to me, but it's almost as if under CSS the
horizontal rule now has
content
. Therefore I set the height of this content to 1 pixel. Think of your horizontal line as content and it's easier to conceptualize everything else. At least to me it is. I set my content to 1 pixel with height: 1px; - If you think of your horizontal rule as content, it becomes easier to understand why I've set the border to border: none;
- Since a horizontal line is content, I might as well give it the default color of black. I do this with color: #000000;.
- To double up on the odds of my content being black, I've also set the background to background-color: #000000;
- All this to make a 1 pixel horizontal black line!
There are advantages to the old HTML way of creating a horizontal rule and there are advantages to the new CSS way of doing things.
CSS has the advantage of being a far more flexible model. For this I am grateful. There's nothing more frustrating than being unable to do something you need to do.
However, the old HTML way of doing things has the decided advantage of being easier to discover. I doubt horizontal rules would be as popular as they are today if it were not for the simplicity of the HTML approach. I'm grateful for the fact that I first learned about horizontal rules under HTML. Otherwise, I might never use them.
That said, the CSS approach has the advantage of being simpler once it is set up. If I place the above CSS inside a <style> tag within the <head> tag, a simple unadorned <hr> tag is all I need to implement my horizontal rule. In other words, I can dispense with all the usual <hr> tag attributes.
Each has its advantages!
Here's an example of how you might have coded an <hr> tag prior to HTML being superseded by CSS as the right way to make your web pages pretty:
<hr width="95%" size="1" noshade color="#000000">
It's best not to do things that old way as the old way is far from future-proof. Currently, HTML5 does not support the old way of doing things.
However, if you to research the old way, this page is a good start:
Horizontal Rules With HTML 4.01
Ed Abbott
No comments:
Post a Comment