Foreground Color:
To add color to an HTML element, you use style="color:{color}", where {color} is the color value. For example:
<h3 style="color:blue">HTML Colors</h3>
Background Color:
To add a background color to an HTML element, you use style="background-color:{color}", where {color} is the color value. For example:
<h3 style="background-color:green">HTML Colors</h3>
Border Color:
To add a colored border to an HTML element, you use style="border:{width} {color} {style}",
where {width} is the width of the border, {color} is the color of the
border, and {style} is the style of the border. For example:
<h3 style="border:1px red solid;">HTML Colors</h3>
Horizontal Rule:
Typing this code:
Here's a horizontal rule...
<hr />
...that was a horizontal rule ;-)
Results in this:
Width:
<hr width="60%" />
Results in this:
Slide-in text:This text slides in from the left, then stays where it is. You will need to
refresh this page to see the effect again. Note that if you can't view the examples, it's likely that your browser doesn't support the marquee tag.
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>Results in this:
Continuous scrolling text:
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>
Results in this:
Text bouncing back and forth:
<marquee behavior="alternate">Your bouncing text goes here</marquee>
Results in this:
Clicking the Marquee:
This example allows the user to stop the marquee when they click on the mouse (i.e. onmousedown). The marquee then continues when the user releases the mouse (i.e. onmouseup).
<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">Go on... click me (and hold the mouse down)!</marquee>
Results in this:
Hovering over the Marquee:
This example allows the user to stop the marquee when they hover over the marquee with their cursor (i.e. onmouseover). The marquee then continues when the user hovers away from the marquee (i.e. onmouseout).
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Go on... hover over me!</marquee>
Results in this:
