# Loading custom css overwrite scss

**URL:** <https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346>\
**Category:** Uncategorized\
**Created:** [May 14, 2021, 8:33am UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346 "2021-05-14T08:33:04Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![yousuo](https://avatars.discourse-cdn.com/v4/letter/y/898d66/32.png) [@yousuo](https://discourse.cakephp.org/u/yousuo)\
**Post date:** [May 14, 2021, 8:33am UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346/1 "2021-05-14T08:33:04Z")

</div>

Hi,

I am new to scss. I am using bootstrapUI. My _custom.css_ is being overwritten by _\_tables.scss_

Is there a way to have my custom.css right on top ?

```
$this->Html->css( ['BootstrapUI.bootstrap.min', 'custom'] , ['block' => true]);
echo $this->fetch('css');

```

 ![scss 1](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/d/df76b60274b8c106516188731ba27e42ec766b06.png)

---

<div class="post-metadata">

**Author:** ![Mentis](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/mentis/32/994_2.png) [@Mentis](https://discourse.cakephp.org/u/Mentis)\
**Post date:** [May 17, 2021, 8:35pm UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346/2 "2021-05-17T20:35:51Z")

</div>

Can you provide a better image of how the code behaves?

I’d like to see

- Rendered HTML of what `echo $this->fetch('css');` generates.
- Expanded view of the developer tool containing the CSS properties you apply and the properties bootstrapUI applies, and how it is overwritten.

---

<div class="post-metadata">

**Author:** ![raul338](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/raul338/32/69_2.png) [@raul338](https://discourse.cakephp.org/u/raul338)\
**Post date:** [May 18, 2021, 2:04pm UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346/3 "2021-05-18T14:04:11Z")

</div>

You need to have a higher [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) to appear first (or inline in style attribute)

Check this article in [css-tricks](https://css-tricks.com/specifics-on-css-specificity/)

---

<div class="post-metadata">

**Author:** ![yousuo](https://avatars.discourse-cdn.com/v4/letter/y/898d66/32.png) [@yousuo](https://discourse.cakephp.org/u/yousuo)\
**Post date:** [May 18, 2021, 2:14pm UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346/4 "2021-05-18T14:14:59Z")

</div>

@raul338 my code specifies `custom.css` at the end, so in normal case, `custom.css` will overwrite the previous values.

@Mentis here is the output of `debug( $this->fetch('css') );`

`<link rel="stylesheet" href="/bootstrap_u_i/css/bootstrap.min.css"/><link rel="stylesheet" href="/css/custom.css"/>`

 ![cake scss 1](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/d/d79081be5dd6e1b7364e961c70ab444ccfe2ea9e.png)

---

<div class="post-metadata">

**Author:** ![Mentis](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/mentis/32/994_2.png) [@Mentis](https://discourse.cakephp.org/u/Mentis)\
**Post date:** [May 18, 2021, 2:41pm UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346/5 "2021-05-18T14:41:58Z")

</div>

Looks to me like your `styles.css` is overwriting the `_tables.css`.

The `verticle-align` property is using the value from your `styles.css` stylesheet.

![bilde](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/9/97a066b8109c8889031e88f5fe6933b815001129.png)

I’m sorry if I’m misunderstanding your problem.

---

<div class="post-metadata">

**Author:** ![raul338](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/raul338/32/69_2.png) [@raul338](https://discourse.cakephp.org/u/raul338)\
**Post date:** [May 18, 2021, 2:53pm UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346/6 "2021-05-18T14:53:39Z")

</div>

> [@yousuo](#):
>
> @raul338 my code specifies `custom.css` at the end, so in normal case, `custom.css` will overwrite the previous values.

Except that’s not exactly how CSS works, thats why i’ve pointed those articles.

You are overriding now with `!important`, if you don’t want to use `!important` you have to use like this:

```css
.table td {
   vertical-align: middle;
}

```

that way it will stay first, also applying other styles too ( like padding) without setting `!important` to all of them.

---

<div class="post-metadata">

**Author:** ![yousuo](https://avatars.discourse-cdn.com/v4/letter/y/898d66/32.png) [@yousuo](https://discourse.cakephp.org/u/yousuo)\
**Post date:** [May 19, 2021, 9:31am UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346/7 "2021-05-19T09:31:50Z")

</div>

@Mentis @raul338 My question is not the css contents, but why the files are not loaded in sequence, not so much of the contents and `!important`

I expect it to load in sequence like this, so custom.css will be right on top. but looks to me is like \_tables.scss is right on top and thus overwritting any other css that I call.

1. Load bootstrap.min
2. Load custom.css

---

<div class="post-metadata">

**Author:** ![Mentis](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/mentis/32/994_2.png) [@Mentis](https://discourse.cakephp.org/u/Mentis)\
**Post date:** [May 19, 2021, 10:09am UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346/8 "2021-05-19T10:09:31Z")

</div>

It is loading it in that order. I’m on my mobile, so can’t confirm, but I’d venture a guess that Chrome developer tools is sorting the stylesheets alphabetically when displaying them in the tool.

As you can see by your earlier post, CakePHP does load the stylesheet for bootstrap first, then your custom stylesheet.

---

<div class="post-metadata">

**Author:** ![raul338](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/raul338/32/69_2.png) [@raul338](https://discourse.cakephp.org/u/raul338)\
**Post date:** [May 19, 2021, 1:11pm UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346/9 "2021-05-19T13:11:46Z")

</div>

> [@yousuo](#):
>
> My question is not the css contents, but why the files are not loaded in sequence

The files are loaded in sequence.

But the styles tab from chrome developer tool, does not show files in order.

It shows the css rules in order of specificity (check my first response), that applies to the element you have selected (in this case a table cell).

The name `_table.scss` shows because the `bootstrap.min.css` has a sourcemap embebed, it showing that the rule comes from the [\_tables.scss](https://github.com/twbs/bootstrap/blob/v4.6.0/scss/_tables.scss#L13) in bootstrap source code.  
You can disable `CSS sourcemaps` in the settings of the developer tools

---

<div class="post-metadata">

**Author:** ![yousuo](https://avatars.discourse-cdn.com/v4/letter/y/898d66/32.png) [@yousuo](https://discourse.cakephp.org/u/yousuo)\
**Post date:** [May 19, 2021, 2:34pm UTC](https://discourse.cakephp.org/t/loading-custom-css-overwrite-scss/9346/10 "2021-05-19T14:34:49Z")

</div>

thanks. I thought the files shown in the developer tools were showing & loading in order.