During designing a webpage sometimes we use the <hr/> tag to get a horizontal line/row as shown below. It may be used as a separator or to have a different look. You have already noticed that I have used two horizontal row above to beautify my post. Lets see how to style or format a <hr/> tag.
Two examples are given below with the codes I have used to create them. The first one is a simple horizontal row and I have created that by using the simple <hr/> tag.
But the second on is a beautiful colored horizontal row I have customized. To beautify a horizontal row I have used the codes style="background-color: green; border: 0; height: 1px;" into the <hr /> tag. It's nothing so difficult, i have just used some attributes and values here.
1. style itself is an attribute and I have used some more attributes as the values of this attribute.
2. The codes background-color: green; I have used to define a color for the horizontal row.
3. The codes border: 0; you have to use to make the horizontal row border less. Otherwise it won't look fresh.
4. Finally, the codes height: 1px; I have used to set the thickness of the line. I have used 1px for the last one, but I have used 5px for the first one.
Example of a Normal Horizontal Row, created used <hr/> tag
Example of a Formatted Horizontal Row, created used the codes <hr style="background-color: green; border: 0; height: 1px;" />
Two examples are given below with the codes I have used to create them. The first one is a simple horizontal row and I have created that by using the simple <hr/> tag.
But the second on is a beautiful colored horizontal row I have customized. To beautify a horizontal row I have used the codes style="background-color: green; border: 0; height: 1px;" into the <hr /> tag. It's nothing so difficult, i have just used some attributes and values here.
2. The codes background-color: green; I have used to define a color for the horizontal row.
3. The codes border: 0; you have to use to make the horizontal row border less. Otherwise it won't look fresh.
4. Finally, the codes height: 1px; I have used to set the thickness of the line. I have used 1px for the last one, but I have used 5px for the first one.
Example of a Normal Horizontal Row, created used <hr/> tag
Example of a Formatted Horizontal Row, created used the codes <hr style="background-color: green; border: 0; height: 1px;" />
No comments:
Post a Comment