Drupal 7 and CSS - How to have a default style for links without affecting other css styles?

Question

I'm theming a Drupal 7 website using Bootstrap and a sub theme that I have put together. I have used CSS to design some of the menus. For this I have included code in the overrides file so as not to hack the original Bootstrap file.

Here's an excerpt from the CSS file to customize the look of a menu.

#block-menu-office li { display: inline; list-style-type: none; padding-right: 20px; font-size: 1.1em; font-style: bold; text-decoration: none; text-transform: uppercase; padding-right: 0.1em; padding-top: 0.1em; }

This works well.

Now I want to customize how links on the website look like. For some reason they seem to be black with no underline. I want them blue with an underline.

When I add this code, the links do turn blue and show up with an underline. However the menu items also get underlined.

a:link { color: red; }

How do I alter the default appearance of the links without affecting how the menu items look? I added a class to the CSS and used this class in the CKEditor when adding the link to the node. However this seems tedious. I would prefer to have a default appearance or alternatively a default class assigned to each link within the node when it is being created. Thanks!

Answer 1

First, I would expect that the styling of menu links by Bootstrap would be more specific than the (general) CSS rules you provide for styling links. But a workaround would be to reapply the styling on the menu links in your sub-theme (with more specific CSS rules).

Answer 2

put your general code first... and add a: link to your menu rule... CSS Cascades... and the more specific you are naming your element the fewer things it touches