No replies to this topic

[Joe]

Now we're into the wonderful world of creating borders and border colors and border properties... Anyway, borders are often used in tables so that's what I'm going to be using reference too throughout the tutorial instead of our normal paragraph tag.

There are four main sides to every table: top, bottom, left, and right. And not coincidentally there are 4 sides to borders as well. you can generalize the border so it applies to all sides by just using:

table {border: value(s);}

If you did want to specify a side it would end up being:

 table {border-top: value(s)}

There are 3 properties to apply value's to when adding a border to your CSS: Width, Style, and Color. So if you want to save yourself some typing you can use the "border" shorthand and do all three value's for all sides like this:

table {border: #00ff00 dashed thin}

If you don't think that's quite what you want let's say you want a different colored top border then you have to do everything semi-individually:

table {border-top: #0000ff dashed thin; 

border-left: #00ff00 dashed thin;

border-right: #00ff00 dashed thin;

border-bottom: #00ff00 dashed thin;}

So lets say we want to waste our time (just because we have it to waste) and specify everything so that these amature coders that are helping you out can know exactally where to put things well that's in our capability as well. If we want to define it for the entire border we do this:

table {border-width: thin; border-color: #000000; border-style: dotted;}

If we want to individualize it then we have to put the property in this order:

table {

border-top-width: thin;

border-top-color: #000000;

border-top-style: dotted;

(and so on)

Now for the values...

Value's for "width"

Quote

thin
medium
thick
px (meaning you can define how thick you want it exactally using a number of pixels)

Values for "style"

Quote

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

value's for "color"

Quote

You can specify the color name.
You can specify the hex code.
You can specify the RGB value.