Basic CSS question: override onsenui css

[Remco Koffijberg]

I’ve these CSS files referenced in the index.html:

    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
      
    <link rel="stylesheet" href="css/style.css">

I would like my style.css to override all other css. This is happening on screen in the preview, but not on my phone in the debugger (android).

Is there a link to some documentation that can help me here? Or maybe a short answer how to make this css overrride other css?

thanks

[munsterlander]

@Remco-Koffijberg You may have a typo as loader.css is typically loader.js. Either way, CSS load order is very important. The first file has the precedent over the next and so on. So, if you are overriding a previously set CSS attribute, then you will need to use !important or you can change the load order of the files and have your style file first. That doesn’t mean it will fix everything, as a subsequent file may use the important attribute as well, so again, load order is important.

[Remco Koffijberg]

Thanks, i didn’t know… i’ll check and see

[munsterlander]

@Remco-Koffijberg No problem. If that doesn’t fix it, just post the CSS that is failing and some of us can try to help diagnose the issue.

[Remco Koffijberg]

Thanks.

I changed all kind of orders (-;

this is the css line

html , body , .page{font-family: 'Menlo-Regular'  !important}

it is just fine in the preview.
In the Monaca Debugger it’s replaced by another font.

BTW I do have loader.js as well. Loader.css says:

/**
 * This is an auto-generated code by Monaca JS/CSS Components.
 * Please do not edit by hand.
 */

/*** <GENERATED> ***/

[munsterlander]

@Remco-Koffijberg Font-family is defined in numerous areas. You would need to do it for every location in this file:

https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0/css/onsen-css-components.css

There might be some override, but that is the only way I have found to do it so far.

[ephraimt]

The answer is here:

https://community.onsen.io/topic/1272/how-to-override-css/2