tl;dr the most specific styles will override everything else

Despite how hard I've tried to not get involved in front-end and styling, I've found that I can't escape that realm. The world likes pretty things (and so do I), so let's be real, CSS is important. Recently I've had to try overriding bootstrap styles, and it turns out it's not as easy as I thought. Well, maybe it's easy to people who write more than a few lines of CSS a month, but for those of use who'd like to stay as many degrees of freedom away from the user as possible, this could be very helpful (and those are my kind of people).

The easiest way to override other styling is to add an id, because ids > classes in the world of css. But if you want to modify everything about a bootstrap class, for example if you want to modify the text-color of elements in the navbar, you'll want to style those bootstrap classes. The catch is that the styling needs to be exact. For example, if I use inspect element to look at the navbar, I can see that bootstrap is styling the text color of everything in the navbar like this:

.navbar-default .navbar-brand {
color: #777;
}

To override that color, specifying css like this:

.navbar-brand {
color: #FFF;
}

actually won't work, because it's less specific than the css styling that bootstrap provides. You have to actually specify it like this for it to work:

.navbar-default .navbar-brand {
color: #FFF;
}

P.S. Inspect element on Google Chrome is the most amazing thing to happen to front-end. You can play around with styling without ever having to change your code, so you can just try out different things without constantly reloading the page.

Here's an example: (Are you not blown away???) (Also, is this meta?)