My custom CSS is not taken into account

Question

I add a CSS file (mymovies.css) to a custom form (SeenMovies) in a custom module (eric) with this code I inserted at the end of buildForm

$form['#attached']['library'][] = 'eric/mymovies';

and this code in eric.libraries.yml

mymovies:
  version: 1.x
  css:
    theme:
      css/mymovies.css: {}

But my css doesn't override bootstrap.min.css as you can see in Firefox inspector:

How can I fix that?

Answer 1

This question has nothing to do with Drupal but with CSS order of precedence. If more than one identical CSS rules are found, the last one takes precedence.

As @leymannx pointed in their comment, your page is loading first your CSS file, then Bootstrap. Just move your Bootstrap into a new library as you just did with 'mymovies', then add a dependency to 'mymovies'. Declaring it as a dependency, it will load first the need libraries, then the library being called.

Edit - after saying you are using OnePage Zymphonies theme:

If you check 'onepage_zymphonies_theme.libraries.yml' you will see that the Bootstrap library is defined. Following my answer:

mymovies:
  version: 1.x
  css:
    theme:
      css/mymovies.css: {}
  dependencies:
      - onepage_zymphonies_theme/bootstrap

Answer 2

Finally, I used the advice from @leymannx and changed my css to

#seen-movies hr{
  margin-top: 0px;
  margin-bottom: 0px;
  border-top: 1px #808080 solid;
}

where 'seen-movies' is my form id.

Answer 3

Instead of adding an additional selector for all the css in future to override the bootstrap css you can try using the weight flag of libraries like this:

mymovies:
  version: 1.x
  css:
    theme:
      css/mymovies.css: { weight: N }

Just determine the weight of bootstrap library and replace N with the number greater than that.

In this way your mymovies.css will load after bootstrap css and you will no longer need to write that extra selector