G Suite Business customers can preview App Maker. Ask your domain admin to apply for early access.

CSS Reference

Cascading Style Sheets, or CSS, controls the style and layout of websites and apps. In App Maker, you can use CSS to specify widgets' colors, fonts, borders, and more to customize the look of your app.

Add your CSS in the Style tab, in the right-hand menu of the Page editor. For example, to turn a button named Button1 orange, you could select the button in your page, and add following code in the Style tab:

.app-NewPage-Button1 {
  background-color: orange;
}

Basic CSS

Fonts

Effect CSS/Style Original With applied style Possible values
Bold font-weight: bold; sample text sample text normal, bold
Italic font-style:italic; sample text sample text normal, italic
Strikethrough text-decoration: line-through; sample text sample text underline, line-through, overline
Text color color: red;
color: #ff0000;
sample text sample text Color name or an HTML color code
Text size font-size:20px; sample text sample text pixel size or em units
Text alignment text-align: right; sample text sample text left, center, right

Panels, buttons, etc.

Borders

Effect CSS/Style Original With applied style
Add or change borders border: 1px red solid;
Remove borders border: none;

Rounded borders

Effect CSS/Style Original With applied style
Round all corners border-radius:5px;
Round corners individually border-top-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
sample text
sample text

Background color

Effect CSS/Style Original With applied style
Add or change color background-color: lightgreen;
Remove color background: none;

Cursor

Effect CSS/Style Original With applied style
Pointer (clickable elements) cursor: pointer; sample text sample text
Arrow (non-clickable elements) cursor: default; sample link sample link

Handle overflowing content

Sometimes your app's content is too large for its container. Whether it's text that's too long for a label widget, or a group of widgets that don't quite fit in a panel, CSS can define how your app responds when content overflows its container.

Hide overflowing content

Effect CSS/Style Original With applied style
Cut overflowing content
overflow: hidden;
CSS IS AWESOME
CSS IS AWESOME
Enable scrolling
overflow: auto;
CSS IS AWESOME
CSS IS AWESOME
Cut content that's too wide
overflow-x: hidden;
CSS IS AWESOME
CSS IS AWESOME
Enable scrolling for content that's too long
overflow-y: auto;
CSS IS AWESOME
CSS IS AWESOME

Use ellipses for overflowing text

Effect CSS/Style Original With applied style
Ellipses overflow: hidden;
text-overflow: ellipsis;
Internationalization
Internationalization

Change standard browser effects

Your browser has a standard way of displaying most interactive elements. For example, links you've already visited usually show up underlined and purple. You can redefine these styles using CSS pseudo selectors.

Hovering

Positioning your mouse over an element is called hovering. Buttons and links have built-in hover effects, but you can add hover effects to any app maker widget, including input fields and panels.

CSS/Style Original With applied style
.blueButton {background-color: blue;}
.blueButton:hover {background-color: pink;}
.testClass {}
.testClass:hover {background-color: #FFA500;}
sample text
sample text

Focusing and the !important modifier

Interacting with an element brings it in focus. For example, when you click on an input box, a text cursor appears. Having focus means that all input from keyboard goes straight to the focused element.

Sometimes, your styles conflict with styles defined by browser or App Maker themes. If your CSS fails to render, try adding the !important modifier to your style to ensure it's not overridden by browser or theme styles. Try not to apply the modifier too widely; it might override important built-in styles.

CSS/Style Original With applied style
.inputClass {}
.inputClass:focus {border:1px solid red;}
.inputClass1 {}
.inputClass1:focus {border:1px solid red !important;}

Next steps