More CSS Styling

the format for styling elements is

element.class { property: value; property: value /* comment */ }

either element or class can be blank, but one of them has to be present, and if class is missing omit the period. this applies the properties and values you list inside the curly braces to all HTML elements which have class attribute set equal to the class you put after the period (if class is omitted, then it applies to all elements of that type).

For example

tr.poo { ... }

applies to all table rows which have class="poo" attribute on them.

tr { ... }

applies to all table rows, regardless of the class you set. Many CSS stylesheets you inherit style all elements of a certain type. You should be able to override the default (you probably don't want to screw with the default because it will screw up the rest of the stylesheet) by creating your own classes of elements.

There's one other variation on the element.class { .. } which is you can use a pound sign (#)

element.class#id { .. }

(you can even omit element.class and just have #id)

This applies the style to just elements with an attribute id equal to the name you put after the # sign

so tr id="fun" ... /tr (sorry I can't put the greater than or less than since it will be interpreted as html) could be styled with #fun { color: #775544 }

Look up w3schools on google to get a list of all the css properties. Common ones I use are:
font-size, font-face, font (this one combines all the font-... properties into one, the syntax is hard to remember though), padding (sets padding around a whole box), padding-left, padding-right..., margin, border (border: Xpx linestyle color), color (sets foreground text color format is hexadecimal #rrggbb), background-color and background (the one gotcha with background is if you want a background image, use the function url(...) but don't enclose the argument to url in quotes), width, height

if you want to understand padding, margin and border look up css box model. I believe padding is the space between the border and content inside a box; margin the area between the border and any neighboring content; border is just like word, you can set the thickness and dashed, solid, etc.

One other thing different from old school html is DIV and SPAN elements; a DIV is a box that can contain anything, a SPAN is an inline element, meaning its primarily intended for styling sections of text (like if you wanted to make the first few words of a paragraph bigger span style="font-size:20pt; color:grey" In the beginning /span there was nothing, OR, another handy one is to put an indent in a paragraph, use a span with a padding-left of like 15px that contains just some whitespace); a lot of the properties don't apply to SPAN. My products template mostly uses tables though because they are a lot easier to work with but I think the spans are really handy.

That's pretty much all I know. you can access the CSS properties using JavaScript via document.getElementById('

idofyourelement').style.propertyname