Loading...
There are many ways to make your HTML pages look more stunning and well-structured. More specifically, a horizontal line can play a special role in making your site’s content well-balanced, clearer, and easier to browse. Whenever we decide to make some big changes on our websites, such tiny things as lines can make the difference. Such little things make the message of your site more comprehensive. Besides, they can change the visual appeal of your web resource and the way your audience perceives your data.
But you can also create customized lines to fit with your webpage and to give you better mastery of the space you are manipulating on your page.With that said, let’s take a closer look at how to customize horizontal lines within your HTML pages.
A horizontal line is an HTML element that is used as a decoration of your web page. However, it can also come in handy for a bunch of other purposes, like:
- A separator that visually divides different pieces of your content and puts an emphasis where one idea ends and another begins.
- A highlighter that brings emphasis to some meaningful sections of a web page.
- A horizontal line is considered to be one of the most popular and easiest ways to achieve a wide range of purposes on a website. Though it may look simple at the first sight, it is a multi-functional element that you can adjust based on your specific requirements. Using simple modifications of the HTML code of your web page, you can adjust the following specifications of the horizontal line:
Length;
Width;
Color;
Alignment.
It’s also worth pointing out that the horizontal line refers to block elements. It means that it’s placed on a separate line on a web page, and the text that you add next to the line will be put below it.
Horizontal lines are very useful in separating your page into different sections, to add a simple horizontal line just type < hr >, and you will get this:
You can set a line using a simple < hr > tag. It is short for "Horizontal Rule" and sets the classic external parameters. The thing that differs it from many others is that it does not need an end tag and can exist on its own. You can change the external characteristics of an element using additional values in the tag:
It looks like this. For example, if we want a length of 100 pixels, we would set a tag like this: hr width = "100.
The finished tag, in this case, will look like this: if we need to set the center alignment for a horizontal line with a length of 150 pixels, then the finished tag will look like this: hr align = "center" width = "150".
Note that "align", the measure for alignment, is put in position 1, even though the attribute is dependent on the length measure width.
Optionally, you can also specify the width, creating a bold or thin underline. This criterion does not depend on anything and can be used independently without specifying the length or alignment. For it, we use the size attribute in the tag and a numeric value equal to the desired width in pixels. The number is indicated in quotation marks after the size attribute and the "=" symbol.
Thus, if we need to create a line 15 pixels wide, we need to create the following tag: hr size = "15".
It is also set as an independent indicator. To change it, use the color attribute in combination with the color name in the form of a code or in English. The color is indicated in quotes after the "=" symbol.
Thus, the tag for a standard white line can be written in two ways: hr color = "#FFFFFF" or hr color = "white"
Black can be created using code # 000000.
Horizontal lines are good for separating one block of text from another. Small text with horizontal lines at the top and bottom draws more attention to the reader than ordinary text.
Using the < hr > tag, you can draw a horizontal line, the appearance of which depends on the attributes used, as well as the browser. The tag refers to block elements, so the line always starts on a new line, and after that, all elements are displayed on the next line. Thanks to the many attributes of the < hr > tag, the line created through this tag is easy to manipulate. Combined with the power of styles, adding a line to your document is a breeze.
By default, the line is displayed in gray and with a volume effect. This type of line does not always fit the design of the site, so the desire of developers to change the color and other parameters of the line through styles is understandable. However, browsers are ambiguous about this issue, which is why you will have to use several style properties at once. In particular, older versions of Internet Explorer use the color property for line color, while other browsers use a background color. But that's not all, in this case, be sure to specify a line thickness (height property) other than zero and remove the border around the line by setting the border property to none. Putting all the properties together for the hr selector, we get a universal solution for popular browsers.
< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> Horizontal line color < /title > < style > hr { border: none; / * Remove the border * / background-color: red; / * Line color * / color: red; / * Line color for IE6-7 * / height: 2px; / * Line width * / } < /style > < /head > < body > < hr > < p > Text string < /p > < hr > < /body > < /html >This:
< hr color="#c7c34c" size="2" width="50%" >gives this:
Color: color of the line:
< hr color="#c7c34c" size="2" width="50%" >Size: Height of Line expressed in pixels:
< hr size="x" >Width: Width of the line expressed either in percentage (%) or in pixels (in my example it is 50% of the original size):
< hr width="x%"> or < hr width="x" >This:
< hr width="400" style="border: 3px dotted #0099CC" color="#000000" size="4" >gives:
In this case we used style:
Border width is 3pixels (3 px)
It is dotted
Base color is black : #000000
Dots colored in blue: #0099CC
A last example to explain more, if still needed ;):
This
< hr width="400" style="border: 2px dashed #C0C0C0" color="#FFFFFF" size="6" >gives:
In this case just above:
Border width is 2pixels (2 px)
It is dashed
Base color is white : #FFFFFF
Dashes colored in silver: #C0C0C0
Possible styles are:
-dotted
-dashed
-solid
-double
-groove
-outset
-inset
-ridge
That's all I have to say about the horizontal lines!
Copyright © . All Rights Reserved