. Advertisement .
..3..
. Advertisement .
..4..
Are you having problems creating a HTML line divider? If so, you’ve come to the right location.
The following is an in-depth instruction that will walk you through the process of resolving such a nuisance. Wait no longer but scroll down to the bottom and rack up all of the insights!
What Is A Html Line Divider?
A line divider, commonly known as the HTML web page horizontal rule, is used to split content regions inside a web page.
You may use these HTML horizontal rules to split your web page content into subjects, navigational menus, goods, or whatever you want.
They’re a terrific way to add color to your pages without having to use photos and also a chance to lift up the look of your website to a whole new level!
That way, you may modify the width, color, and height of line dividers, so-called horizontal rules, on your web page by adding attributes to your HTML code.
Check out the following examples to see how you could employ such an intriguing tool. As such, they will display under various forms, which are in a table that includes the width characteristics spanning a certain percentage of that table.
You may opt for not having a table. Then the width will get its mission done by covering the full web page’s set percentage.
Example:
<HR>Source: Web source net
<!DOCTYPE html>
<HR WIDTH="75%" SIZE="20">
<HR WIDTH="65%" SIZE="20" NOSHADE>
<HR WIDTH="55%" COLOR="#00FFFF " SIZE="20">
<HR WIDTH="35%" COLOR="#008B8B " SIZE="20">Output:
......... ADVERTISEMENT .........
..8..
How To Create A HTML Line Divider
Step 1: Add HTML
Example:
<!DOCTYPE html>
<hr class="dashed">
<hr class="thinStrokes">
<hr class="boldStrokes">
<hr class="solid">Step 2: Add CCS
Example:
/* The Dashed border */
hr.dashed {
border-top: 10px dashed rgb(206, 111, 111);
}
/* The thinStrokes border */
hr.thinStrokes {
border-top: 5px solid rgb(37, 30, 30);
}
/* The boldStrokes border */
hr.boldStrokes {
border-top: 10px solid rgb(187, 187, 187);
}
/* The solid border */
hr.solid {
border-top: 10px solid rgb(204, 24, 24);
}Conclusion
The steps for building a HTML line divider are outlined above. Hopefully, you’ve winded up some useful information. If you have any unresolved questions, please don’t hesitate to leave a comment!
Leave a comment