CreateaFreeWebsite  with Responsive Web Design

General

 

9 Step Tutor

Horizontal Rule Tag

The horizontal rule or <hr> tag is used to draw a horizontal line on a page.

In HTML5 it represents a themeatic break or change in topic.

It no longer has any attributes and its appearance is controlled using your style sheet.

Used here in its default form.

Note: It displays differently from browser to browser in default.


4 More Years

The president will most likely remain in office 4 more years simply because of the the Republican competition. Not that it really matters to us. Our system is broken.


Styling the HR

This code is for the hr trimmed in red:
<hr style="border:solid #ff0000 1px; width: 50%; height: 8px; display: block; margin: 0 auto"/>


Here we remove the default blue border and add background color and box shadow:
<hr style="width: 50%; height: 8px; display: block; margin: 0 auto; border: none; box-shadow: 3px 3px 6px #0e0e0e; background-color: #898989"/>


Now some rounded bottoms and maybe a little glitch in the Safari browser:
<hr style="width: 70%; height: 16px; display: block; margin: 0 auto; border: none; border-radius: 0 0 20px 20px;box-shadow: 3px 3px 6px #0e0e0e; background-color: #fefefe"/>

Experiment!!

 

Free Tools We Recommend

FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
For image resizing we've found the easiest Linux tool to be Krita.