To print a page, simply click the print button above. To ensure accuracy, it is highly recommended that you use Microsoft Internet Explorer 5 (or higher) or Netscape Navigator 6 (or higher) to view and print this User Guide.

cascading style sheets

Jazz uses Cascading Style Sheets to drive its presentational design. This section will serve to explain how the Jazz-specific styles work. We will also discuss how to edit existing styles and how to create new ones.

The Main Style Sheet [dp12orange.css]

The main style sheet is linked to our Template page and therefore to each page that is based upon the Template.

The Headings

h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; margin-right: 0px; margin-left: 12px; color: #666666; font-weight: bold; letter-spacing: 6px; margin-top: 12px; margin-bottom: 12px}

h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; margin-right: 0px; margin-bottom: 0px; margin-left: 12px; font-weight: bold; color: #999999; letter-spacing: 3px ; margin-top: 12px}

h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #333333 ; margin-right: 6px; margin-left: 12px

These 3 style redefinitions 1 drive the headings used throughout the site. H1 is used for headings in the main content cell, H2 is used for headings in the sidebar cell, H3 is used for headings in the middle cell (below the main menu buttons) and also for the headings in both the flyout menus and the rolldown menus. H tags are applied using the property inspector's format dropdown. We've set the margins to provide a pleasing design with respect to the other styles on the page

Cursor Style

.pointer { cursor: default }

This simple custom style 2 sets the cursor to a default pointer. It is applied to images on the page that hold javascript events that we wish to be fired without the user knowing it. For instance, the transparent gif in the narrow table column between the main menu buttons and the sidebar hold events to hide the menu layers and reset the mouseover table cell backgrounds when a user moves his mouse off a button to the right. This little rule applied to the <img> tag of the gif serves to eliminate the hand cursor and show the default pointer. It is supported by MSIE and NN6 only. It's purpose is purely cosmetic.

The Menu Button Table Cells

