Specificity

When two rules give different values to the same property on the same element, the browser first chooses between them by specificity, meaning how precise the selector is. An #id beats any number of classes, a class beats any number of element selectors, and if the two rules tie, the one written later in the file wins.

That's why you write .active and the color doesn't change: #sidebar .menu a has higher specificity thanks to the id. The bold weight does apply, though, because that rule doesn't mention it. A losing rule only loses the properties where it conflicts with another rule.

The quick fix with !important is a trap. It solves the problem this time and then opens a door that never closes, because every change after it needs another !important with a heavier selector. The right fix is to lower the specificity: stick to a few classes and don't use ids for styling.