Is Your CSS !important?

Today while working on the LFI project, I was creating a page layout for the pages that display a link to the CSI specifications for the products. I added a summary links web part to the page and it accomplished the task that I wanted. The problem was the default color scheme and design that the web part employed. It would never match the color scheme of the current LFI site.

I began where any other Web desgner would and created a CSS class in my external style sheet to change the color to the more appealing green. I added two classes:

a.CSILink {
color: #457E54;
text-decoration:none;
font-size:9pt;
font-family: Arial;
}
a.CSILink:hover {
color: #497c21;
text-decoration:none;
font-size:9pt;
font-family:Arial;
}

I tested the classes and found that the anchor was not changing color. When I rolled over the anchor the appropriate class was being used.

Now knowing the MOSS has thousands of CSS classes and XSL sheets for design, I began to poke into the XSL style sheet for the web part and modified the sheet by copying one of the templates and creating my own. We had done this before for antother part of the site and it worked nicely. Not so much this time.

The style was not being applied no matter how I modified the CSS and XSL sheets. I called over my fellow employees and they looked over the CSS and aspx pages and could not find anything wrong. We tried a few other methods when Art suggested we add the word !important after the color for the anchor tag. I had never heard of this keyword before and did not know what it did, so I placed it into the CSS sheet and tested the style.

This time it worked! There was a small glitch that the hover style did not work now, so I had to go back into the style sheet and add !important to the hover style as well.

Art explained that the !important keyword says that this style should be applied over all others. The only explanation for why it wasn't working before is that somewhere in the Sharepoint CSS classes there is one that specifies an anchor tag in the same combination that I have but that none of the links in Sharepoint have a hover feature, so the hover class worked fine.