Templates with Style

By now, you've probably gathered that by themselves, the various FORM elements aren't going to make a nice looking template. Not only are they ugly, but different browser versions can implement the same element differently (something to consider, since PCProfiler depends on Explorer).

If you haven't heard of it, CSS stands for Cascading Style Sheets. CSS allows precise control over the apperance, positioning, and properties of virtually every HTML element. CSS is a powerful tool that is pretty much required for designing asthetically appealing PCProfiler templates, or any HTML document for that matter. If you're unfamiliar with CSS, I strongly recommend you find a good tutorial and learn the ins and outs. A good starting point is at www.w3schools.com/default.asp.

This part of the tutorial isn't going to teach you how to make sytles. There exist lots of resources that already do that. But here are some things to consider:

Templates can easily use hundreds of INPUT, or other elements. Defining each element by hand is very cumbersome, and creates bloated code that is hard to modify and maintain. Define the base styles for a given element, and use class definitions for elements that are used repeatedly. For example:

INPUT
{
    /* Default INPUT element. Do not want a border, and
     * want default font to be a sans-serif face. */
    border-style: none;
    font-face: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
INPUT.blackBorder
{
    /* Inherits from base INPUT definition, but ensures
     * a solid black border. /*
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
}
Now, each INPUT element will automatically have no border, and display in a sans-serif font. Declaring an INPUT element to be of class=blackBorder will add a black border to the element.

Use caution with inline style definitions. These are the definitions that appear in the actual HTML tag, such as:

<INPUT type=text
    name=CharacterName
    style="color: #0000ff; font-size: 9px;">
Style definitions like the above are great to override specific attributes of an already defined class. But if you have 40 elements with the same inline style deifinition, what if you need to change them? That means you need to change each of the 40 elements in the document. Had you just defined a class, all you would need to do is change the class definition. So, if you find yourself reusing the same inline style definition over and over in your sheet, you best stop, define a class, and change the affected elements to call that class. It will save you alot of work in the long run, because making a well laid out template takes alot of tweaking.