CSSCLASS

CSSCLASS
The **CSSCLASS** statement is used to create styles with which to format links, tables, and SQLite tables.

Styling with CSS, tells us about the styles used in Cascading Style Sheets.

> //Cascading Style Sheets (CSS) is a style language that defines the layout of one or more sections of HTML documents. Background colors, font colors and types, and image layering are just some of the special effects that can be achieved using CSS and Run BASIC. The CSS layout is defined using the CSSID command. Each CSS layout is given a unique name. Run BASIC then uses the DIV command to assign sections of the defined CSS layout.//

Be sure to read that article for an in-depth guide to styling with Cascading Style Sheets.

The syntax for **CSSCLASS** is:

CSSCLASS tagExpr$, ruleExpr$ - Define a CSS class rule with tagExpr$ and ruleExpr$

tagExpr$ is the unique name you are giving to this class. It should begin with the HTML tag for the desired element. Here are some HTML tags:

table - for a table th - for a table header tr - for a table row td - for table data (one cell in a table) caption - for a table caption a - for a link

Some valid classnames:

table.CoolTable th.HeaderStyle a.FancyLink

The ruleExpr$ part of a **CSSCLASS** statement contains the CSS rule(s) desired. The options are nearly endless. Read Styling With CSS to learn how to create rules. Enclose the rule in double quotation marks. Here is a small example.
 * Rule Expression**

To create a table row class with **CSSCLASS**, you might do this, which sets the background color for table rows:

code cssclass "tr.rowclass", "{ Background-Color: #EEF }" code


 * Using the CSSCLASS Method**

The **CSSCLASS** method causes an object to take on the specified style. A table with the handle #handle uses the following statement. The tag part of the class name is not used when setting a class with the **CSSCLASS** method. The class defined as "tr.rowclass" is invoked as "rowclass".

code 'use tr.rowclass for this table code
 * 1) handle trclass("rowclass")

Here is a small program that causes a link to look like a button.



code format="vbnet" html " " 'create a link link #hello, " Greeting ", hello print:print 'minimum CSSClass to make a link look like a button CSSClass "a.linkButton", "{       Width: 140px;        Height: 30px;        Text-Align: Center;        Border-Width: Medium;        Border-Style: Outset;        Text-Decoration: None;        Display: Block;    }" wait sub hello key$ print "Hello, nice to meet you!" end sub code
 * 1) hello CSSClass("linkButton")