CSSCLASS

From Liberty BASIC Family
Jump to navigation Jump to search
Not supported in Just BASIC Not supported in Liberty BASIC Not supported in Liberty BASIC 5 Supported in Run BASIC

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