# Getting started with CSS in Stacker

#### What is CSS?

CSS (Cascading Style Sheets) is a language used in software to define how a website or app should look. In Stacker, you can use it to change how specific parts of your app look. For instance, you could change the background color of your app, the shape of your buttons, or the amount of drop shadow under a record.

This tutorial is for people who are new to using CSS. By the end of the tutorial you will have a good idea of how to get started using it in Stacker.

#### Using CSS in Stacker

Let’s start by understanding how CSS works within Stacker. To change how something in your app looks, you need to know its **class**. The class is the text used to describe the thing you want to change in your app. For instance, if you wanted to change how your Save button looks, you’d use the class `.stk-save-button` or if you wanted to change the text in your app, you’d use `.stk-text`.

You then need to tell Stacker what attribute of that class you want to change, and this is put within curly brackets. Let’s try out a couple of examples.

To input CSS, click **App settings → Appearance → Custom CSS.**

To change the background color of your app, you can target the `.stk-content` class. Here’s an example:

```css
.stk-content {
  background-color:#f6f6f1;
}
```

This gives our background this off-white color:

![Untitled\_\_23\_.png](https://support.stackerhq.com/hc/article_attachments/15695456022931)

We’ve used the `background-color` property combined with a hex code to choose a color. You can use a tool like [Adobe Color](https://color.adobe.com/create/color-wheel) to create hex codes.

Or, we could change the background color and height of the Add New button using the `.stk-add-new-button` class:

```css
.stk-add-new-button {
  background-color:#7FA4B3;
  height:40px;
}
```

This makes our button a bit taller and changes its color:

![Untitled\_\_24\_.png](https://support.stackerhq.com/hc/article_attachments/15695489579027)

You can also use some color names like `CornflowerBlue` rather than hex codes - there’s a full list here: [HTML Color Names](https://www.w3schools.com/colors/colors_names.asp).

Now, let’s say we want to change how the a table on a list view looks. We could change the background color of both the list and the header, as well as giving it a more visible border.

```css
.stk-table {
  background-color:#E8F8FF;
  border:solid;
  border-color:#7FA4B3;
}
.stk-table-header {
background-color:#CFF1FF;
}
```

Which gives us the below:

![Untitled\_\_25\_.png](https://support.stackerhq.com/hc/article_attachments/15695460544147)

We could also make it so when you hover over a row it’s highlighted using the `:hover` selector:

```css
.stk-table-row:hover {
  background-color:#7FA4B3;
}
```

![Untitled.gif](https://support.stackerhq.com/hc/article_attachments/15695494494739)

You can also use `:hover` for buttons to change how they look when a user hovers over them.

**Accessibility**

Something consider when changing the colors in your app: You always want to think about accessibility. Ask yourself: *Is the text still readable?*

These changes we’re making are currently affecting all tables in our app. It might be that you only want to change how a list view looks on a particular page. To do that, use this handy snippet of CSS:

```css
.stk-page-PAGE_NAME .stk-table {
  background-color:#E8F8FF;
  border:solid;
  border-color:#7FA4B3;
}
.stk-table-header {
background-color:#CFF1FF;
}
```

Where PAGE\_NAME is the name of your page (you can get this from the page URL).

Now you’re familiar with the basics, you can start using the CSS classes listed in our [Custom CSS](https://support.stackerhq.com/hc/en-us/articles/4409598258579-Custom-CSS#current-class-list-0-1) article to customise your app. And check out [w3schools](https://www.w3schools.com/css/default.asp) to understand more about what you can change about each class. There are loads of options that let you change the shape, color, size, font, etc.

#### Dynamic CSS classes in Stacker

One important thing - if you’re familiar with developer tools, you’ll find you can reveal CSS classes in your app that look like `css-o342e34` - these CSS classes are generated by Stacker, and are subject to change without notice. So while your app might look ok at the time of you inputting the CSS, there’s no guarantee it will remain that way in the future.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stackerhq.com/stacker-classic/customization/getting-started-with-css-in-stacker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.