setStyle()

Category:Advanced

Apps in App Lab are composed of HTML elements, such as buttons. While these elements can be styled to some extent using the Design Tab, more advanced styling (or any styling of programmatically created elements) can be achieved by using CSS. This advanced function allows assigning CSS styles to HTML design elements in an app.

Examples

Big and Bold

Apply style to make a programmatically created text label bold and large.

textLabel("myLabel", "some text to style");
setStyle("myLabel", "font-weight: bold; font-size: 30px;");

Fancy Button

Apply several different styles to a single element

setStyle("fancyButton", "font-family: monospace;");
setStyle("fancyButton", "font-size: 40px;");
setStyle("fancyButton", "font-weight: bold;");
setStyle("fancyButton", "border-radius: 50px;");
setStyle("fancyButton", "background: linear-gradient(red, yellow);");
setStyle("fancyButton", "border: 2px solid red");

Syntax

setStyle(id, css)

Parameters

NameTypeRequired?Description
id String The ID of a design element to be styled.
css String A string of CSS, using inline syntax.

Tips

  • Calling setStyle multiple times on the same element won't overwrite its style, but will append new styles on top of existing ones.

Found a bug in the documentation? Let us know at documentation@code.org