TCalc Applying Style With - TCalc Online Financial Calculators

TimeValue Software™ TCalc™ Online Financial Calculators
Applying Style to Your TCalc Online Financial Calculators
IMPORTANT!
TimeValue Software would like to help you apply style to your TCalc™ online financial
calculators so that they integrate well into your website. Please let us know when you
have finished installing the calculators and we will be glad to provide you with any
additional code necessary to maximize the look of the specific TCalc calculator on your
website. This document is meant only to serve as a reference for your convenience.
SUMMARY:
In most cases, your TimeValue Software™ TCalc™ online financial calculators will accept the
default style of your website. You may however optionally specify additional style characteristics
to be applied to your TCalc calculators. This article will introduce you to the fundamental concepts
of cascading style sheets (CSS) and how this fits into your calculator web application. CSS
provides the language allowing you to apply enhanced style characteristics such as text colors
and size, font family, spacing, and positioning to your TCalc calculators.
CONTENTS:
INTRODUCTION .............................................................................................................................3
ABOUT CSS ...................................................................................................................................3
PURPOSE OF CSS.........................................................................................................................3
“CASCADING” ...............................................................................................................................3
BINDING STYLE TO HTML ELEMENTS........................................................................................4
SEPARATION OF STYLE FROM CONTENT.................................................................................4
CONCLUSION ................................................................................................................................4
EXAMPLE: CSS..............................................................................................................................5
EXAMPLE: CSS EXPLAINED ........................................................................................................6
MAIN CALCULATOR STYLES .............................................................................................................6
AMORTIZATION STYLES ...................................................................................................................6
EXAMPLE: IMPLEMENTING THIS CSS ........................................................................................7
TimeValue.com
TimeValue Software™ TCalc™ Online Financial Calculators
Introduction
This article explores the use of Cascading Style Sheets (CSS), offering a brief discussion of the
design goals and assumptions of CSS. Specific attention is devoted to the practical use of CSS in
your calculators, illustrating how CSS works and how it fits into the overall web application
structure. Finally, we will conclude with a number of guidelines for good CSS coding style and an
example to get you started.
About CSS
CSS is a technology that provides document authors with a language for applying style
characteristics, such as text colors and size, font family, spacing, and positioning, to the elements
of a Web document. Using CSS, style properties and property values are associated with HTML
elements to instruct the browser how to display them.
Purpose of CSS
The purpose of CSS is to provide Web developers with a standard way to define, apply, and
manage sets of style characteristics. CSS provides these capabilities through a technical model
based on a hierarchical scope of effect, the separation of style from content, and a well-defined
set of published standards.
“Cascading”
The “cascading" in Cascading Style Sheets refers to how property values are applied in the
context of the parent/child hierarchy of the Web document. Child elements either inherit or
override property values bound to their parent elements.
A style sheet is the encapsulation of style rules in a centralized location, either in the head section
of the HTML document or in a separate linked file. The Web browser reads these styles and
applies the specified formatting rules before displaying the content.
For most styles, if a value for a style property has not been specified for a child element but has
been specified for its parent element, then the parent's value is used to display the element. On
the other hand, if the child element does specify a new value for a style property also specified by
the parent, the browser uses the child's value to display the element.
In general, styles that binds properties to elements that are more specific override those bound to
elements that are more general. Properties that are bound to classes—otherwise arbitrary
elements that share a common value for their class attribute—override those bound to element
types, and style properties linked to IDs override both. If the developer defines different values for
the same property at the same level in the scope hierarchy, the last style specified applies.
TimeValue.com
TimeValue Software™ TCalc™ Online Financial Calculators
Binding Style to HTML Elements
Binding means that the Web browser associates a CSS style with one or more HTML elements in
the document. Whenever the browser displays the element, it applies the formatting specified in
the bound style.
Binding a style to all HTML elements of a given type provides a way to specify the broadest, most
general styles. For example, you can bind a style to the <P> tag so that all paragraphs have that
style as their default.
TimeValue Software also assigns class attributes to some HTML elements. This allows the
automatic binding of style to any elements within that class.
Separation of Style from Content
While CSS does add some enhanced formatting and positioning features, the primary benefit is
the separation of style and content. TimeValue Software provides you with ready-to-use financial
calculators while still giving you full control over the look and feel. We enable you to apply
professional style characteristics such as text colors and size, font family, spacing, and positioning
to all your calculators quickly and easily.
Maintaining CSS style sheets separately from your TCalc calculators reduces the download time
of content to your end user. We encourage you to separate your styles from your
“calculators.htm” file. The external style sheet is applied to your calculators when you add a
<LINK> element to your “calculators.htm” file.
Conclusion
This article introduced you to the fundamental concepts of CSS and how it fits into your calculator
web application. You've seen how CSS provides a language to allow you to specify enhanced
style characteristics for the elements of your calculators in a standardized fashion.
TimeValue.com
TimeValue Software™ TCalc™ Online Financial Calculators
Example: CSS
/*Main content area*/
.cTimeValue, .cTimeValue INPUT, .cTimeValue P, .cTimeValue UL, .cTimeValue FIELDSET
{
font-family: 'verdana' , 'arial' , 'helvetica';
font-size: 10pt;
}
.cTimeValue H2, .cTimeValue H3
{
font-family: 'verdana' , 'arial' , 'helvetica';
font-size: 12pt;
}
.cTimeValue #COMPUTE, .cTimeValue #tvcCOMPUTE
{
color: #444444;
font-family: 'verdana' , 'arial' , 'helvetica';
font-size: 10pt;
font-weight: bold;
}
/*Amortization Table*/
.cTimeValue .cAmortTitleFont
{
font-weight: bold;
}
.cTimeValue .cAmortTable TD
{
padding: 5px;
font-size: 9pt;
font-family: Arial;
text-align: right;
}
.cTimeValue .cAmortHeader TD
{
border-top: #dedfef 1px solid;
border-bottom: #dedfef 2px solid;
font-weight: bold;
background-color: #eeeeee;
text-align: center;
}
.cTimeValue .cAmortLineE TD
{
background-color: #F7F7F8;
}
.cTimeValue .cAmortLineTotals TD
{
font-weight: bold;
color: black;
border-top: double 3px black;
}
TimeValue.com
TimeValue Software™ TCalc™ Online Financial Calculators
Example: CSS Explained
If you already use CSS in your website, chances are that your calculators already look close to
what you want. You can further style them using the “.cTimeValue” class prefix. The
“.cTimeValue” prefix provides a method for separating calculator content from the rest of your
page. When you place the “.cTimeValue” prefix before an element name, the calculators
exclusively apply this style.
Main Calculator Styles
Most text formatting is controlled in the first two style definitions (for INPUT, P, UL, .Radio,
H2, and LEGEND). Font style, color, and size are represented above. Advanced CSS
programmers can optionally apply additional styles as seen fit.
Amortization Styles
A box surrounds the amortization schedules that your calculators generate. The style
characteristics of that box are controlled by the “.cAmortTable” class style definition. The
header section of the amortization schedules are controlled by the “.cAmortTitleFont” and
“.cAmortHeader” class style definitions.
Even and odd lines within the amortization schedule can be styled using the
“.cAmortLineO” and “.cAmortLineE” class definitions. This provides for a line item look at
the amortization information.
TimeValue.com
TimeValue Software™ TCalc™ Online Financial Calculators
Example: Implementing this CSS
First save the CSS text above in a text file named “calculatorstyle.css”. Then generate your
HTML document complete with a <LINK> element as follows. Be sure to paste your calculators
script inside the <BODY> element.
<HTML>
<HEAD>
<LINK rel=”STYLESHEET” type="text/css" href=”calculatorstyle.css">
</HEAD>
<BODY>
<!--Begin Calculators-->
Place Calculators Script Here!
<!--End Calculators-->
</BODY>
</HTML>
TimeValue.com