Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Horizontal Lines
Your Ad Here

Horizontal Lines


Horizontal lines are very useful separating your page to different sections, to add a simple horizontal line just type <hr>, and you will get this:


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.

Examples:

This:

 <hr color="#c7c34c" size="2" width="50%">

gives this :


  • Color: color of the line : <hr color="#xxxxxx">
  • Size: Height of Line expressed in pixels : <hr size="x">
  • Width: Width of the line expresed either in percentage (%) or in pixels (in my example it is 50% of the original size) : <hr width="x%"> or <hr width="x">

More Advanced:

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 !!



Author's URL: Kyscorp.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Add comments to "Horizontal Lines"

Only registered users can write comment

Reader's comments