CSSCLASS()

Description

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.

Syntax

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

Hints

Tag Expression

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

HTML tag	Description
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

Rule Expression

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.

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

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

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".

'use tr.rowclass for this table
#handle trclass("rowclass")

Example

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

html "</div><div>"
'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;
    }"
  
#hello CSSClass("linkButton")
wait
  
sub hello key$
print "Hello, nice to meet you!"
end sub

Useful Procedures

' Place a useful function or sub using this keyword here