SimpleCSSDesigns

A repository of simple CSS codes for styling Run BASIC applications


 * Blocking Text Inside a Div

Displaying Links as Buttons using CSSID and CSSClass
code format="vbnet" ' Proportions: Solve for X ' This demo doesn't loop to generate more than one equation Call setCSS

[Anew] n$(0) = Equation$ x$ = "X = " n$(1) = "" n$(2) = ""

[Display] Cls Div Banner Print "Solving Proportions" End Div

Div Equation Print Word$(n$(0), 1, "=") End Div

Div UserInput Print x$;n$(1) Print n$(2) End Div

Div NumberTray Call TheButtons End Div Wait

[nEnd] Cls '   Call Banner '   Call Goodbye Wait

[nClear] n$(1) = "" n$(2) = "" Goto [Display] Wait

[nCheck] cAns = Val(Word$(n$(0), 2, "=")) uAns = Val(n$(1)) If cAns = uAns Then n$(2) = "Correct" Else n$(2) = "Incorrect" End If   Goto [Display] Wait

[n0] n$(1) = n$(1);0 Goto [Display]

[n1] n$(1) = n$(1);1 Goto [Display]

[n2] n$(1) = n$(1);2 Goto [Display]

[n3] n$(1) = n$(1);3 Goto [Display]

[n4] n$(1) = n$(1);4 Goto [Display]

[n5] n$(1) = n$(1);5 Goto [Display]

[n6] n$(1) = n$(1);6 Goto [Display]

[n7] n$(1) = n$(1);7 Goto [Display]

[n8] n$(1) = n$(1);8 Goto [Display]

[n9] n$(1) = n$(1);9 Goto [Display] Wait

Sub setCSS CSSID #Banner, "{       Background-Color: Yellow;        Font-Family: Verdana;        Font-Size: 3em;        Font-Weight: Bold;        Text-Align: Center;        Color: Black;        Width: 498px;        Padding: 20px 20px 20px 20px;        Margin-Left: 50px;        Border-Color: Blue;        Border-Size: Thick;        Border-Style: Ridge;        Border-Bottom-Style: Dotted;    }" CSSID #Equation, "{       Background-Color: #FFFFC0;        Font-Family: Verdana;        Font-Size: 2.5em;        Font-Weight: Bold;        Text-Align: Center;        Color: #C0C0C0;        Width: 498px;        Padding: 20px 20px 20px 20px;        Margin-Left: 50px;        Border-Color: Blue;        Border-Size: Thick;        Border-Style: Ridge;        Border-Top: None;        Border-Bottom-Style: Dotted;    }" CSSID #UserInput, "{       Background-Color: #FFC0C0;        Font-Family: Verdana;        Font-Size: 2.5em;        Font-Weight: Bold;        Text-Align: Left;        Width: 390px;        Padding: 20px 20px 20px 128px;        Margin-Left: 50px;        Border-Color: Blue;        Border-Size: Thick;        Border-Style: Ridge;        Border-Top: None;   }" CSSID #NumberTray, "{       Background-Color: #C0C0C0;        Width: 532px;        Padding: 10px 3px 10px 3px;        Margin-Left: 50px;        Border-Color: Blue;        Border-Size: Thick;        Border-Style: Ridge;    }" CSSClass "a.nButton", "{       Text-Decoration: None;        Font-Size: 18pt;        Font-Weight: Bold;        Width: 30px;        Height: 30px;        Display: Block;        Background: #FFFFC0;        Color: #C0C0C0;        Margin-Right: 1px;        Float: Left;        Text-Align: Center;        Border-Width: Thick;        Border-Style: Outset;        Border-Color: #C0C0C0;    }" CSSClass "a.clButton", "{       Text-Decoration: None;        Font-Size: 18pt;        Font-Weight: Bold;        Width: 87px;        Height: 30px;        Display: Block;        Background: #FFFFC0;        Color: #C0C0C0;        Margin-Right: 1px;        Float: Left;        Text-Align: Center;        Border-Width: Thick;        Border-Style: Outset;        Border-Color: #C0C0C0;    }" CSSClass "a.eButton", "{       Text-Decoration: None;        Font-Size: 18pt;        Font-Weight: Bold;        Width: 248px;        Height: 30px;        Display: Block;        Background: #FFFFC0;        Color: #C0C0C0;        Margin-Top: 7px;        Margin-Right: 7px;        Float: Left;        Text-Align: Center;        Border-Width: Thick;        Border-Style: Outset;        Border-Color: #C0C0C0;    }" End Sub

Sub TheButtons Link #n0, "0", [n0] #n0 CSSClass("nButton") Link #n1, "1", [n1] #n1 CSSClass("nButton") Link #n2, "2", [n2] #n2 CSSClass("nButton") Link #n3, "3", [n3] #n3 CSSClass("nButton") Link #n4, "4", [n4] #n4 CSSClass("nButton") Link #n5, "5", [n5] #n5 CSSClass("nButton") Link #n6, "6", [n6] #n6 CSSClass("nButton") Link #n7, "7", [n7] #n7 CSSClass("nButton") Link #n8, "8", [n8] #n8 CSSClass("nButton") Link #n9, "9", [n9] #n9 CSSClass("nButton") Link #nClear, "Clear", [nClear] #nClear CSSClass("clButton") Link #nEnd, "End Program", [nEnd] #nEnd CSSClass("eButton") Link #nCheck, "Check Answer", [nCheck] #nCheck CSSClass("eButton") End Sub

Function Equation$ x1 = Int(Rnd(1) * 10) + 1 x3 = Int(Rnd(1) * 20) + 10 x2 = x1 * x3   If Int(Rnd(1) * 2) = 1 Then x = x1       x1 = x2        x2 = x    End If    x1$ = Str$(x1) x2$ = Str$(x2) m = Int(Rnd(1) * 80) + 10 y1 = x1 * m   y2 = x2 * m    y1$ = Str$(y1) y2$ = Str$(y2) Select Case Int(Rnd(1) * 4) + 1 Case 1 ans$ = x1$ x1$ = "X" Case 2 ans$ = x2$ x2$ = "X" Case 3 ans$ = y1$ y1$ = "X" Case 4 ans$ = y2$ y2$ = "X" End Select Equation$ = x1$;" : ";x2$;" :: ";y1$;" : ";y2$;"=";ans$ End Function code