# Getting started with CSS

{% hint style="info" %}
**Who can use this feature?**

👤 Available on Pro and Enterprise plans
{% endhint %}

#### 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.