# Customising components with SCSS

One of the most powerful ways to customise components isn't props or, even, Svelte.

## How's that??

Let's say you wanted to change our `BeforeAfter` component. You want the text overlays to be at the bottom of the image instead of the top like this:

The first thing you should do is  and see if CSS can make the change you want.

In our case, we want to change the absolute position of those elements. To test that'll actually work, we can 

Now that we know we can change what we need through CSS it's time to write some SCSS, either in your `global.scss` file or directly in a component like `App.svelte`.

First, let's look at the class of the style rule we changed in the inspector:

`figure.before-after-container.s-khJY-w4TYkp5 .overlay-container.before.s-khJY-w4TYkp5`

One thing we always need to do is , i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.

That leaves us with:

`figure.before-after-container .overlay-container.before`

But we need our style rule to _beat_ the original style in the CSS cascade, and right now, it's less specific without those class names we stripped.

The easiest way to make sure your style rule wins out is to . In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)

```scss
figure#my-before-after .overlay-container {
  bottom: 0;
}
```

Now our selector is more specific. We win!

If you don't see a way to add an ID through a component's props, then just wrap the component in a `div` in your code:

```svelte
<div id="my-before-after">
  <BeforeAfter />
</div>
```

... and use that, instead!

```scss
div#my-before-after figure .overlay-container {
  bottom: 0;
}
```

We can&#x20;

Done!

### Can I just... `important!` it?

Yep! Just be sure your style rule is **very specific** and not something generic that might apply to other elements in your page like `div.container`.

Many of the components have `class` or `id` props you can use to attach additional classes or an id that will add more specificity to your components.