css specificity with bootstrap

Question

I'm trying to understand the css specificity. What I want to achieve is to have the basics.css to have the highest specificity so that whatever it's in there will overwrite completely the bootstrap css, even if it's the same selector.

How can I order my files here to achieve this?

@import url("common.css");
@import url("links.css");
@import url("content.css");
@import url("colours.css");
@import url("basics.css");
@import url("/bootstrap/css/bootstrap.css");
@import url("/bootstrap/css/bootstrap-responsive.css");
@import url("/bootstrap/css/bootstrap-select.min.css");
@import url("/footable/css/footable.core.min.css");
@import url("/font-awesome/css/font-awesome.css");
@import url("/iconmoon/style.css");

Answer 1

The LAST CSS overwrites the FIRST CSS called.

So, in order to do this, i would recommend you to call first the least important CSS and last the most important.

In this case, you would call first bootstrap.css and last basics.css

EDIT:
Something like this

@import url("/bootstrap/css/bootstrap.css");
@import url("/bootstrap/css/bootstrap-responsive.css");
@import url("/bootstrap/css/bootstrap-select.min.css");
@import url("/footable/css/footable.core.min.css");
@import url("/font-awesome/css/font-awesome.css");
@import url("/iconmoon/style.css");
@import url("common.css");  
@import url("links.css");
@import url("content.css");
@import url("colours.css");
@import url("basics.css");