From Xojo Documentation

You are currently browsing the old Xojo documentation site. Please visit the new Xojo documentation site!

Class (inherits from Object)

New in 2020r1

A WebStyle is a collection of methods and properties that manage the look of a user interface elements in your web app.

BackgroundColor Cursor Italic
Bold FontName Opacity
BorderColor FontSize Strikethrough
BorderThickness ForegroundColor Underline
AddTransition HasCSSProperty SubClass
CSSValue Remove Value
Clone RemoveTransition
Cursors SpeedPatterns


A WebStyle can be applied to any object that has a WebStyle property.

You can create WebStyle objects that are subclasses of an existing WebStyle using the SubClass method. A subclass inherits all of the values of the parent object and can then override any of those values.

Sample Code


There are many CSS Selectors that can be animated.

This code in a WebRectangle's Opening event adds a transition that will change the width of the WebRectangle. It then stores the width of the WebRectangle in the style's width property. This is done so that when the transition is triggered later by modifying the width, the width stored in the width property of the WebStyle will match that of the WebRectangle being animated:

Me.Style.AddTransition("width", 5, WebStyle.TransitionTimingFunctions.EaseInOut, 0)
Me.Style.Value("width") = Me.Width.ToString + "px"

The transition animation of the width of the WebRectangle is then triggered by changing the width value to a new value:

Var currentWidth As Integer = Rectangle1.Style.Value("width").ToInteger
currentWidth = currentWidth + 600
Rectangle1.Style.Value("width") = currentWidth.ToString + "px"

Because the name ("width" in this case) above passed to both AddTransition and Value is the name of a CSS selector, it must be in lowercase as selector names are case-sensitive.

Because WebStyles use CSS under the hood, there are many CSS properties that can be animated.


Selectors that are dimensions such as width and height are in pixels and thus you must add "px" (lowercase) to the values you pass as in the example above.


Web projects on all supported operating systems.