I want to reproduce the custom block described in https://bookdown.org/yihui/rmarkdown-cookbook/custom-blocks.html#block-shaded for HTML output:

I understand that there are two ways of doing this:

1. insert the definition directly into a .Rmd file
2. add the definition to the style.css file

Approach 1 works, approach 2 does not.

Approach 1: insert the definition directly into the .Rmd file.

I added these lines to the .Rmd file:

    ```{css, echo=FALSE}
    .blackbox {
      padding: 1em;
      background: black;
      color: white;
      border: 2px solid orange;
      border-radius: 10px;
    }
    .center {
      text-align: center;
    }
    ```

:::: {.blackbox data-latex=""}
::: {.center data-latex=""}
**NOTICE!**
:::

Thank you for noticing this **new notice**! Your noticing it has
been noted, and _will be reported to the authorities_!
::::

I DID get the desired result:
enter image description here

Approach 2: insert the definition of the box in the style.css file.

I added these lines at the top of the file style.css:

.blackbox {
  padding: 1em;
  background: black;
  color: white;
  border: 2px solid orange;
  border-radius: 10px;
}
.center {
  text-align: center;
}

then in the .Rmd file I only added:

:::: {.blackbox data-latex=""}
::: {.center data-latex=""}
**NOTICE!**
:::

Thank you for noticing this **new notice**! Your noticing it has
been noted, and _will be reported to the authorities_!
::::

then in the file _output.yml I have:

bookdown::gitbook:
  css: style.css

In this approach I did NOT get the desired result:

enter image description here

Why doesn’t approach 2 work?