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

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");

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;");

Syntax

setStyle(id, css)

Parameters

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

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