In this tutorial we will show you the solution of HTML hr thickness and color and we are going to show you how you are able to customize the hr i.e. horizontal line.
In this article, we’re going to talk about thickness and color. In our previous session, we discuss about them separately. But in this article we are going to combine both concepts in one. Let’s understand.
Step By Step Guide On HTML hr Thickness And Color :-
As we know, HTML horizontal line tag is used to insert a horizontal line within a webpage.
It is a singular tag and have no closing tag. All the customization and done in this tag.
In this article, we are going to make changes of color and height. Here, below we show you an example. Let us come in touch with this step by step.
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body> <p>A normal horizontal line is given below:</p> <hr> <p>With help of CSS in which we use different colors:</p> <hr style="height:2px;border-width:0;background-color:red"> <!--hr with red color and 2px height--> <hr style="height:8px;border-width:0;background-color:green"> <!--hr with green color and 8px height--> <hr style="height:15px;border-width:0;background-color:tan"> <!--hr with tan color and 15px height--> <hr style="height:23px;border-width:0;background-color:yellow"> <!--hr with yellow color and 23 px height--> <hr style="height:30px;border-width:0;background-color:blue"> <!--hr with blue color and 30 px height--> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, in body we create different hr tags for horizontal lines. In first one, that is a simple hr tag no any additional attribute and css used here.
- So, it is default view of horizontal line.
- After this hr we create some more horizontal lines. But in all of them the background color and height is changed. You can see the result when you open this code in browser.
- And observes the thickness goes increasing with increase in height whereas the color of horizontal row is according to background color given in codes.
- The border width is used to reduce the extra border around the horizontal lines. We hope that you understand codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to understand about both thickness and color. I hope this tutorial on HTML hr thickness and color helps you.
About Amruta
