My CSS are overridden by Bootstrap CSS

Question

I want to add GWT-Bootstrap to my already-started project. I managed to use it, but the Bootstrap CSS is overriding every other CSS. The result is that all my previous UI elements are mixed up.

The margin, the text size, and a lot of elements don't fit any more. I can't use Bootstrap because all the rest of the project is unusable. I would like to do a progressive change to Bootstrap and keep the old stuff like it is.

I would like to have my CSSs in this priority order:

• MyApp
• GWT
• Bootstrap

I tried to order them in my *.gwt.xml without success:

<stylesheet src="css/gwt-bootstrap.css" />
<stylesheet src="css/bootstrap.min.css" />
<stylesheet src="gwt/clean/clean.css" />
<stylesheet src="MyApp.css" />

What can I do?

Answer 1

The priority of using styles is driven by more complicated algorithms than just an order on inclusion in HTML. The CSS style is chosen with the most specific selection rule, where inline rules are considered more specific then externally attached, then selection by ID, then the class and at the end selection with tag name. For example, the paragraph <p id="xyz" class="xyz"> will be red independently of the order of rules:

.xyz {
  color: blue;
}
#xyz {
  color: red;
}

If there are two rules with the same selection type, the number matters. So, selection .xyz .abc is "stronger" then .qwerty.

If two rules have equivalent selection in terms of numbers in each category, then, in the very end order is taken into account...

You can also force a different order with the !important directive.

Read more about it with "CSS specificity" keywords.

Answer 2

The way overriding styles work is the last one loaded wins.

So if you are expecting the styles from GWT-Bootstrap to override Bootstrap CSS then you'd want to order the stylesheet order something more like this:

<stylesheet src="css/bootstrap.min.css" />
<stylesheet src="gwt/clean/clean.css" />
<stylesheet src="css/gwt-bootstrap.css" />
<stylesheet src="MyApp.css" />