The dotted purple outline above around boxed outlines is a border styles
of the element H3 on this page. It is written in the following way:
h3 {
border: thin dotted #800080;
}
The dashed line under the page title is a styles of the horizontal rule
<hr> tag.
hr{
border: thick dashed navy;
}
These dotted and dashed lines are simple styles of page elements.
Nearly anything can be bordered in this way such as paragraphs, headers,
iframes, tables, cells, textareas and so forth. In this section of our
external style sheets you will create a clip and save like coupon on a page
for a piece of code you want others to embed on your page. Preparing
your HTML 1. Open an html
document in your html editor of choice. 2. On your HTML page insert a text
area box where the code will look like this:
The code for a text area box like above is this:
<textarea rows="4" name="S1" cols="41">Your clip and save coupon message
here</textarea>
3. On your HTML document, insert in the head of your document the
link tag to call your fancyborders.css style sheet you will be creating..
<link rel="stylesheet" type="text/css" href="fancyborders.css">
4. Open a new CSS file in your CSS editor and save it as fancyborder.css
5. On your CSS file insert the code for the textarea element, follow it with
an open bracket and then a close bracket. We can now play with the code!
textarea {
}
 6.
First lets try a thin border that is dotted purple as above. type in the
following for your text area:
 7.
Border width: The width of the border can be either thin, medium,
thick or none. It can also be sized in pixels or points as well. Change the
border to thick.
 8.
Border style: While the thicker dotted line is more like a coupon
then the thin dotted line, it still is not what we want. Borders styles are
shown below, except for none. For our coupon, after you experiment with the
styles, leave it set to dashed.
 solid
 double
 inset
 outset
 ridge
 groove
 dotted
 dashed
 9.
Our coupon should stand out. we can change the color to blend in or styand
out. Colors are by standard name or Hex code. Set the coupon color for red
or #FF0000. Whala!@ we have our clip and post coupon.
Once your done with this, Try using other tags to achieve different
results.
Every wonder how I can have two textarea boxes on the page and only have
them each display different styles like above? Next lesson... style
class |
