NSC - Web Style Primer

To provide NSC Web page authors with a quick reference to the NSC Web Standard (HTLM) and Style.

For legacy reasons, This NSC Web site standard is HTML 4.01 Transitional, a relaxed implementation of the 4.01 Strict standard.

To prepare for the future implementation of "X" standards, new pages should be written in XHTML 1.0 Standard.

XHTML is HTML 4.0 redefined to meet the XML standard. There aren't a lot of major differences between HTML and XHTML:

• XHTML is written in lower case. While HTML tags can be written in UPPER case, MiXeD case, or lower case, to be correct, XHTML tags must be all lower case.
• All XHTML tags must have an end tag. Tags with only one tag, such as <hr> and <img> need a closing slash (/) at the end of the tag: <hr />
• All attributes must be quoted in XHTML. Many editors remove the quotes around attributes, but they are required for correct XHTML.
• XHTML requires that tags are nested correctly. If you open a bold (<b>) tag and then an italics (<i>) tag, you must close the italics tag (</i>) before you close the bold (</b>).
• XHTML attributes must have a name and a value. Attributes that are stand-alone in HTML must be declared with values as well, for example, the <hr> attribute noshade would be written noshade="noshade".

The NSC web site uses Cascading Style Sheets to define all the visual element of a web page presenttion.

A CSS, either a linked document or a series of style definitions in a page header, or both, defines one or more element of style.

The NSC Web uses a simple form of external CSS that is linked to in every web page header via a JavaScript that decides which CSS to load depending on the browser in use.

This CSS defines the base font, sizes and color for the major HTML tags such as H (headers), P (paragraphs) TD (Table Data elements), A (anchor), etc., and also allows the user to use "modifiers" (called selectors) that can be used to modify existing tags.

The major implication of using a CSS is that the style is now controlled by an "outside force" which imposes some constrains on what the user can and can not do style wise.
Because the NSC CSS defines font sizes and font faces for all of the most common tags, you no longer have the option to modify font faces and sizes with the <FONT> tag, although you are free to use tags like <span style="color: #336699"> to set font colors as you see fit. To set font sizes, use the CSS elements presented in the style sheets below.

But enough theory already! Here are the style sheets in use:

• NSC LAYERS (pages common look and feel) is always loaded on browser
• One of:
  • INDEX LAYERS for index/ home page,
  • CAT LAYERS for category pages like Racing, Boating, etc., OR,
  • FILE LAYERS for regular pages.
• DEFAULT COMMON CSS (all special fonts, tags etc) always loaded on browser
• COMMON CSS used for printing (non printable text is suppressed)

Can I override the darn thing?

Sure you can! let's explore this with an example.

Suppose you have a huge table with tons of hyperlinks that should be all in small font (say you used <font size="1">) everywhere (and nothing else). You could replace all font tags with <small> </small> tag around every link text, but there is a far better way:
First delete all the <font size="1"> and </font> throught the page, then set the TD font size for the entire page using a STYLE definition in the header of the page to override the CSS TD definition. Here is how:

<STYLE TYPE="text/css">
  <!--
  TD { font-size:80% }
  //-->
  </STYLE>

Similarilly, you can replace or override any tags and selectors with your own definition (which should only be needed in very rare occasions), but make sure you know what you are doing.