Using Cascading Style Sheets (CSS) with VHI

When you generate an application in Web Builder you can enhance your application by applying either a supplied theme or by creating one of your own; either way CSS is used to separate the content from the style and formatting.


How to Customize a Theme is a short tutorial that walks you through the steps necessary to customize a selected theme. To review how to choose a Host Integrator theme as well as how to create a new theme, see Web Application Customization Properties.

What is CSS?

CSS is the industry standard for applying style standards to HTML and XHTML files. HTML files reference CSS files and the browser uses those CSS files to render the HTML file as a Web page. CSS provides a separation between content and styling and, while it is not perfect, it is preferable to adding style elements directly to the HTML file.

How does it work?

A Web application (generated in Web Builder) consists primarily of JSP and ASP pages. These pages send XHTML to the browser that is marked up with IDs, classes, and Divs that are referenced in the CSS files. A theme is simply a collection of CSS and related files that tell the browser how to render the XHTML for the user. When you choose a supplied theme, you select which CSS files to apply to your Web application.

You can use CSS to control:

A Brief Introduction to CSS

CSS Syntax

In CSS you use selectors, properties, and values to communicate styles and formatting to the XHMTL file in this format:

selector {property:value;}

Typically, the selector is the HTML element or tag you want to customize, the property is the attribute you want to change, and each property can take a value. The property and value are separated by a colon (:), and surrounded by curly braces. Multiple properties are separated by a semi-colon (;).

Types of selectors

There are several types of selectors; the most common are:

CSS examples in an HTML file

In the HTML file.... In your CSS file....
<body><p class="intro">This is RED text</p></body>
All text between the <p> elements is red.
p.intro{color:red}
<body><p class="centered">This text is centered on the page</p></body>
All text between the <p> element is centered.
p.centered{text-align:center}
<body><p class="italic">This text is italic</p></body>
All text between the <p> element is italicized.
p.italic{font-style:italic}

Positioning Elements

In CSS every element on a page is considered to be in a rectangular box. There are two types of boxes: inline and block. You use CSS properties to control the spacing and alignment of the "boxes".

Content— The foundation from which you build outwards.

 

Padding— p.padding {padding-top: 10px}
This table cell has 10% cell padding

 

Border— p.border {border-style: solid; border-width: 5px}
Sets the border style and width

 

Margin— p.margin {margin: 2cm 4cm 3cm 4cm}
This is a paragraph with specified margins

How to use CSS in VHI

Using the DIV Element and Layout in VHI

The <div> tag defines a division or section in a document. It acts as a container for other items. DIV elements use CSS properties to determine the overall layout of the Web application. For example, header, menu, procedures, and content.

 

DIV elements are used extensively in VHI Web applications and the DIV structure is determined by XSLT when the application is generated (in Web Builder) and by ASP and JSPs at runtime.

CSS File Structure in VHI

These are the CSS files in VHI used to build a "theme":

Additional resources

How to Customize a Theme walks you through the entire process using examples of different CSS elements to change font styles, colors, and logo images.

There are many references to CSS and how to use it available on the Web. Refer to these resources for tools, inspiration, and guidance. Some suggestions:

 

 

  Attachmate