.menucelloff { background-color: #999999; border-style: none }

.menucellover { background-color: #666666; border-style: none }

These custom styles 2 control the background colors of the table cells that contain the main menu buttons, as well as the background colors of the top cells in the flyout layer tables, and the bottom cells in the rolldown layer tables. With respect to the main menu button table cells, these are the styles that are manipulated by PVII MultiClass to execute the rollover effects as you mouse over the buttons. Menucellover is also used by PVII DownClass to set the down state of the button cell that relates to the current page. Border-style: none is used to work around a CSS bug in Opera 5 that sometimes causes borders to be cascaded unexpectedly from unrelated elements.

Ordered and Unordered Lists

ul { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #637173 }

ol { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #637173 }

These 2 styles redefine 1 the <ul> (bulleted list) and <ol> (numbered list) tags. Lists are deployed by clicking the 2 list buttons on your property inspector that are located directly below the bold (B) and Italics (I) buttons. You do not have to apply these styles manually.

The Main Content Table Cell

.maintable { background-color: #FFFFFF}

.maintable p { margin-top: 0px; margin-right: 36px; margin-bottom: 12px; margin-left: 36px ; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #999999}

.maintable b { color: #FF9900; font-weight: normal }

These 3 custom styles 2 are used in the main content table cell. Maintable is applied to the <td> tag of the main content table cell and determines its background color. Maintable p is a contextual selector 3 that serves to automatically style all paragraph text contained in a table cell to which maintable is applied. Maintable b is a contextual selector that automatically styles <b> bold text that is in a paragraph that is in a table to which maintable is applied. Margins are applied to create nice "white space" on our pages and eliminates the need to set table padding or spacing. Line-height is used to make our text easier to read and, applied via the <p> tag, is perfectly compatible with Netscape 4.

The Main Content Table Cell Hyperlinks

.maintable a:link { color: #669999; text-decoration: underline }

.maintable a:visited { color: #666666; text-decoration: underline }

.maintable a:hover { color: #333333; text-decoration: underline }

.maintable a:active { color: #669999; text-decoration: underline }

These powerful contextual selectors 3 permit us to have special link styles for all hyperlinks that are inside elements to which .maintable is applied (our main content table cell). These styles are automatically applied to .maintable elements. Hover is supported in all v4 and higher browsers except Netscape 4.

The Rolldown / Rollup Menu Layers

.rolltd { font-family: "Comic Sans MS", Arial, sans-serif; font-size: 12px; color: #333333; background-color: #FFCC00}

.rolltdheaderow { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; background-color: #CCCCCC}

These custom styles 2 are manually applied to the tables inside the second rolldown layer (choose artist) in the main table cell. Rolltd is applied to each cell in the content table. Rolltdheaderow is applied to the <tr> tag of the top row only.

The Rolldown / Rollup Menu Hyperlinks

.rolltd a:link { color: #333333; text-decoration: underline }

.rolltd a:visited { color: #333333; text-decoration: underline }

.rolltd a:hover { color: #FFFFFF; text-decoration: underline }

.rolltd a:active { color: #333333; text-decoration: underline }

These contextual selectors 3 power the hyperlinks in the tables inside the second rolldown layer (choose artist) in the main table cell.

The Middle Content Table Cell

.sidebarmid { color: #CCCCCC}

.sidebarmid p { margin-right: 12px; margin-left: 12px; border-style: none ; font-family: "Trebuchet MS", sans-serif; font-size: 12px; color: #CCCCCC}

These 2 custom styles 2 are used in the middle table cell (below the main menu buttons). They work just like .maintable and .maintable p described above.

The Middle Content Table Cell Hyperlinks

.sidebarmid a:link { color: #CCCCCC; text-decoration: underline }

.sidebarmid a:visited { color: #CCCCCC; text-decoration: underline }

.sidebarmid a:hover { color: #333333; text-decoration: underline}

.sidebarmid a:active { color: #CCCCCC; text-decoration: underline }

These contextual selectors 3 drive the hyperlinks in the middle table cell (below the main menu buttons).

The Flyout Menu Table Styles

.flyoutable { background-color: #CCCCCC; border-style: none }

.flyoutable p { font-family: "Comic Sans MS", Arial, sans-serif; font-size: 12px; color: #FFFFFF; margin-top: 12px; margin-right: 6px; margin-bottom: 0px; margin-left: 12px; border-style: none }

These 2 custom styles 2 are used in the table cells inside the flyout menu layers. They work just like .maintable and .maintable p described above.

The Flyout Menu Hyperlinks

.flyoutable a:link { color: #666666}

.flyoutable a:visited { color: #666666}

.flyoutable a:hover { color: #333333; text-decoration: underline}

.flyoutable a:active { color: #666666}

These contextual selectors 3 power the hyperlinks inside the flyout menu layers.

The Sidebar Content Table Cell

.sidebar { background-color: #FFFFFF}

.sidebar p { margin-top: 12px; margin-right: 16px; margin-bottom: 0px; margin-left: 24px ; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; color: #999999}

These 2 custom styles 2 are used in the right sidebar table cell. They work just like .maintable and .maintable p described above.

The Sidebar Content Table Hyperlinks

.sidebar a:link { color: #FF9900; text-decoration: underline }

.sidebar a:visited { color: #FF9900; text-decoration: underline }

.sidebar a:hover { color: #FFFFFF; text-decoration: none; background-color: #FF9900 }

.sidebar a:active { color: #FF9900; text-decoration: underline }

These contextual selectors 3 drive the hyperlinks in the right sidebar table cell.

The Copyright Notice Style

.copyright { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #999999}

This custom style 2 is applied to the copyright notice at the bottom of each page.

The W3C Style Sheet [dp12orangew3c.css]

This style sheet is attached to the Template via the @import method. This technique allows us to use styles supported by modern browsers (MSIE5+, NN6, and Opera5), while shielding Netscape 4 from styles that would cause problems or crashes. Netscape 4 does not support the @import method and this style sheet is totally invisible to it. The linking and importing of our 2 style sheets will be covered in the next sections.

The Special Bordered Paragraph Style

.sidebarpq { color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding-top: 6px; padding-right: 0px; padding-bottom: 6px; padding-left: 0px; border: #999999 solid; border-width: 2px 0px 1px}

This special custom style 2 is applied to certain paragraphs throughout our pages to create a nice highlighted section with thick and thin borders above and below it.

The Special Rolldown / Rollup Layer Style

.rollupdivs { border: 1px #999999 solid}

This special custom style 2 is applied to each of the rolldown layers to give them a nice pencil-thin border all around. We need to shield Netscape 4 from this style because that browser's support for CSS borders is very problematic.

The Special Flyout Menu Layer Style

.flyoutdivs { border: #999999 solid; border-width: 0px 0px 0px 1px }

This special custom style 2 is applied to the flyout menu layers and serves to render a single border on the left.

The Special "Choose Artists" Rolldown Table Style

.rolltd { padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px }

This special custom style 2 is a duplicate of a style contained in the main style sheet. It is applied to the <td> tags in the choose artist rolldown layer on Page 1. The style adds a rule that we do not want Netscape 4 to attempt to render! Actually, this rule is to work around a poor W3C CSS specification that serves to break down the padding in table cells when the table contains multiple rows and columns. This problem only seems to occur in Netscape 6. MSIE engineers seem to ignore or "adjust" CSS specs it deems illogical, while Netscape 6 tends to take everything very literally :-)

Footnotes

Redefining a tag with a style means that all instances of that tag on your page will use the style. It does not have to be explicitly applied. This will be discussed in detail in the Creating or Adding Styles section.
A custom style is more or less portable. That is, you can manually apply it to different elements on your page and it will override the default or any redefined style associated with that element. Custom styles are always preceded with a dot.
Contextual Selectors are very powerful tools that make your CSS implementation super efficient. Essentially, a contextual selector tells the browser to apply a style contingent upon another. In the selector .maintable b {color: red} it tells the browser to make all bold text that is inside an element that has the .maintable class applied red. This can be further expanded to include only paragraph text by changing the selector to: .maintable p b {color:red}.